一斤代碼深入理解系列《四》：微信小程序和服務(wù)器通信-WebSocket ... ...
接上一篇文章的話題，我們這次來(lái)講一下如何建立一個(gè)基于node.js的WebSocket服務(wù)器，并在小程序中使用這個(gè)提供實(shí)時(shí)服務(wù)的服務(wù)器。 node.js中已經(jīng)有很多現(xiàn)成的第三方庫(kù)，用于構(gòu)建WebSocket服務(wù)。我們今天選用一個(gè)叫做w ...
接上一篇文章的話題，我們這次來(lái)講一下如何建立一個(gè)基于node.js的WebSocket服務(wù)器，并在小程序中使用這個(gè)提供實(shí)時(shí)服務(wù)的服務(wù)器。
node.js中已經(jīng)有很多現(xiàn)成的第三方庫(kù)，用于構(gòu)建WebSocket服務(wù)。我們今天選用一個(gè)叫做websocket的庫(kù)，來(lái)構(gòu)建一個(gè)可以提供標(biāo)準(zhǔn)WebSocket接口的node.js服務(wù)端程序。
先建一個(gè)空文件夾，名叫ws-server，然后進(jìn)入該文件夾，在命令行執(zhí)行:
npm install websocket
然后在ws-server文件夾下，再新建一個(gè)名為app.js的文件，內(nèi)容如下：
因?yàn)閃ebSocket服務(wù)是建立在HTTP之上的，所以我們看到，代碼中建立了一個(gè)http server, 然后建立了一個(gè)使用了該http server的WebSocket server，并讓http server監(jiān)聽(tīng)8080端口對(duì)外提供服務(wù)。
這個(gè)服務(wù)端的功能也很簡(jiǎn)單，就是收到客戶端發(fā)送的消息并打印出來(lái)，然后再接收到的消息前面加上一個(gè)[from server]的前綴后，返回給客戶端。
好，我們來(lái)實(shí)現(xiàn)調(diào)用該服務(wù)的微信小程序代碼：
首先我們需要用wx.connectSocket()方法去連接目標(biāo)服務(wù)器，因?yàn)槲覀冮_(kāi)發(fā)環(huán)境用的是非安全的http，所以這邊的url參數(shù)是ws://打頭的，在以后微信的實(shí)際運(yùn)行環(huán)境中，你的服務(wù)端必須使用SSL，所以連接url就會(huì)是wss://的了。
然后需要調(diào)用wx.onSocketOpen()方法來(lái)設(shè)置WebSocket連接打開(kāi)時(shí)的回調(diào)函數(shù)。當(dāng)連接打開(kāi)后，就可以開(kāi)始向服務(wù)端發(fā)送數(shù)據(jù)了，我們?cè)谶@里使用wx.sendSocketMessage()方法，向服務(wù)端發(fā)送了一個(gè)后面跟隨一個(gè)隨機(jī)數(shù)的Hello,World字符串。我們運(yùn)行一下程序，可以看到，服務(wù)端的控制臺(tái)上會(huì)打印出這樣的結(jié)果：
說(shuō)明服務(wù)端已經(jīng)成功接收到了客戶端發(fā)送的字符串消息。
之后服務(wù)端會(huì)向客戶端再反饋這個(gè)消息，那客戶端這邊如何接收這個(gè)從服務(wù)端過(guò)來(lái)的消息呢？我們可以在小程序中，使用wx.onSocketMessage()方法，監(jiān)聽(tīng)服務(wù)端發(fā)送到客戶端的消息，正如我們上面的示例代碼寫(xiě)的那樣：
wx.onSocketMessage(function (msg) {
console.log(msg)
})
這里在，我們?cè)谛〕绦虻腃onsole上，簡(jiǎn)單的打印了從服務(wù)端過(guò)來(lái)的消息，如下所示：
這樣，一個(gè)簡(jiǎn)單但完整的客戶端和服務(wù)器端的WebSocket交互就完成了。如果你想關(guān)閉這個(gè)WebSocket連接，那么你可以調(diào)用wx.closeSocket()來(lái)進(jìn)行關(guān)閉。
好了，關(guān)于微信小程序和WebSocket服務(wù)器通信的例子，就講到這里吧。不對(duì)之處，歡迎指正。
