怎么在微信小程序中使用webSocket方法？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

銀海網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

webSocket簡介

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費(fèi)很多的帶寬等資源。HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時地進(jìn)行通訊。

微信小程序端API調(diào)用

微信小程序端需要做的配置有：

• 獲取局部網(wǎng)絡(luò)的地址

• SocketTask wx.connectSocket創(chuàng)建一個 WebSocket 連接。

• wx.onSocketOpen(function callback)監(jiān)聽 WebSocket 連接打開事件

• wx.sendSocketMessage(Object object) 連接發(fā)送數(shù)據(jù)。

• wx.onSocketMessage(function callback)監(jiān)聽 WebSocket 接受到服務(wù)器的消息事件

（1）獲取局部網(wǎng)絡(luò)的地址IP

獲取局部網(wǎng)絡(luò)的IP十分簡單，打開設(shè)置，進(jìn)入網(wǎng)絡(luò)，點(diǎn)擊WiFi屬性，在IPv4右側(cè)就能看見IP地址然后，在IP的前面加上ws://尾部加上3001得到可用的IP：
例如：

ws://199.213.7.102:3001

（2）建立客戶端和服務(wù)器的鏈接，并且發(fā)送消息，監(jiān)聽服務(wù)器回發(fā)消息

在wxml部分設(shè)置一個按鈕，用來獲取信息親切發(fā)送消息：

WXML:

<input type="tex" bindchange="sendMessage" class="text" placeholder="請輸入消息"></input>

JS部分建立客戶端和服務(wù)器的鏈接，并且發(fā)送消息，監(jiān)聽服務(wù)器回發(fā)消息：

//本地服務(wù)器地址
var wsApi = "ws://199.213.7.102:3001";
var socketOpen==false;
 sendMessage:function(e)
 {
  var msg=e.detail.value;
   if (socketOpen) {
    console.log(msg);
    //向服務(wù)器發(fā)送消息
    wx.sendSocketMessage({
     data: msg
    })
  }
 },
 onLoad: function (options) {
  //建立連接
   wx.connectSocket({
    url: wsApi,
    header: {
     'content-type': 'application/json'
    },
    //method:"GET",
    protocols: ['protocol1'],
    success: function () {
     console.log("客戶端連接成功！");
     wx.onSocketOpen(function(){
      console.log('webSocket已打開！');
      socketOpen=true;
      wx.onSocketMessage(function(msg){
        console.log(msg);
      })
     })
    }
   })
 },

服務(wù)器端使用nodejs配置

服務(wù)器這里用的是nodejs來配置，當(dāng)然你也可以用其他后端語言來處理。假設(shè)你已經(jīng)安裝好了nodejs，那么我們開始吧：

• 創(chuàng)建nodejs環(huán)境

• 引入ws模塊的構(gòu)造函數(shù)并且實(shí)例化

• 監(jiān)聽前端發(fā)送的消息

• 回發(fā)消息

（1）創(chuàng)建nodejs環(huán)境

• 首先新建一個文件夾websocket

• window+R，輸入cmd

• 輸入cd 空格后將websocket直接拖拽到黑框內(nèi)（或者cd 路徑）進(jìn)入websocket文件夾

• 接著輸入npm install ws建立環(huán)境

• 回車之后就能看到目錄下生成了文件，環(huán)境就生成完畢，接下來就要寫服務(wù)端的代碼了

（2）引入ws模塊的構(gòu)造函數(shù)并且實(shí)例化

在websocket下創(chuàng)建一個文件server.js，用來編寫nodejs代碼，首先我們要引入ws模塊的構(gòu)造函數(shù)并且實(shí)例化：

引入ws模塊的構(gòu)造函數(shù)并且實(shí)例化：

//引入ws模塊的構(gòu)造函數(shù)
var webSocketServer=require("ws").Server;
//實(shí)例化
var wss=new webSocketServer({
	port:3001
});

（3）監(jiān)聽前端發(fā)送的消息

繼續(xù)編寫server.js，監(jiān)聽前端發(fā)送的消息：

• wss.on(“connection”,function(ws)

• ws.on(“message”,function(msg)

//引入ws模塊的構(gòu)造函數(shù)
var webSocketServer=require("ws").Server;
//實(shí)例化
var wss=new webSocketServer({
	port:3001
});
//監(jiān)聽客戶端連接
wss.on("connection",function(ws){
	console.log("服務(wù)器連接建立成功");
	//監(jiān)聽客戶端消息
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("來自客戶端的消息："+msg);
	})
});

（4）回發(fā)消息

服務(wù)器接收消息之后，還要具備回發(fā)消息的能力，給客戶端反饋消息，至于返回什么消息，不是我們這里要討論的，我們直接簡單的將客戶發(fā)送的消息回發(fā)回去即可：

ws.send(“來自客戶端的消息：”+msg)

//引入ws模塊的構(gòu)造函數(shù)
var webSocketServer=require("ws").Server;
//實(shí)例化
var wss=new webSocketServer({
	port:3001
});
//監(jiān)聽客戶端連接
wss.on("connection",function(ws){
	console.log("服務(wù)器連接建立成功");
	//監(jiān)聽客戶端消息
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("來自客戶端的消息："+msg);
	})
});

演示websocket

最后我們簡單地演示一下：

• 在cmd中繼續(xù)輸入：node server.js，運(yùn)行server.js代碼

• 在微信開發(fā)者工具中編譯，運(yùn)行小程序

• 輸入消息，觀察反饋

（1）小程序和服務(wù)器建立連接

小程序和服務(wù)器建立連接后顯示：

服務(wù)器端顯示建立成功

（2）小程序向服務(wù)器發(fā)送給消息

在文本框中輸入內(nèi)容，發(fā)送消息，服務(wù)器接收到后：

小程序獲取到服務(wù)器回發(fā)的消息：

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：怎么在微信小程序中使用webSocket方法-創(chuàng)新互聯(lián)
文章位置：http://chinadenli.net/article36/decgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、小程序開發(fā)、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)