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

青春须早为，岂能长少年。这篇文章主要讲述uni-app技术分享| uni-app转小程序-实时消息相关的知识，希望能为你提供帮助。
微信小程序实现实时消息与 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 版本 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>

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.userIdawait 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