【微信小程序】---Socket聊天功能實現

 

一、什么是socket?

網絡上的兩個程序通過一個雙向的通信連接實現數據的交換，這個連接的一端稱為一個socke

本章案例中我們使用HTML5中的webSocket。

websocket是HTML5開始提供的一種瀏覽器與服務器進行雙向通訊的網絡技術。

使用websocket瀏覽器和服務器只需要做一個握手的動作，然后瀏覽器和服務器之間就形成了一條快速的通道，兩者之間就可以互相傳送

好處:

• 節省資源：互相溝通的Header是很小的 大概是2bytes。

• 推送信息：不需要客戶端請求，服務器可以主動傳送數據給客戶端

服務端代碼

安裝ws cnpm install ws -S

 

const WebSocket = require('ws');
//創建服務
const wss = new WebSocket.Server({ port: 8080 });

//當用戶連接的時候回觸發connection
wss.on('connection', (client) => {
   //接收客戶端消息
   client.on('message', (data) => {
       //遍歷所有用戶,將接收到的消息發送給所有的用戶
       wss.clients.forEach((item) => {
           if (item.readyState === WebSocket.OPEN) {
               item.send(data);
          }
      });
  });
});

 

 

客戶端代碼

相關API

• wx.connectSocket:創建一個WebSocket 連接

• wx.onSocketOpen:監聽 WebSocket 連接打開事件

• wx.onSocketMessage:監聽 WebSocket接受到服務器的消息事件

• wx.sendSocketMessage:通過 WebSocket 連接發送數據。需要先wx.connectSocket，並在 wx.onSocketOpen 回調之后才能發送

 

onLoad(){
     //鏈接socket
     wx.connectSocket({
       url: 'ws://192.168.1.9:8080',
       header: {
           'content-type': 'application/json'
      },
       method: "get",
       success: (data) => {
           //如果鏈接成功，則監聽 WebSocket 連接打開事件
           if (data.errMsg == "connectSocket:ok") {
               //監聽 WebSocket 連接打開事件
this.handleSocketOpen();
          }
      }
  })
   //接收服務端傳遞到客戶端的消息
   this.handleSocketMessage();
}
//監聽 WebSocket 連接打開事件
handleSocketOpen(){
   wx.onSocketOpen(() => {
       //定義狀態值，如果為true則表示監聽成功
        this.flag = true
  })
},
//接收服務端傳遞到客戶端的消息
handleSocketMessage(){
  wx.onSocketMessage((data) => {
     console.log(data);
  })
},
//向服務端發送消息    
handleSend(e) {
   //如果監聽WebSocket 連接打開事件成功則發送消息
  if (this.flag) {
      wx.sendSocketMessage({
          data: this.data.message,
          success: (data) => {
               console.log(data, 111);
          }
      })
  }
}