博客簡介

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

webSocket簡介

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

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

微信小程序端API調用

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

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

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

ws://199.213.7.102:3001

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

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

WXML:

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

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);      })     })    }   }) },