小程序微信聊天

145 阅读1分钟

建立连接

登录成功之后,连接websocket (pages/index/index.js) - wxLogin方法中

wxLogin: function () {
        let that = this;
        if(!app.globalData.hasLogin){
            wx.getUserInfo({
                success(res) {
                    user.loginByWeixin(userInfo).then(res => {
                        if (res.code == 200) {
                            wx.setStorageSync('token', res.token)
                            // 建立websocket连接
                            WebSocket.connectSocket();
                            app.globalData.hasLogin = true;
                            that.isDoctor()
                        }
                    }).catch((err) => {
                        app.globalData.hasLogin = false;
                        that.setData({
                            loadingHidden: true
                        });
                        util.showErrorToast('微信登录失败');
                    });
                },
                fail(e) {
                    console.log(e)
                }
            })
        }
    },

通信

注册监听函数

当websocket向客户端发送消息时, 客户端如何感知,此时需要添加一个监听函数(默认情况下是onMessage),当websocket发送消息时,就会触发监听函数 (pages/chat/chat.js) -- onLoad

var WebSocket = require('../../utils/ws.js');
pages({
    onLoad() {
        // 设置接收消息回调, 当websocket发回消息时触发
        WebSocket.onSocketMessageCallback = this.onSocketMessageCallback;
    },
    onSocketMessageCallback(data) {
        // data为接收到的信息
        // ....
    }
})

发送消息

image.png

  • 发送消息(pages/chat/chat.js)- send方法
var WebSocket = require('../../utils/ws.js');
pages({
    send() {
        var input = this.data.input.replace(/^\s*|\s*$/g, "");
        if (input == "") {
            return
        }
        let newmsg = {
            chatId: this.data.patientId,
            // chatId:"1",
            fromId: this.data.userInfo.id,
            avatar: this.data.userInfo.avatar,
            name: this.data.userInfo.name,
            mine: true,
            content: input,
            timestamp: Date.parse(new Date()) / 1000,
            type: 0
        };
        let msg = {
            code: "2",
            message: newmsg
        }
        WebSocket.sendSocketMessage({
            msg
        });
    }
})
  • 2推送后台,3发回消息为后台逻辑
  • 接收消息(进入onload中的监听函数)
var WebSocket = require('../../utils/ws.js');
pages({
    onSocketMessageCallback: function (res) {
        // 获取当前列表
        let list = that.data.newsList
        // 追加刚刚发送的消息
        list.push(data.message)
        console.log("11111111111111111111" + list)
        that.setData({
            newsList: list
        })
        // 定位到最后一条消息
        setTimeout(function () {
            let lastItem = that.data.newsList.slice(-1)[0]
            console.log('lastItem: ', lastItem)
            that.setData({
                toview: 'msg' + lastItem.id
            })
        }, 200)
    }
})