前后端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，会自动保持回话。