怎么在微信小程序中使用webSocket方法？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
webSocket簡介
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。WebSocket 使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務器資源和帶寬，并且能夠更實時地進行通訊。
微信小程序端API調(diào)用
微信小程序端需要做的配置有：
獲取局部網(wǎng)絡的地址
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 接受到服務器的消息事件
（1）獲取局部網(wǎng)絡的地址IP
獲取局部網(wǎng)絡的IP十分簡單，打開設置，進入網(wǎng)絡，點擊WiFi屬性，在IPv4右側就能看見IP地址然后，在IP的前面加上ws://尾部加上3001得到可用的IP：
例如：
ws://199.213.7.102:3001
（2）建立客戶端和服務器的鏈接，并且發(fā)送消息，監(jiān)聽服務器回發(fā)消息
在wxml部分設置一個按鈕，用來獲取信息親切發(fā)送消息：
WXML:
JS部分建立客戶端和服務器的鏈接，并且發(fā)送消息，監(jiān)聽服務器回發(fā)消息：
重慶分公司
重慶分公司
//本地服務器地址
var wsApi = "ws://199.213.7.102:3001";
var socketOpen==false;
sendMessage:function(e)
{
var msg=e.detail.value;
if (socketOpen) {
console.log(msg);
//向服務器發(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);
})
})
}
})
},服務器端使用nodejs配置
服務器這里用的是nodejs來配置，當然你也可以用其他后端語言來處理。假設你已經(jīng)安裝好了nodejs，那么我們開始吧：
創(chuàng)建nodejs環(huán)境
引入ws模塊的構造函數(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)境就生成完畢，接下來就要寫服務端的代碼了
（2）引入ws模塊的構造函數(shù)并且實例化
在websocket下創(chuàng)建一個文件server.js，用來編寫nodejs代碼，首先我們要引入ws模塊的構造函數(shù)并且實例化：
引入ws模塊的構造函數(shù)并且實例化：
//引入ws模塊的構造函數(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模塊的構造函數(shù)
var webSocketServer=require("ws").Server;
//實例化
var wss=new webSocketServer({
port:3001
});
//監(jiān)聽客戶端連接
wss.on("connection",function(ws){
console.log("服務器連接建立成功");
//監(jiān)聽客戶端消息
ws.on("message",function(msg){
console.log(msg);
ws.send("來自客戶端的消息："+msg);
})
});（4）回發(fā)消息
服務器接收消息之后，還要具備回發(fā)消息的能力，給客戶端反饋消息，至于返回什么消息，不是我們這里要討論的，我們直接簡單的將客戶發(fā)送的消息回發(fā)回去即可：
ws.send(“來自客戶端的消息：”+msg)
//引入ws模塊的構造函數(shù)
var webSocketServer=require("ws").Server;
//實例化
var wss=new webSocketServer({
port:3001
});
//監(jiān)聽客戶端連接
wss.on("connection",function(ws){
console.log("服務器連接建立成功");
//監(jiān)聽客戶端消息
ws.on("message",function(msg){
console.log(msg);
ws.send("來自客戶端的消息："+msg);
})
});演示websocket
最后我們簡單地演示一下：
在cmd中繼續(xù)輸入：node server.js，運行server.js代碼
在微信開發(fā)者工具中編譯，運行小程序
輸入消息，觀察反饋
（1）小程序和服務器建立連接
小程序和服務器建立連接后顯示：
服務器端顯示建立成功
（2）小程序向服務器發(fā)送給消息
在文本框中輸入內(nèi)容，發(fā)送消息，服務器接收到后：
小程序獲取到服務器回發(fā)的消息：
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設計公司的支持。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網(wǎng)站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
