怎么在微信小程序中使用webSocket方法

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

創新互聯專業為企業提供鐵嶺網站建設、鐵嶺做網站、鐵嶺網站設計、鐵嶺網站制作等企業網站建設、網頁設計與制作、鐵嶺企業網站模板建站服務，十載鐵嶺做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

webSocket簡介

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

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

怎么在微信小程序中使用webSocket方法

微信小程序端API調用

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

獲取局部網絡的地址
SocketTask wx.connectSocket創建一個 WebSocket 連接。
wx.onSocketOpen(function callback)監聽 WebSocket 連接打開事件
wx.sendSocketMessage(Object object) 連接發送數據。
wx.onSocketMessage(function callback)監聽 WebSocket 接受到服務器的消息事件

（1）獲取局部網絡的地址IP

獲取局部網絡的IP十分簡單，打開設置，進入網絡，點擊WiFi屬性，在IPv4右側就能看見IP地址然后，在IP的前面加上ws://尾部加上3001得到可用的IP：
例如：

ws://199.213.7.102:3001

怎么在微信小程序中使用webSocket方法

（2）建立客戶端和服務器的鏈接，并且發送消息，監聽服務器回發消息

在wxml部分設置一個按鈕，用來獲取信息親切發送消息：

WXML:

JS部分建立客戶端和服務器的鏈接，并且發送消息，監聽服務器回發消息：

//本地服務器地址
var wsApi = "ws://199.213.7.102:3001";
var socketOpen==false;
 sendMessage:function(e)
 {
  var msg=e.detail.value;
   if (socketOpen) {
    console.log(msg);
    //向服務器發送消息
    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);
      })
     })
    }
   })
 },

服務器端使用nodejs配置

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

創建nodejs環境
引入ws模塊的構造函數并且實例化
監聽前端發送的消息
回發消息

（1）創建nodejs環境

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

怎么在微信小程序中使用webSocket方法

（2）引入ws模塊的構造函數并且實例化

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

怎么在微信小程序中使用webSocket方法

引入ws模塊的構造函數并且實例化：

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

（3）監聽前端發送的消息

繼續編寫server.js，監聽前端發送的消息：

wss.on(“connection”,function(ws)
ws.on(“message”,function(msg)

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

（4）回發消息

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

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

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

演示websocket

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