uniapp技术分享|uniapp转小程序实时消息

微信小程序 实现实时消息与 uniapp 转码成微信小程序 实现实时消息两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序。
本文主要简单实现点对点消息与呼叫邀请等相关功能实现。
uniapp转码成小程序逻辑与小程序逻辑基本一致。

引入 RTM SDK

使用 web RTM-SDK 即可，小程序的实时消息与 WEB 的实时消息共用 SDK。

使用 1.0.5 版本，否则转成小程序时可能会无法正常使用

npm i ar-rtm-sdk@1.0.5

// 引入 anyRTM 
import ArRTM from "ar-rtm-sdk"

代码封装

你可以在页面里边直接调用，也可单独封装成一个 js。
本人喜欢将 RTM 封装成一个 js 文件。

本地存放

const Store = {
    // RTM 客户端
    rtmClient: null,

    // 主叫邀请实例
    localInvitation: null,
    // 被叫收到的邀请实例
    remoteInvitation: null,
}

回调封装

本文仅进行简单封装，如需更复杂逻辑请自行更改。

// RTM 监听事件
const rtmEvent = {
    // 主叫：被叫已收到呼叫邀请
    localInvitationReceivedByPeer: () => {
        uni.hideToast();
        uni.showToast({
            title: '被叫已收到呼叫邀请',
            icon: 'none',
            duration: 2000,
            mask: true,
        });

    },
    // 主叫：被叫已接受呼叫邀请
    localInvitationAccepted: async (response) => {
        console.log("主叫：被叫已接受呼叫邀请", response);
        uni.hideToast();
        uni.showToast({
            title: '被叫接受呼叫邀请',
            icon: 'none',
            duration: 2000,
            mask: true,
        });

    },
    // 主叫：被叫拒绝了你的呼叫邀请
    localInvitationRefused: (response) => {
        console.log("主叫：被叫拒绝了你的呼叫邀请", response);
        uni.hideToast();
        uni.showToast({
            title: '被叫拒绝呼叫邀请',
            icon: 'none',
            duration: 2000,
            mask: true,
        });
    },
    // 主叫：呼叫邀请进程失败
    localInvitationFailure: (response) => {
        console.log("主叫：呼叫邀请进程失败", response);
        uni.hideToast();
        uni.showToast({
            title: '呼叫邀请失败',
            icon: 'error',
            duration: 2000,
            mask: true,
        });
    },
    // 主叫：呼叫邀请已被成功取消 (主动挂断)
    localInvitationCanceled: () => {
        console.log("主叫：呼叫邀请已被成功取消 (主动挂断)");
    },

    // 被叫：监听收到来自主叫的呼叫邀请
    RemoteInvitationReceived: async (remoteInvitation) => {
        console.log("监听收到来自主叫的呼叫邀请", remoteInvitation);
        // 监听回调
        rtmInternal.inviteProcessing(remoteInvitation)
        // 显示模态弹窗
        uni.showModal({
            title: '提示',
            content: '收到来自主叫的呼叫邀请',
            cancelText: '拒绝',
            confirmText: '接听',
            success: function(res) {
                if (res.confirm) {
                    console.log('用户点击确定');
                    remoteInvitation.accept();
                } else if (res.cancel) {
                    console.log('用户点击取消');
                    remoteInvitation.refuse();
                }
            }
        });
    },
    // 被叫：监听接受呼叫邀请
    RemoteInvitationAccepted: async () => {
        console.log("被叫 接受呼叫邀请");
        uni.hideToast();
        uni.showToast({
            title: '接受呼叫邀请',
            icon: 'success',
            duration: 2000,
            mask: true,
        });
    },
    // 被叫：监听拒绝呼叫邀请
    RemoteInvitationRefused: () => {
        console.log("被叫 拒绝呼叫邀请");
        uni.hideToast();
        uni.showToast({
            title: '拒绝呼叫邀请',
            icon: 'success',
            duration: 2000,
            mask: true,
        });
    },
    // 被叫：监听主叫取消呼叫邀请
    RemoteInvitationCanceled: () => {
        console.log("主叫 取消呼叫邀请");
        uni.hideToast();
        uni.showToast({
            title: '主叫取消呼叫',
            icon: 'success',
            duration: 2000,
            mask: true,
        });
    },
    // 被叫：监听呼叫邀请进程失败
    RemoteInvitationFailure: () => {
        console.log("被叫 呼叫邀请进程失败");
        uni.hideToast();
        uni.showToast({
            title: '呼叫邀请失败',
            icon: 'error',
            duration: 2000,
            mask: true,
        });
    },


    // 收到来自对端的点对点消息
    MessageFromPeer: (message, peerId) => {
        console.log("收到来自对端的点对点消息", message, peerId);
        uni.showToast({
            title: '收到' + peerId + '的点对点消息:' + message.text,
            icon: 'none',
            duration: 1000 * 5
        })

    },
    // 通知 SDK 与 RTM 系统的连接状态发生了改变
    ConnectionStateChanged: (newState, reason) => {
        console.log("系统的连接状态发生了改变", newState);

        switch (newState) {
            case "CONNECTED":
                uni.hideLoading();
                //  SDK 已登录 RTM 系统
                uni.showToast({
                    title: 'RTM 连接成功',
                    icon: 'success',
                    mask: true,
                })
                break;
            case "ABORTED":
                uni.showToast({
                    title: 'RTM 停止登录',
                    icon: 'error',
                    mask: true,
                });
                console.log("RTM 停止登录,重新登录");

                break;
            default:
                wx.showLoading({
                    title: 'RTM 连接中',
                    mask: true,
                })
                break;
        }
    }
}

