• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 - 组件传值给调用页面发布时间:2022-07-18
下一篇:
微信小程序登录 errcode 40029 天坑发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap