uni-app技术分享| uni-app转小程序-实时消息

Posted 2022-05-16 anyRTC

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

引入 RTM SDK

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

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

### 回调封装
本文仅进行简单封装，如需更复杂逻辑请自行更改。
```javascript
// 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 版本
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);
);

### 逻辑方法封装

```javascript
// 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

<view class="content">
        <view class="">
            <text>用户 ID：userId</text>
        </view>
        <view class="">
            <!-- 登录 RTM 系统 -->
            <button v-if="page === 0" type="primary" @click="loginRTM">登录 RTM 系统</button>
            <!--  -->
            <view v-else-if="page === 1" class="">
                <button type="primary" @click="page=2">呼叫邀请</button>
                <button type="primary" @click="page=3">发送消息</button>
            </view>
            <!-- 呼叫邀请 -->
            <view v-else-if="page === 2" class="">
                <!-- 远端用户 -->
                <input class="input_automatic" v-model="peerId" type="text" placeholder="请输入远端用户" />
                <button type="primary" @click="invitationCall">发起呼叫</button>
                <button type="primary" @click="invitationCallOff">取消呼叫</button>
            </view>
            <!-- 发送消息 -->
            <view v-else class="">
                <input type="text" class="input_automatic" v-model="peerId" placeholder="请输入远端用户" />
                <input type="text" class="input_automatic" v-model="sendText" placeholder="请输入消息" />
                <button type="primary" @click="sendMessage">发送</button>
            </view>
        </view>
    </view>

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;