微信小程序开发实战（23）：WebSocket实战

逃离我推掉我的手 2022-11-30 15:46 372阅读 0赞

WebSocket是一种在单个TCP 连接上进行全双工通讯的协议。 在WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以建立持久性的连接，并进行双向数据传输。

HTML5支持WebSocket，使用方法和小程序的WebSocket基本是一样的。WebSocket API由若干个方法和若干个事件组成。这些方法和事件如下：

方法

*  wx.connectSocket：与服务端建立连接
 *  wx.sendSocketMessage：向服务端发送数据
 *  wx.closeSocket：关闭连接

事件

*  wx.onSocketOpen：成功与服务端建立连接后触发的事件
 *  wx.onSocketError：与服务端建立连接失败后触发的事件
 *  wx.onSocketMessage：服务端返回响应消息后触发的事件
 *  wx.onSocketClose：成功关闭WebSocket连接后触发的事件

其中wx.connectSocket和wx.sendSocketMessage方法都有一个Object类型的参数，参数属性含义如下所示。

wx.connectSocket方法参数描述

*  url：String类型，必选，开发者服务器接口地址，必须是 wss 协议，且域名必须是后台配置的合法域名
 *  data：Object类型，可选，请求的数据
 *  header：Object类型，可选，HTTPS Header , header 中不能设置 Referer
 *  method：       String类型，可选，默认是GET，有效值为： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 *  success：Function类型，可选，接口调用成功的回调函数
 *  fail：Function 类型，可选，接口调用失败的回调函数
 *  complete：Function类型，可选， 接口调用结束的回调函数（调用成功、失败都会执行）

wx. sendSocketMessage方法参数描述

*  data：String或ArrayBuffer类型，必选，需要发送的内容
 *  success：Function类型，可选，接口调用成功的回调函数
 *  fail：Function 类型，可选，接口调用失败的回调函数
 *  complete：Function类型，可选， 接口调用结束的回调函数（调用成功、失败都会执行）

下面的代码是从建立WebSocket连接，到向服务端发送数据，然后接收到响应数据，最后关闭WebSocket连接的完整演示。

var socketOpen = false
    var socketMsgQueue = []
    wx.connectSocket({
      url: 'wss://example.com/test.php',  //  该Url并不存在，只是为了演示假设了一个url
      data:{
        x: '',
        y: ''
      },
      header:{
        'content-type': 'application/json'
      },
      method:"GET"
    })
    //  成功建立WebSocket连接后，会调用该函数
    wx.onSocketOpen(function(res) {
      socketOpen = true
      for (var i = 0; i < socketMsgQueue.length; i++){
         sendSocketMessage(socketMsgQueue[i])
      }
      socketMsgQueue = []
    })
    //  向服务端发送数据，如果成功建立了连接，则直接发送，否则保存到消息队列（socketMsgQueue）中
    function sendSocketMessage(msg) {
      if (socketOpen) {
        wx.sendSocketMessage({
          data:msg
        })
      } else {
         socketMsgQueue.push(msg)
      }
    }
    //  接收服务端的响应消息，然后关闭WebSocket连接
    wx.onSocketMessage(function(res) {
      console.log('收到服务器内容：' + res.data)
      wx.closeSocket()
    })
    //  成功关闭WebSocket连接后，会调用该函数
    wx.onSocketClose(function(res) {
      console.log('WebSocket 已关闭！')
    })

如果读者没有用于测试WebSocket的Url，可以使用HTML5来测试WebSocket，效果是一样的。例如，下面是一段用来测试WebSocket的完整的代码，使用的是ws://echo.websocket.org，一个专门用来测试WebSocket的echo服务。在小程序中，必须使用wss，而在HTML5中并没这个要求，使用wss和ws都可以，而且域名也不需要备案。

<html>
        <head>
            <title>测试WebSocket</title>
            <script>
                function init() {
                websocket = new WebSocket("ws://echo.websocket.org/");
               
                websocket.onopen = function() { document.getElementById("output").innerHTML += "<p>> CONNECTED</p>"; };
               
    websocket.onmessage = function(evt)
    { document.getElementById("output").innerHTML += "<p style='color: blue;'>> RESPONSE: " + evt.data + "</p>"; };
               
    websocket.onerror = function(evt)
    { document.getElementById("output").innerHTML += "<p style='color: red;'>> ERROR: " + evt.data + "</p>"; };
                }
               
                function sendMessage(message) {
                document.getElementById("output").innerHTML += "<p>> SENT: " + message + "</p>";
               
                websocket.send(message);
                }
               
                window.addEventListener("load", init, false);
    </script>
        </head>
        <body>
            <input onkeypress="if(this.value) {if (window.event.keyCode == 13) { sendMessage(this.value); this.value = null; }}"/>
            <div id="output"></div>
        </body>
    </html>

我们可以看到，HTML5的WebSocket和小程序的WebSocket的API在使用上基本是一样的。例如，小程序使用wx.connectSocket方法连接服务端，而HTML5直接创建了WebSocket对象。小程序使用wx.sendSocketMessage方法向服务端发送数据，而HTML5使用websocket.send方法向服务端发送数据。

在浏览器中运行这段代码后，会自动连接服务端，然后在页面左上角输入Hello，按回车键，在页面会显示发送和返回的响应信息。如图1所示。

![format_png][]

图1  HTML5 WebSocket测试

[format_png]: /images/20221123/3b274e343279421587ab1d8dc835a0fb.png