SpringBoot+简单整合websocket-聊天室

聊天室项目

导入maven依赖

		<!--websocket-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
       

java代码

• 核心代码

利用pageCode，简单的模拟用户token

//value 映射地址，encoders 编码器，对传递的参数进行处理
@ServerEndpoint(value = "/websocket/{pageCode}",encoders = { ResultEncoder.class})
@Component
public class WebSocket {
 
    private static final String loggerName=WebSocket.class.getName();
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    public static Map<String, Session> electricSocketMap = new ConcurrentHashMap<String,Session>();
 
    /**
     * 连接建立成功调用的方法
     *
     * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(@PathParam("pageCode") String pageCode, Session session) {

            electricSocketMap.put(pageCode,session);

        sendMsg(session,new MessageResult(MessageResult.SUCCESS,electricSocketMap.size()+"",""));
    }
 
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(@PathParam("pageCode") String pageCode,Session session) {
        if (electricSocketMap.containsKey(pageCode)){
            electricSocketMap.remove(pageCode);
        }
    }
 
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("websocket received message:"+message);
        String[] split = message.split("--");
        if(split[1].contains("0")){
        //发送消息给所有人
            sendAll(new MessageResult(MessageResult.SUCCESS,electricSocketMap.size()+"",message));
        }else {
		//发送消息给指定用户
            sendMsg(electricSocketMap.get(split[1]), new MessageResult(MessageResult.SUCCESS, electricSocketMap.size() + "", message));
        }
    }
 
    /**
     * 发生错误时调用
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
         error.printStackTrace();
    }

    /**
     *
     * @param session
     * @param message 消息结果集
     */
    public static void sendMsg(Session session, Object message) {
        try {
            session.getBasicRemote().sendObject(message);
        } catch (Exception e) {
            e.printStackTrace();

        }
    }
    /**
     * 群发消息
     * @param message 消息内容
     */
    private void sendAll(Object message) {

        for (Map.Entry<String, Session> sessionEntry : electricSocketMap.entrySet()) {
            sessionEntry.getValue().getAsyncRemote().sendObject(message);
        }
    }


}

• 配置类

@Component
public class WebsocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();


    }
}

• 工具类

结果集

public class MessageResult {
    public static final int FAILURE = 0;//失败
    public static final int SUCCESS = 1;//成功
    public static final int REQUIRED = 2;//必要参数为空


    private int key;
    private String message;
    private Object data;

    public MessageResult(int key, String message, Object data) {
        this.key = key;
        this.message = message;
        this.data = data;
    }

    public MessageResult(int key, String message) {
        this.key = key;
        this.message = message;
    }

    public MessageResult() {
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getKey() {
        return key;
    }

    public void setKey(int key) {
        this.key = key;
    }
}

编码器

public class ResultEncoder implements Encoder.Text<MessageResult> {

    @Override
    public void destroy() {
        // TODO Auto-generated method stub
    }

    @Override
    public void init(EndpointConfig arg0) {
        // TODO Auto-generated method stub
    }

    @Override
    public String encode(MessageResult message) throws EncodeException {
        JSONObject jsonObject = JSONObject.fromObject(message);
        return jsonObject.toString();
    }

}

前端代码

<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>springboot项目WebSocket测试demo</title>
</head>
<body>
<h3>springboot项目websocket测试demo</h3>
<h4>测试说明</h4>
<h5>文本框中数据数据，点击‘发送测试’，文本框中的数据会发送到后台websocket，后台接受到之后，会再推送数据到前端，展示在下方；点击关闭连接，可以关闭该websocket；可以跟踪代码，了解具体的流程；代码上有详细注解</h5>
<br />
<h5>在线人数：<span id="number"></span></h5>
<br />

<input id="text" type="text" />
<button onclick="send()">发送消息</button>--[*] 给某个用户发送消息 --0给所有人发送消息

<hr />
<button onclick="clos()">关闭连接</button>
<hr />
<div id="message"></div>
<script>
    var url=window.location.href;
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://127.0.0.1:8080/websocket/"+getUrlParams('id'));
    }else{
        alert("您的浏览器不支持websocket");
    }
    websocket.onerror = function(){
        setMessageInHtml("send error！");
    }
    websocket.onopen = function(){
        setMessageInHtml("connection success！welcome")
    }
    websocket.onmessage  = function(event){
        console.log(event)
        var parse = JSON.parse(event.data);
        if(parse.data!=""){
            setMessageInHtml(parse.data.split("--")[0]);
            setMessageInHtmlCount(parse.message);
        }else{
            setMessageInHtmlCount(parse.message);

        }

    }
    websocket.onclose = function(){
        setMessageInHtml("closed websocket!")
    }
    window.onbeforeunload = function(){
        clos();
    }
    function setMessageInHtml(message){
        document.getElementById('message').innerHTML += "</br>"+message;
    }
    function setMessageInHtmlCount(message){
        document.getElementById('number').innerHTML = message;
    }
    function clos(){
        websocket.close(3000,"强制关闭");
    }
    function send(){
        var msg = document.getElementById('text').value;
        websocket.send(msg);
    }

    function getUrlParams(name) { // 不传name返回所有值，否则返回对应值
        var url = window.location.search;
        if (url.indexOf('?') == 1) { return false; }
        url = url.substr(1);
        url = url.split('&');
        var name = name || '';
        var nameres;
        // 获取全部参数及其值
        for(var i=0;i<url.length;i++) {
            var info = url[i].split('=');
            var obj = {};
            obj[info[0]] = decodeURI(info[1]);
            url[i] = obj;
        }
        // 如果传入一个参数名称，就匹配其值
        if (name) {
            for(var i=0;i<url.length;i++) {
                for (const key in url[i]) {
                    if (key == name) {
                        nameres = url[i][key];
                    }
                }
            }
        } else {
            nameres = url;
        }
        // 返回结果
        return nameres;
    }
