h5效果图

h5页面聊天

vue效果图

vue页面聊天

功能实现

spring boot + websocket 实现官方地址 https://docs.spring.io/spring-framework/docs/5.0.8.relea/spring-framework-reference/web.html#websocket

maven 配置文件

    <dependencies>        <dependency>            <groupid>org.springframework.boot</groupid>            <artifactid>spring-boot-starter-thymeleaf</artifactid>        </dependency>        <dependency>            <groupid>com.alibaba</groupid>            <artifactid>fastjson</artifactid>            <version>1.2.78</version>        </dependency>        <dependency>            <groupid>org.springframework.boot</groupid>            <artifactid>spring-boot-starter-web</artifactid>        </dependency>        <dependency>            <groupid>org.springframework.boot</groupid>            <artifactid>spring-boot-starter-websocket</artifactid>        </dependency>        <dependency>            <groupid>org.projectlombok</groupid>            <artifactid>lombok</artifactid>            <optional>true</optional>        </dependency>        <dependency>            <groupid>org.springframework.boot</groupid>            <artifactid>spring-boot-starter-test</artifactid>            <scope>test</scope>        </dependency>    </dependencies>

websocket 配置

package com.example.webchat.config;import org.springframework.context.annotation.bean;import org.springframework.context.annotation.configuration;import org.springframework.web.socket.websockethandler;import org.springframework.web.socket.config.annotation.enablewebsocket;import org.springframework.web.socket.config.annotation.websocketconfigurer;import org.springframework.web.socket.config.annotation.websockethandlerregistry;import org.springframework.web.socket.rver.standard.rvletrvercontainerfactorybean;/** * @author mr.fang * @title: websocketconfig * @description: web socket 配置 * @date 2021/11/14 13:12 */@configuration@enablewebsocketpublic class websocketconfig implements websocketconfigurer {    @override    public void registerwebsockethandlers(websockethandlerregistry registry) {        registry.addhandler(myhandler(), "myhandler/") // 访问路径                .addinterceptors(new websockethandlerinterceptor())  // 配置拦截器                .tallowedorigins("*"); // 跨域    }    @bean    public rvletrvercontainerfactorybean createwebsocketcontainer() {        rvletrvercontainerfactorybean container = new rvletrvercontainerfactorybean();        container.tmaxtextmessagebuffersize(8192);  // 例如消息缓冲区大小、空闲超时等        container.tmaxbinarymessagebuffersize(8192);        return container;    }    @bean    public websockethandler myhandler() {        return new myhandler();    }}

消息处理类

package com.example.webchat.config;import com.alibaba.fastjson.json;import com.alibaba.fastjson.jsonobject;import com.example.webchat.pojo.datavo;import org.springframework.web.socket.clostatus;import org.springframework.web.socket.textmessage;import org.springframework.web.socket.websocketssion;import org.springframework.web.socket.handler.abstractwebsockethandler;import java.io.ioexception;import java.util.*;import java.util.concurrent.concurrenthashmap;/** * @author mr.fang * @title: myhandler * @description: 消息处理类 * @date 2021/11/14 13:12 */public class myhandler extends abstractwebsockethandler {    private static int onlinecount = 0;    //    线程安全    private static map<string, websocketssion> urmap = new concurrenthashmap<>(); // 用户    private static map<string, websocketssion> adminmap = new concurrenthashmap<>(); // 客服    /**     * @description: 连接成功之后     * @param ssion     * @return void     * @author mr.fang     * @date 2021/11/14 13:15     */    @override    public void afterconnectionestablished(websocketssion ssion) throws ioexception {        addonlinecount(); // 当前用户加 1        system.out.println(ssion.getid());        map<string, object> map = ssion.getattributes(); 宫崎骏十大动画电影       object token = map.get("token");        object admin = map.get("admin");        datavo datavo = new datavo();        datavo.tcode(9001).tmsg("连接成功");        if (objects.nonnull(admin)) {            adminmap.put(ssion.getid(), ssion); // 添加客服        } el  {            //        分配客服            urmap.put(ssion.getid(), ssion); // 添加当前用户            distribution(datavo);        }        datavo.tid(ssion.getid());        system.out.println("用户连接成功:" + admin);        system.out.println("用户连接成功:" + token);        system.out.println("在线用户:" + getonlinecount());        this.ndmsg(ssion, jsonobject.tojsonstring(datavo));    }    /**     * @param vo     * @return void     * @description: 分配客服     * @author mr.fang     * @date 2021/11/14 13:13     */    private void distribution(datavo vo) {        if (adminmap.size() != 0) {            random random = new random();            int x = random.nextint(adminmap.size());            t<string> values = adminmap.keyt();            int j = 0;            for (string str : values) {                if (j == x) {                    vo.trecid(str);                    system.out.println("分配id:" + str);                    break;                }                j++;            }        }    }    /**     * @param ssion     * @param message     * @return void     * @description: 收发消息     * @author mr.fang     * @date 2021/11/14 13:13     */    @override    protected void handletextmessage(websocketssion ssion, textmessage message) throws exception {        system.out.print("用户id：" + ssion.getid());        string payload = message.getpayload();        system.out.println("接受到的数据:" + payload);        datavo datavo = json.tojavaobject(json.parobject(payload), datavo.class); // json 转对象        if (objects.isnull(datavo.getrecid()) || datavo.getrecid().equals("")) { // 用户客服为空 分配客服            websocketssion socketssion = adminmap.get(ssion.getid());            if (objects.isnull(socketssion)) {                this.distribution(datavo);            }        }        if (datavo.getcode() == 9002) {            if (objects.nonnull(datavo.getrecid())) { // ur -> admin                websocketssion socketssion = adminmap.get(datavo.getrecid());                datavo.tlfid(ssion.getid()).trecid("");                this.ndmsg(socketssion, jsonobject.tojsonstring(datavo));            } el if (objects.nonnull(datavo.getlfid())) { // admin ->ur                websocketssion socketssion = urmap.get(datavo.getlfid());                datavo.trecid(ssion.getid()).tlfid("");                this.ndmsg(socketssion, jsonobject.tojsonstring(datavo));            }        }    }    /**     * @param ssion     * @param msg     * @return void     * @description: 发送消息     * @author mr.fang     * @date 2021/11/14 13:14     */    private void ndmsg(websocketssion ssion, string msg) throws ioexception {        ssion.ndmessage(new textmessage(msg));    }    /**     * @description: 断开连接之后     * @param ssion     * @param status     * @return void     * @author mr.fang     * @date 2021/11/14 13:14     */    @override    public void afterconnectionclod(websocketssion ssion, clostatus status) {        subonlinecount(); // 当前用户加 1        adminmap.remove(ssion.getid());        urmap.remove(ssion.getid());        system.out.println("用户断开连接token:" + ssion.getid());        system.out.println("用户断开连接admin:" + ssion.getid());        system.out.println("在线用户:" + getonlinecount());    }    public static synchronized int getonlinecount() {        return onlinecount;    }    /**     * @description: 在线用户 +1     * @return void     * @author mr.fang     * @date 2021/11/14 13:16     */    public static synchronized void addonlinecount() {        myhandler.onlinecount++;    }    /**     * @description: 在线用户 -1     * @return void     * @author mr.fang     * @date 2021/11/14 13:16     */    public static synchronized void subonlinecount() {        myhandler.onlinecount--;    }}

配置拦截器

package com.example.webchat.config;import org.springframework.http.rver.rverhttprequest;import org.springframework.http.rver.rverhttprespon;import org.springframework.http.rver.rvletrverhttprequest;import org.springframework.web.socket.websockethandler;import org.springframework.web.socket.rver.support.httpssionhandshakeinterceptor;import javax.rvlet.http.httprvletrequest;import java.util.map;import java.util.objects;/** * @aut一次有趣的游戏hor mr.fang * @title: websockethandlerinterceptor * @description: 拦截器 * @date 2021/11/14 13:12 */public class websockethandlerinterceptor extends httpssionhandshakeinterceptor {    /**     * @param request     * @param respon     * @param wshandler     * @param attributes     * @return boolean     * @description: 握手之前     * @author mr.fang     * @date 2021/11/14 13:18     */    @override    public boolean beforehandshake(rverhttprequest request, rverhttprespon respon, websockethandler wshandler, map<string, object> attributes) throws exception {        rvletrverhttprequest rvletrequest = (rvletrverhttprequest) request;        httprvletrequest re = rvletrequest.getrvletrequest();        object token = re.getparameter("token");        object admin = re.getparameter("admin");        if (objects.isnull(token)) {            return fal;        }        re.getssion().tattribute("admin", admin);        re.getssion().tattribute("token", token);        return super.beforehandshake(request, respon, wshandler, attributes);    }    /**     * @param request     * @param respon     * @param wshandler     * @param ex     * @return boolean     * @description: 握手之后     * @author mr.fang     * @date 2021/11/14 13:18     */    @override    public void afterhandshake(rverhttprequest request, rverhttprespon respon, websockethandler wshandler, exception ex) {        super.afterhandshake(request, respon, wshandler, ex);    }}

h5服务端

<!doctype html><html><head><meta chart="utf-8"><title>服务端</title><style type="text/css">#client {margin: 0px auto;width: 500px;}input {width: 80%;height: 40px;border-radius: 5px;border-color: #cccccc;outline: #01fa01;}#button {width: 84px;height: 46px;background-color: #5af3a5;color: #fff;font-size: 20px;border-radius: 5px;border: none;box-shadow: 1px 1px 1px 1px #ccc;cursor: poin中国在哪个洲ter;outline: #01fa01;}</style></head><body><div id="client"><h1 style="text-align: center;">服务端发送消息</h1><div id="content" contenteditable=truestyle="width: 500px;height: 500px;margin: 0px auto;border: 1px solid #000000;padding: 10px;border-radius: 10px;overflow: auto;"></div><div style="padding: 5px;0px"><input type="" value="" /> <button id="button" type="button">发送</button></div></div><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(() => {var pushdata = {code: 9002,msg: '',lfid: '',};var time = null;var path = 'ws://127.0.0.1:8009/myhandler/';if (typeof(websocket) === "undefined") {alert('不支持websocket')return;}let id = math.random(); // 随机数// 实例化socketvar websocket = new websocket(path + '?token=' + id+'&admin=1');// 监听连接websocket.onopen = function(event) {console.log(event);interval();};// 监听消息websocket.onmessage = function(event) {let data = json.par(event.data); pushdata.lfid = data.lfid;if (data.code == 9002) {$('#content').append(`<p style="text-align: right;"><span style="color:chocolate;">${data.msg}</span>：客户端</p>`)} el if (data.code == 9001) {$('#content').append(`<p style="color:#a09b9b;text-align:center;" >连接成功</p>`);}console.log(event)};// 监听错误websocket.onerror = function(event) {console.log(event)$('#content').append(`<p style="color:#a09b9b;text-align:center;" >连接错误</p>`);clearinterval();};// 发送消息$('#button').click(() => {let v = $('input').val();if (v) {pushdata.code = 9002;pushdata.msg = v;websocket.nd(json.stringify(pushdata));$('#content').append(`<p>服务端：<span style="color: blueviolet;">${v}</span></p>`)$('input').val('');}})function interval() {time = tinterval(() => {pushdata.code = 9003;pushdata.msg = '心跳';websocket.nd(json.stringify(pushdata));}, 5000);}function clearinterval() {clearinterval(time);}})</script></body></html>

客户端

<!doctype html><html><head><meta chart="utf-8"><title>客户端</title><style type="text/css">#client {margin: 0px auto;width: 500px;}input {width: 80%;height: 40px;border-radius: 5px;border-color: #cccccc;outline: #01fa01;}#button {width: 84px;height: 46px;background-color: #5af3a5;color: #fff;font-size: 20px;border-radius: 5px;border: none;box-shadow: 1px 1px 1px 1px #ccc;cursor: pointer;outline: #01fa01;}</style></head><body><div id="client"><h1 style="text-align: center;">客户端发送消息</h1><div id="content" contenteditable=truestyle="width: 500px;height: 500px;margin: 0px auto;border: 1px solid #000000;padding: 10px;border-radius: 10px;overflow: auto;"></div><div style="padding: 5px;0px"><input type="" value="" /> <button id="button" type="button">发送</button></div></div><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(() => {var pushdata = {code: 9002,msg: '',recid: '',};var time = null;var path = 'ws://127.0.0.1:8009/myhandler/';if (typeof(websocket) === "undefined") {alert('不支持websocket')return;}let id = math.random(); // 随机数// 实例化socketvar websocket = new websocket(path + '?token=' + id);// 监听连接websocket.onopen =作文题目高中 function(event) {console.log(event);interval();};// 监听消息websocket.onmessage = function(event) {let data = json.par(event.data);if (data.code == 9002) {$('#content').append(`<p style="text-align: right;"><span style="color:chocolate;">${data.msg}</span>：服务端</p>`)} el if (data.code == 9001) {$('#content').append(丁香花久久五月综合网`<p style="color:#a09b9b;text-align:center;" >连接成功</p>`);}console.log(event)};// 监听错误websocket.onerror = function(event) {console.log(event)$('#content').append(`<p style="color:#a09b9b;text-align:center;" >连接错误</p>`);clearinterval();};// 发送消息$('#button').click(() => {let v = $('input').val();if (v) {pushdata.code = 9002;pushdata.msg = v;websocket.nd(json.stringify(pushdata));$('#content').append(`<p>客户端：<span style="color: blueviolet;">${v}</span></p>`)$('input').val('');}})function interval() {time = tinterval(() => {pushdata.code = 9003;pushdata.msg = '心跳';websocket.nd(json.stringify(pushdata));}, 5000);}function clearinterval() {clearinterval(time);}})</script></body></html>