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

npm i ar-rtm-sdk@1.0.5

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

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;    }  }}

// 初始化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);    });  },

<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.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',          });        }      }    }  }

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