</script>
</body>
</html>

界面展示

用户1：

用户2：

---

---

优化：socket心跳连接

前端定时发送一个socket消息给后端，前端如果接受不到消息后，重建连接。

封装方法

//创建websocket连接
    function createWebSocket() {
        try {
            websocket = new WebSocket(wsUrl);
            init();
        } catch(e) {
            reconnect(wsUrl);
        }
    }
    //websocket的方法
    function init() {
        websocket.onclose = function () {
            reconnect(wsUrl);
        };
        websocket.onerror = function() {
            reconnect(wsUrl);
        };
        websocket.onopen = function () {
            //心跳检测重置
            heartCheck.start();
        };
        websocket.onmessage = function (event) {
           //拿到任何消息都说明当前连接是正常的
            var parse = JSON.parse(event.data);
            if(parse.data!=""&&parse.data!=null){
                setMessageInHtml(parse.data);
                setMessageInHtmlCount(parse.message);
            }else if(parse.message.indexOf("heartbeat")!=-1){
                console.log(parse.message)
            }else{
                setMessageInHtmlCount(parse.message);
            }
            //重新设置心跳连接
            heartCheck.reset();
        }
    }

重连方法

//重连
    function reconnect(url) {
        if(lockReconnect) {
            return;
        };
        lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        tt && clearTimeout(tt);
        tt = setTimeout(function () {
            //重连
            createWebSocket(url);
            lockReconnect = false;
        }, 4000);
    }

心跳检测

//心跳检测
    var heartCheck = {
        timeout: 3000,
        timeoutObj: null,
        serverTimeoutObj: null,
        start: function(){
            console.log('start');
            var self = this;
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                console.log('55555');
                websocket.send("heartbeat reconnect~~~"+getUrlParams('id'));
            }, this.timeout)
        },
        reset: function(){
            clearTimeout(this.timeoutObj);
            this.start();
        },
    }

最后创建连接，还有一些工具方法

createWebSocket(wsUrl);
    /*
    * 工具方法
    * */
    function setMessageInHtml(message){
        document.getElementById('message').innerHTML += "</br>"+message;
    }
    function setMessageInHtmlCount(message){
        document.getElementById('number').innerHTML = message;
    }
    function clos(){
        websocket.close(3000,"强制关闭");
    }
    function send(){
        var msg = document.getElementById('text').value;
        websocket.send(msg);
    }

    function getUrlParams(name) { // 不传name返回所有值，否则返回对应值
        var url = window.location.search;
        if (url.indexOf('?') == 1) { return false; }
        url = url.substr(1);
        url = url.split('&');
        var name = name || '';
        var nameres;
        // 获取全部参数及其值
        for(var i=0;i<url.length;i++) {
            var info = url[i].split('=');
            var obj = {};
            obj[info[0]] = decodeURI(info[1]);
            url[i] = obj;
        }
        // 如果传入一个参数名称，就匹配其值
        if (name) {
            for(var i=0;i<url.length;i++) {
                for (const key in url[i]) {
                    if (key == name) {
                        nameres = url[i][key];
                    }
                }
            }
        } else {
            nameres = url;
        }
        // 返回结果
        return nameres;
    }

end

websocket集群方案