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

Posted 野马,程序源_改造新Bug

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序---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);
          }
      })
  }
}

 

以上是关于微信小程序---Socket聊天功能实现的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-模仿绘制聊天界面

微信小程序|基于小程序+C#实现聊天功能

微信小程序|基于小程序+C#实现聊天功能

二、微信小程序集成融云sdk调试聊天室功能

微信小程序-聊天功能下拉加载更多数据(历史聊天内容出现在顶部)

微信小程序|基于小程序+C#制作一个聊天系统