1. 首页
  2. wx小程序

微信小程序websocket实时聊天

微信小程序websocket实时聊天实例,官方文档说的不太清楚,没有弄过的就很难搞懂这个是怎么回事了。来看看代码吧

第一步先链接,并监听服务器返回的消息内容:

websocket: function() {
    wx.connectSocket({
        url:"url",//你们的websocket地址
        success: (res) => {
            console.log("进入聊天", res)
        },
        fail: (err) => {
            wx.showToast({
                title: '网络异常!',
            })
            console.log(err)
        },
    });

    //  连接成功
    wx.onSocketOpen((res) => {
        console.log('WebSocket 成功连接', res);
    })
    //连接失败
    wx.onSocketError((err) => {
        console.log('websocket连接失败', err);
        wx.showToast({
            title: '网络异常!',
        })
    })
    // 监听消息
    wx.onSocketMessage(function(res) {
        console.log('收到服务器内容:', res)
        //收到内容这里去处理显示
    })
}

如果没有提示错误的提示,到了这里已经成功链接了并且可以监听到服务器返回的消息内容了

第二步,发送消息:

wx.sendSocketMessage({
    data: {},//这里根据后台的格式发送数据,好像这个需要转换成字符串,之前我的没有转换就没有效果,这个有待测试。
    success(res) {
        console.log("消息发送成功", res)
    },
    fail(res) {
        console.log("消息发送失败", res)
    }
})

最后一步就是离开关闭websocket链接了:

/**
   * 生命周期函数--监听页面卸载
   *这个看情况吧,我的是在这里关闭的,具体看你自己那边是怎么处理的
   */
onUnload: function() {
    wx.closeSocket();
    wx.onSocketClose(function(res) {
        console.log('退出聊天!', res);
    });
},

我做的是在聊天界面实时获取消息的,不是像微信qq那种,直接在界面实时获取的,所以如果先做像微信那种,就要在app.js哪里去设置了,简单来说我的就是打开一个页面,在那个页面实时获取的而不是在列表哪里。

本文来自挚友阳光,本站一部分文章不代表本站立场,不妥请联系本站删除,如若转载,请注明出处:https://www.linstudy.com/article/87.html