-
wx.connectSocket:与服务端建立连接
-
wx.sendSocketMessage:向服务端发送数据
-
wx.closeSocket:关闭连接
-
wx.onSocketOpen:成功与服务端建立连接后触发的事件
-
wx.onSocketError:与服务端建立连接失败后触发的事件
-
wx.onSocketMessage:服务端返回响应消息后触发的事件
-
wx.onSocketClose:成功关闭WebSocket连接后触发的事件
-
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类型,可选, 接口调用结束的回调函数(调用成功、失败都会执行)
-
data:String或ArrayBuffer类型,必选,需要发送的内容
-
success:Function类型,可选,接口调用成功的回调函数
-
fail:Function 类型,可选,接口调用失败的回调函数
-
complete:Function类型,可选, 接口调用结束的回调函数(调用成功、失败都会执行)
下面的代码是从建立WebSocket连接,到向服务端发送数据,然后接收到响应数据,最后关闭WebSocket连接的完整演示。
var socketOpen = falsevar 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测试