快捷導(dǎo)航

微信小程序webSocket的使用方法

更新時間：2020年02月20日 14:45:14 作者：飛翔的哈士奇

這篇文章主要介紹了微信小程序webSocket的使用方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

博客簡介

本篇博客介紹微信小程序中webSocket的使用方法，以及如何用局部網(wǎng)絡(luò)建立webSocket連接，進行客戶端與服務(wù)器之間的對話：

webSocket簡介
微信小程序端API調(diào)用
服務(wù)器端使用nodejs配置
演示websocket

webSocket簡介

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

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

微信小程序端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è)置，進入網(wǎng)絡(luò)，點擊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來配置，當然你也可以用其他后端語言來處理。假設(shè)你已經(jīng)安裝好了nodejs，那么我們開始吧：

創(chuàng)建nodejs環(huán)境
引入ws模塊的構(gòu)造函數(shù)并且實例化
監(jiān)聽前端發(fā)送的消息
回發(fā)消息

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

首先新建一個文件夾websocket
window+R，輸入cmd
輸入cd 空格后將websocket直接拖拽到黑框內(nèi)（或者cd 路徑）進入websocket文件夾
接著輸入npm install ws建立環(huán)境
回車之后就能看到目錄下生成了文件，環(huán)境就生成完畢，接下來就要寫服務(wù)端的代碼了

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

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

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

//引入ws模塊的構(gòu)造函數(shù)
var webSocketServer=require("ws").Server;
//實例化
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;
//實例化
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;
//實例化
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

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