登录 RTM 系统

所有与 rtm 相关操作都需要登录后才可正常使用
成功登录后即可监听相关回调

// 初始化
export const InItRtm = async (Config) => {
    // 创建 RTM 客户端
    Store.rtmClient = await ArRTM.createInstance(Config.AppID);

    // RTM 版本
    console.log("RTM 版本", ArRTM.VERSION);

    uni.showLoading({
        title: '登录中',
        mask: true
    })

    // 登录 RTM
    await Store.rtmClient.login({
        token: "",
        uid: Config.userId
    }).then(() => {
        uni.hideLoading();
        uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 2000
        })
        console.log("登录成功");

        // 监听收到来自主叫的呼叫邀请
        Store.rtmClient.on(
            "RemoteInvitationReceived",
            rtmEvent.RemoteInvitationReceived
        );
        // 监听收到来自对端的点对点消息
        Store.rtmClient.on("MessageFromPeer", rtmEvent.MessageFromPeer);
        // 通知 SDK 与 RTM 系统的连接状态发生了改变
        Store.rtmClient.on(
            "ConnectionStateChanged",
            rtmEvent.ConnectionStateChanged
        );

    }).catch((err) => {
        Store.userId = "";
        uni.hideLoading();
        uni.showToast({
            icon: 'error',
            title: 'RTM 登录失败',
            mask: true,
            duration: 2000
        });
        console.log("RTM 登录失败", err);
    });



}

逻辑方法封装

// RTM 内部逻辑
export const rtmInternal = {
...
}

查询呼叫用户是否在线

// 查询呼叫用户是否在线
    peerUserQuery: async (uid) => {
        const oUserStatus = await Store.rtmClient.queryPeersOnlineStatus([uid]);
        if (!oUserStatus[uid]) {
            uni.showToast({
                title: '用户不在线',
                icon: 'error',
                duration: 2000,
                mask: true,
            });
            return false;
        }
        return true;
    },

发起呼叫

// 主叫发起呼叫
    inviteSend: async (peerUserId) => {

        Store.localInvitation = await Store.rtmClient.createLocalInvitation(
            peerUserId
        )
        // 设置邀请内容
        // Store.localInvitation.cOntent= JSON.stringify({});

        // 事件监听
        // 监听被叫已收到呼叫邀请
        Store.localInvitation.on(
            "LocalInvitationReceivedByPeer",
            rtmEvent.localInvitationReceivedByPeer
        );
        // 监听被叫已接受呼叫邀请
        Store.localInvitation.on(
            "LocalInvitationAccepted",
            rtmEvent.localInvitationAccepted
        );
        // 监听被叫拒绝了你的呼叫邀请
        Store.localInvitation.on(
            "LocalInvitationRefused",
            rtmEvent.localInvitationRefused
        );
        // 监听呼叫邀请进程失败
        Store.localInvitation.on(
            "LocalInvitationFailure",
            rtmEvent.localInvitationFailure
        );
        // 监听呼叫邀请已被成功取消
        Store.localInvitation.on(
            "LocalInvitationCanceled",
            rtmEvent.localInvitationCanceled
        );

        // 发送邀请
        Store.localInvitation.send();
    },

