webSocket 多人通信原理

多人通信原理

1. 每个小程序端向后端发送建立webSocket连接的请求，后端可以储存每一个连接。
2. 当任意一个小程序端向后端发送webSocket信息，后端可以将此收到的信息转发给存储了连接对象的所有的每一个小程序端。
3. 所有的每一个小程序端都能收到后端发来的webSocket信息，即使并没有主动请求信息。

webSocket 多人通信的核心逻辑

传统的web服务都是客户端主动连接，服务器被动等待。而webSocket可以实现真正的双向通信，可以实现这种功能：有多个用户连接后端服务，每个用户向后端发送的信息都会实时发送给其它用户。

微信小程序中的webSocket 方法和事件：

1. connectSocket({url}) 连接后端webSocket 服务
2. onSocketOpen() 与后端webSocket 服务连接成功事件
3. sendSocketMessage() 向后端webSocket 发送信息
4. onSocketMessage() 接收到后端webSocket 信息事件

connectSocket(Object object)

创建一个 WebSocket 连接，主动发起连接。

• 参数
  • Object object

示例代码

wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{ // 可选
    'content-type': 'application/json'
  },
  protocols: ['protocol1'] // 可选
})

onSocketOpen(function callback)

监听 WebSocket 连接打开事件。当连接创建成功，执行回调函数

• 参数
  • function callback
    WebSocket 连接打开事件的回调函数，可以用箭头函数
    • 回调函数参数：Object res

wx.sendSocketMessage(Object object)

通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后（连接创建）才能发送。

• 参数
  • Object object

示例代码

let socketOpen = false
let socketMsgQueue = []
wx.connectSocket({
  url: 'test.php'
})

wx.onSocketOpen(function(res) {
  socketOpen = true
  for (let i = 0; i < socketMsgQueue.length; i++){
    sendSocketMessage(socketMsgQueue[i])
  }
  socketMsgQueue = []
})

function sendSocketMessage(msg) {
  if (socketOpen) {
    wx.sendSocketMessage({
      data:msg
    })
  } else {
    socketMsgQueue.push(msg)
  }
}

wx.onSocketMessage(function callback)

监听 WebSocket 接受到服务器的消息事件

• 参数

  • function callback
    WebSocket 接受到服务器的消息事件的回调函数

    • 回调函数参数：Object res

示例代码

wx.onSocketMessage(({data})=>{
  const {list} = this.data
  this.setData({
    list:[...list,data]
  })
})

node后端的webSocket

webSocket准备

let WebSocket = require("ws");

/*实例化WebSocket 服务器*/
let wss = new WebSocket.Server({
    port:8181
})

webSocket连接、收发信息、关闭

/*connection：当小程序端的webSocket 连接到WebSocket 服务器时，就新建一个webSocket 对象与其对接*/
wss.on("connection",ws=>{
    let openid=null;
    console.log('connection');
    /*message：当小程序端的webSocket向服务端的webSocket发来信息时
    * */
    ws.on("message",res=>{
        const {method,data}=JSON.parse(res);
        switch (method) {
            // 根据不同的信息执行不同操作。。。
        }
    })
    /*close 当小程序端的webSocket与服务端的webSocket断开连接时
    * */
    ws.on("close",()=>{
        playerMap.delete(openid);
        room.delete(openid);
    })
})