小程序模板網(wǎng)

一斤代碼深入理解系列《四》:微信小程序和服務(wù)器通信-WebSocket ... ...

發(fā)布時間:2018-03-24 15:25 所屬欄目:小程序開發(fā)教程

接上一篇文章的話題,我們這次來講一下如何建立一個基于node.js的WebSocket服務(wù)器,并在小程序中使用這個提供實時服務(wù)的服務(wù)器。 node.js中已經(jīng)有很多現(xiàn)成的第三方庫,用于構(gòu)建WebSocket服務(wù)。我們今天選用一個叫做w ...

 
 
 

接上一篇文章的話題,我們這次來講一下如何建立一個基于node.js的WebSocket服務(wù)器,并在小程序中使用這個提供實時服務(wù)的服務(wù)器。

node.js中已經(jīng)有很多現(xiàn)成的第三方庫,用于構(gòu)建WebSocket服務(wù)。我們今天選用一個叫做websocket的庫,來構(gòu)建一個可以提供標(biāo)準(zhǔn)WebSocket接口的node.js服務(wù)端程序。

先建一個空文件夾,名叫ws-server,然后進入該文件夾,在命令行執(zhí)行:

npm install websocket

然后在ws-server文件夾下,再新建一個名為app.js的文件,內(nèi)容如下:

因為WebSocket服務(wù)是建立在HTTP之上的,所以我們看到,代碼中建立了一個http server, 然后建立了一個使用了該http server的WebSocket server,并讓http server監(jiān)聽8080端口對外提供服務(wù)。

這個服務(wù)端的功能也很簡單,就是收到客戶端發(fā)送的消息并打印出來,然后再接收到的消息前面加上一個[from server]的前綴后,返回給客戶端。

好,我們來實現(xiàn)調(diào)用該服務(wù)的微信小程序代碼:

首先我們需要用wx.connectSocket()方法去連接目標(biāo)服務(wù)器,因為我們開發(fā)環(huán)境用的是非安全的http,所以這邊的url參數(shù)是ws://打頭的,在以后微信的實際運行環(huán)境中,你的服務(wù)端必須使用SSL,所以連接url就會是wss://的了。

然后需要調(diào)用wx.onSocketOpen()方法來設(shè)置WebSocket連接打開時的回調(diào)函數(shù)。當(dāng)連接打開后,就可以開始向服務(wù)端發(fā)送數(shù)據(jù)了,我們在這里使用wx.sendSocketMessage()方法,向服務(wù)端發(fā)送了一個后面跟隨一個隨機數(shù)的Hello,World字符串。我們運行一下程序,可以看到,服務(wù)端的控制臺上會打印出這樣的結(jié)果:

說明服務(wù)端已經(jīng)成功接收到了客戶端發(fā)送的字符串消息。

之后服務(wù)端會向客戶端再反饋這個消息,那客戶端這邊如何接收這個從服務(wù)端過來的消息呢?我們可以在小程序中,使用wx.onSocketMessage()方法,監(jiān)聽服務(wù)端發(fā)送到客戶端的消息,正如我們上面的示例代碼寫的那樣:


		
wx.onSocketMessage(function (msg) {
      console.log(msg)
})

這里在,我們在小程序的Console上,簡單的打印了從服務(wù)端過來的消息,如下所示:

這樣,一個簡單但完整的客戶端和服務(wù)器端的WebSocket交互就完成了。如果你想關(guān)閉這個WebSocket連接,那么你可以調(diào)用wx.closeSocket()來進行關(guān)閉。

好了,關(guān)于微信小程序和WebSocket服務(wù)器通信的例子,就講到這里吧。不對之處,歡迎指正。



本文地址:http://22321a.com/wxmini/doc/course/22855.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