微信小程序开发实战(23):WebSocket实战

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所示。

图1  HTML5 WebSocket测试

 

蒙娜丽宁 CSDN认证博客专家 公众号:极客起源 达芬奇 UM
更多精彩内容请关注微信公众号:「极客起源」,东北大学计算机专业硕士。UnityMarvel创始人,企业内训讲师、IT畅销书作者,CSDN学院讲师,拥有多年软件开发经验和培训经验。主要著作包括《Python从菜鸟到高手》、《Python爬虫技术:深入理解原理、技术与开发》,培训企业学员数千人。制作在线课程数千小时。更多视频课程,请访问我的B站:https://space.bilibili.com/477001733
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值