微信小程序---Socket聊天功能实现

Posted 2021-03-25 野马,程序源_改造新Bug

 

一、什么是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);
          }
      })
  }
}