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

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器 wss 接口地址
header	Object		否	HTTP Header，Header 中不能设置 Referer
protocols	Array.<string>		否	子协议数组	1.4.0

示例代码

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

onSocketOpen(function callback)

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

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

属性	类型	说明	最低版本
header	object	连接成功的 HTTP 响应 Header	2.0.0

wx.sendSocketMessage(Object object)

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

• 参数
  • Object object

属性	类型	默认值	必填	说明
data	string/ArrayBuffer		是	需要发送的内容
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

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

属性	类型	说明
data	string/ArrayBuffer	服务器返回的消息

示例代码

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);
    })
})