微信小程序開發實戰（23）：WebSocket實戰

WebSocket是一種在單個TCP 鏈接上進行全雙工通信的協議。在WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠創建持久性的鏈接，並進行雙向數據傳輸。

HTML5支持WebSocket，使用方法和小程序的WebSocket基本是同樣的。WebSocket API由若干個方法和若干個事件組成。這些方法和事件以下：

方法

wx.connectSocket：與服務端創建鏈接javascript
wx.sendSocketMessage：向服務端發送數據php
wx.closeSocket：關閉鏈接html

事件

wx.onSocketOpen：成功與服務端創建鏈接後觸發的事件java
wx.onSocketError：與服務端創建鏈接失敗後觸發的事件web
wx.onSocketMessage：服務端返回響應消息後觸發的事件json
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 = 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測試

對本文感興趣，能夠加李寧老師微信公衆號（unitymarvel）：

關注「極客起源」公衆號，得到更多免費技術視頻和文章。

本文分享自微信公衆號 - 極客起源（geekculture）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。