springboot整合websocket(Servlet方式)

websocket是客户端和服务端的通信,所以它肯定有客户端和服务端

这里客户端直接用原生的html5来编写

首先当然是先引入对应的依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

然后注入相应的bean

package com.chan.wechatshop.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Component
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }

}

js中websocket建立连接后websocket对象的几种状态

可以用websocket.readyState查看

0 ：对应常量CONNECTING (numeric value 0)，
正在建立连接连接，还没有完成。The connection has not yet been established.

1 ：对应常量OPEN (numeric value 1)，
连接成功建立，可以进行通信。The WebSocket connection is established and communication is
possible.

2 ：对应常量CLOSING (numeric value 2)
连接正在进行关闭握手，即将关闭。The connection is going through the closing handshake.

3 : 对应常量CLOSED (numeric value 3)
连接已经关闭或者根本没有建立。The connection has been closed or could not be opened.

weosocket接收客户端消息,发送消息给客户端实现类

这里要注意，每次建立websocket连接的时候都会新建一个下面路由中的WebSocket class对象，所以在里面注入spring的bean的时候是没有经过spring的依赖注入也就没有bean实例的，所以需要调用spring的bean的话需要将属性声明成static然后再注入，或者新增一个工具类，用static注入.

可以注意到下面demo中的webSockets属性就是static的，就是这个原因

package com.chan.wechatshop.service;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket")
@Slf4j
public class WebSocket {

    private Session session;

    //普通的Set存不进
    private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();

    /**
     * 对应前端的相应事件
     * @param session
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSockets.add(this);
        log.info("[websocket消息] 有新的连接,总数:{}",webSockets.size());
    }

    /**
     * 关闭的时候移除
     */
    @OnClose
    public void onClose(){
        webSockets.remove(this);
        log.info("[websocket消息] 连接断开,总数:{}",webSockets.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("[websocket消息] 收到客户端发来的消息:{}",message);

    }

    public void sendMessage(String message){
        for(WebSocket webSocket :webSockets){
            log.info("[websocket消息] 广播消息,message={}",message);
            try {
                            webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
                log.error("[websocket消息] 广播消息,出现异常,{}",e.getMessage());
            }

        }
    }


}

要使用的地方注入进去就可以了,然后调用sendMessage广播消息

前端也就是客户端

js中websocket的4种状态

websocket.readyState

连接服务端地址

前端页面打开的时候自动执行这一段js代码,这时可以在服务端看到已经连上了websocket

客户端也打印输出了一下控制台,也可以看到websocket连接服务端成功

在成功连上服务端后,前端页面刷新可以看到在服务端又重新连接了一次,是因为,前端页面刷新的时候触发了onbeforeunload，理论上来说，页面刷新前进入到了这个onbeforeunload事件后由前端发起关闭，但是实际中我操作的时候不知道为啥，后端没等前端执行webSocket.close();就提前关闭了

整体demo

<script type="text/javascript">
        layui.use(['layer'],function () {
                var webSocket = null;
                var layer = layui.layer
                $ = layui.jquery;

                if('WebSocket' in window){
                        webSocket = new WebSocket('ws://felixchan.natapp1.cc/websocket');
                }else {
                        // alert("该浏览器不支持websocket!");
                        layer.msg("该浏览器不支持websocket!",{icon : 5});
                }

                webSocket.onopen = function (event) {
                        console.log('建立连接');
                        webSocket.send("is test connecttions~");
                };

                webSocket.onclose = function (event) {
                        console.log('连接关闭');
                };

                webSocket.onmessage = function (event) {
                        console.log('收到消息:' + event.data);

                        //收到消息之后,可以弹框,播放音乐等
                        //示范一个公告层
                        var audio = document.getElementById('getNewOrderNotice');
                        audio.play();

                        layer.open({
                                type: 1
                                ,title: false //不显示标题栏
                                ,closeBtn: false
                                ,area: '300px;'
                                ,shade: 0.8
                                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                ,btn: ['确定','查看新的订单']
                                ,btnAlign: 'c'
                                ,moveType: 1 //拖拽模式，0或者1
                                ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align: center;"><h1>提醒</h1>你有新的订单啦</div>'
                                ,success: function(layero){
                                        var btn = layero.find('.layui-layer-btn');
                                        // 点击查看新订单这里就刷新一下页面
                                        btn.find('.layui-layer-btn1')[0].onclick = function () {
                                                location.reload();//当前页面刷新一下
                                        };
                                }
                        });
                };

                webSocket.onerror = function () {
                        layer.msg("websocket通信发生错误!",{icon : 5});
                };

                // 在窗口关闭的时候把websocket也关闭掉
                window.onbeforeunload = function () {
                        webSocket.close();
                };

        })

</script>

有时候可能后端断了,这个时候前端会同时进入websocket.close()事件中,但是接下来后端重启了,前端不去重连是不行的,所以这里要设置一个定时器,去重连websocket

ps:这里注意重连的时候也是要监听open,close,onmessage这些事件的,即使重新连接上了,后端发消息过来前端也收不到,所以这里可以把监听事件封装成一个方法,把new出来的websocket对象传进去

这里举了个coffee的例子,js也是一样的做法

websocketWithConnected: function(websocket) {
        var it, me;
        it = this.wso;
        me = this;
        websocket.onopen = function() {
          console.log('建立连接');
          return it.rfidPackingCheckwebsocket.send("{pageId:" + it.app.workspaceManager.wsoContainer.selectedChildWidget.wso.navigatorItem.id + "}");
        };
        websocket.onclose = function() {
          return console.log('连接关闭');
        };
        websocket.onmessage = function(event) {
          var data, originalEpcCode, resultEpcCode;
          console.log('收到消息:' + event.data);
          if ('RFIDPacking' === it.app.workspaceManager.wsoContainer.selectedChildWidget.wso.navigatorItem.id) {
            if (it.queryCode && it.queryCode.getValue() !== '') {
              data = JSON.parse(event.data);
              resultEpcCode = data.resultEpcCode;
              originalEpcCode = data.originalEpcCode;
              it.resultEpcCode.innerHTML = resultEpcCode;
              it.originalEpcCode.innerHTML = originalEpcCode;
              it.codeInput.set('value', resultEpcCode);
              if (!me.checkItem(resultEpcCode)) {
                return it.codeInput.set('value', '');
              } else {
                return me.pack(it, me, resultEpcCode);
              }
            } else {
              return layer.alert("请先输入查询code");
            }
          }
        };
        return websocket.onerror = function() {
          return layer.msg("websocket通信发生错误!", {
            icon: 5
          });
        };
      }