微信小程序-实现实时聊天功能前端部分

最新推荐文章于 2024-06-03 16:46:35 发布

weixin_34037173

最新推荐文章于 2024-06-03 16:46:35 发布

阅读量6k

点赞数 1

文章标签：前端网络 json ViewUI

原文链接：https://juejin.im/post/5ba0b78ae51d450e88260e8d

版权

本文介绍了微信小程序中实现实时聊天功能的前端部分，包括在列表页开启webSocket服务，监听开启/关闭事件，以及聊天室详情页的消息处理。列表页负责服务的开启/关闭和消息处理，而详情页则处理发送消息和接收消息的逻辑。当连接断开时，会进行重连处理，并发送特定信息给服务端。整个前端逻辑重点在于服务的控制、断线处理和消息事件的管理。

摘要由CSDN通过智能技术生成

小程序中创建webSocket连接

需求

列表页需要实时获取新消息提示，详情页（聊天室）实现用户实时聊天

页面逻辑

列表页

首先在列表页开启ws服务，并监听开启/关闭事件，ws开启后，在wx.onSocketMessage监听消息

// 列表页
onLoad(options) {
  this.init();
  // 监听接受消息
  wx.onSocketMessage((res) => {})
},
init() {
  //# 开启ws
  this.openWS()
},
// 开启服务
openWS() {
  const token = wx.getStorageSync('token');
  const app = getApp();
  wx.connectSocket({
    url: app.globalData.socketPath + '?sec-websocket-protocol=' + encodeURIComponent(token),
    header: {
      'content-type': 'application/json',
      'from': 'wechatmini'
    },
    success() {},
    fail() {}
  })
}
复制代码

ws要确保只连一个，统一在列表页监听服务开启/关闭，
服务断开后要重连服务，利用小程序进入详情后列表页不销毁特性，在列表页或详情页断线后都会执行列表页的重连事件

// # 列表页
init() {
    // # 1.ws要确保只连一个，用全局变量判断
    !this.data.socketOpened && this.openWS();
    // # 监听服务
    wx.onSocketOpen((res) => {
        console.log('WebSocket 已开启！')
        this.data.socketOpened = true;
    })
    // # 重连
    wx.onSocketClose((res) => {
        console.log('WebSocket 已关闭！')
        this.data.socketOpened = false;
        // # 在列表页面重连服务
        this.openWS()
    })
}
复制代码

重连服务

为了减轻服务器的压力，防止连不上服务会一直请求连接服务，做了个延时处理，用reconnectDelay控制，成功后再重置。断线有2种情况，一是连接失败，二是连接成功后断线：

init() {
    ...
    wx.onSocketOpen((res) => {
        console.log('WebSocket 已开启！')
        this.data.socketOpened = true;
        this.data.reconnectDelay = 0;
    })    
    wx.onSocketClose((res) => {
        console.log('WebSocket 已关闭！')
        this.data.socketOpened = false;
        // 在列表页面重连服务,重连失败调用时间+1s
        setTimeout(() => {
        	this.openWS()
        	this.data.reconnectDelay += 1000
        }, this.data.reconnectDelay);
    })
    ...
}
openWS() {
    ...
    wx.connectSocket({
        ...
    	fail(res) {
            console.log(