前後端WebSocket使用注意事項

前後端WebSocket使用注意事項

1.域名配置

微信小程序硬性要求

2.Https證書

微信小程序硬性要求

3.Nginx配置

Nginx配置，跟普通接口不太一樣。WebSocket需要一些特殊配置。

如果是集羣，記得配置會話保持或haspip

4.後端

後端我使用的是Netty-Socket-IO框架配合SpringBoot。
後端代碼可以看我的這篇文章

5.小程序端

官網文檔

測試代碼

wx.connectSocket({
// 小程序端，必須使用wss協議，也就是說服務器必須要配置https證書。
            url: 'wss://*****/socket.io/?userId=123&EIO=3&transport=websocket',
            success: function (res) {
                console.log('Socket連接成功:', res);

            },
            fail: function (res) {
                console.error('連接失敗:', res);
            },
        })

        wx.onSocketOpen(() => {
            console.log('監聽到 WebSocket 連接已打開！');
            wx.sendSocketMessage({
                data: "2probe"
            });
        })

        wx.onSocketError(data => {
            console.log(data);
        })

       wx.onSocketMessage(data => {
          let code = data.data.substr(0, 1);
          console.log(code)
          if (code === "0") {
            let d1 = {
              "sid": JSON.parse(data.data.substr(1, data.data.length)).sid
            };
            wx.sendSocketMessage({data: d1})
          }else if (code === "3"){
              setTimeout((function callback() {
                  wx.sendSocketMessage({
                      data: "2"
                  });
              }).bind(this), 5000)
          }else if (code === "2") {
            wx.sendSocketMessage({
              data: "3"
            });
          }
            console.log(data)
        })

7.H5客戶端

測試代碼

<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>

<script type="text/javascript">

    var socket = io.connect('https://*********.cn/socket.io?userId=1', {
        'reconnection delay' : 2000,
        'force new connection' : true
    });

    socket.on('message', function(data) {
        // here is your handler on messages from server
        console.log(data)
    });

    socket.on('chatevent', function(data) {
        // here is your handler on chatevent from server
        console.log(data)
    });

    socket.on('connect', function() {
        // connection established, now we can send an objects


        // send json-object to server
        // '@class' property should be defined and should
        // equals to full class name.
        // var obj = { '@class' : 'com.sample.SomeClass'
        // }
        // socket.json.send(obj);



        // send event-object to server
        // '@class' property is NOT necessary in this case
        var event = {

        }
        // socket.emit('someevent', event);

    });

</script>

socket.io.js，自動保持回話。

6.注意事項

小程序端的WebSocket需要自行維護鏈接。

小程序端想要自行維護回話，需要根據協議自行開發。

Socket協議
0:open
1:close
2:ping
3:pong
4:message
5:upgrade
6:noop

可以從上圖看出，H5端的js封裝了2、3的協議回話。

而H5可以用現成的工具。如:socket.io.js，會自動保持回話。