取消呼叫

发起者主动取消呼叫邀请

callCancel: () => {
        if (Store.localInvitation) {
            Store.localInvitation.cancel()
        }
    },

被叫邀请回调绑定

// 被叫收到呼叫邀请处理(给收到的邀请实例绑定事件)
    inviteProcessing: async (remoteInvitation) => {
        // 监听接受呼叫邀请
        remoteInvitation.on(
            "RemoteInvitationAccepted",
            rtmEvent.RemoteInvitationAccepted
        );
        // 监听拒绝呼叫邀请
        remoteInvitation.on(
            "RemoteInvitationRefused",
            rtmEvent.RemoteInvitationRefused
        );
        // 监听主叫取消呼叫邀请
        remoteInvitation.on(
            "RemoteInvitationCanceled",
            rtmEvent.RemoteInvitationCanceled
        );
        // 监听呼叫邀请进程失败
        remoteInvitation.on(
            "RemoteInvitationFailure",
            rtmEvent.RemoteInvitationFailure
        );
    },

点对点消息发送

// 发送消息
    sendMessage: (uid, message) => {
        console.log("发送消息", uid, message);
        Store.rtmClient && Store.rtmClient.sendMessageToPeer({
            text: JSON.stringify(message)
        }, uid).catch(err => {
            console.log("发送消息失败", err);
        });
    },

简单页面

html

        
            用户 ID：{{userId}}
        
        
            
            登录 RTM 系统
            
            
                呼叫邀请
                发送消息
            
            
            
                
                
                发起呼叫
                取消呼叫
            
            
            
                
                
                发送
            
        
    

js

    import {
        generateNumber
    } from "../../until/until.js"; // 生成随机数
    import {
        InItRtm,
        rtmInternal
    } from "../../until/rtm.js"
    export default {
        data() {
            return {
                page: 0,
                // 本地用户
                userId: '',
                // 远端用户
                peerId: '',
                // 发送的信息
                sendText: ''
            }
        },
        created() {
            // 用户 UID
            this.userId = generateNumber(4) + ''
        },
        methods: {
            /** 登录 RTM 系统 */
            async loginRTM() {
                const info = {
                    /** 
                     * 必填 anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。
                     * 如果你的开发包里没有 App ID，请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID
                     */
                    AppID: '',
                    userId: this.userId
                }
                await InItRtm(info);
                this.page = 1
            },

            /** 呼叫邀请 */
            async invitationCall() {
                if (this.peerId === '') return uni.showToast({
                    title: '请输入远端用户',
                    icon: 'error',
                });
                if (this.peerId === this.userId) return uni.showToast({
                    title: '禁止远端用户与本地用户一致',
                    icon: 'none',
                });

                // 查询用户是否在线
                const state = await rtmInternal.peerUserQuery(this.peerId);
                if (state) {
                    rtmInternal.inviteSend(this.peerId)
                } else {
                    return uni.showToast({
                        title: '用户不在线',
                        icon: 'error',
                    });
                }
            },
            invitationCallOff() {
                rtmInternal.callCancel()
            },

            /** 发送消息 */
            async sendMessage() {
                if (this.peerId === '') return uni.showToast({
                    title: '请输入远端用户',
                    icon: 'error',
                });
                if (this.peerId === this.userId) return uni.showToast({
                    title: '禁止远端用户与本地用户一致',
                    icon: 'none',
                });
                if (this.sendText === '') return uni.showToast({
                    title: '请输入发送信息',
                    icon: 'error',
                });
                // 查询用户是否在线
                const state = await rtmInternal.peerUserQuery(this.peerId);
                if (state) {
                    rtmInternal.sendMessage(this.peerId, this.sendText)
                } else {
                    return uni.showToast({
                        title: '用户不在线',
                        icon: 'error',
                    });
                }
            }
        }
    }

style

.input_automatic {
        border: 1px solid;
        height: 40px;
        border-radius: 4px;
        padding: 0 12px;

    }