IM集成

融云 IM 集成

融云即时通讯产品支持单聊、群聊、超级群、聊天室 多种业务形态，提供丰富的客户端和服务端接口，大部分能力支持开箱即用。

融云的架构设计特点：

• 无需改变现有 App 的架构，直接嵌入现有代码框架中；
• 无需改变现有 App Server 的架构，独立部署一份用于用户授权的 Service 即可；
• 专注于提供通讯能力，使用私有的二进制通信协议，消息轻量、有序、不丢消息；
• 安全的身份认证和授权方式，无需担心 SDK 能力滥用（盗用身份的垃圾消息、垃圾群发）问题。

客户端集成

导入 SDK

可以参考官方文档

// 安装 IM 5.0 最新版本
npm install @rongcloud/engine@latest @rongcloud/imlib-next@latest -S

// CMD
const RongIMLib = require('@rongcloud/imlib-next')

// ES
import * as RongIMLib from '@rongcloud/imlib-next'

// CDN链接
<script src="https://cdn.ronghub.com/RongIMLib-5.3.0.prod.js"></script>

初始化

RongIMLib.init({
  appkey: "xxxxxx", //  这里是在融云控制台申请的应用appkey
});

// 添加事件监听
const Events = RongIMLib.Events;
RongIMLib.addEventListener(Events.CONNECTING, function () {
  console.log("正在链接服务器");
});

RongIMLib.addEventListener(Events.CONNECTED, function () {
  console.log("已经链接到服务器");
});

RongIMLib.addEventListener(Events.MESSAGES, function (res) {
  console.log("接收到消息", res);
  // res.messages 这里收到消息后进行展示处理
});

用户连接 IM

try {
  // token 用户的token
  RongIMLib.connect(token).then((res) => {
    if (res.code === RongIMLib.ErrorCode.SUCCESS) {
      console.log("链接成功, 链接用户 id 为: ", res.data.userId);
    } else {
      console.warn("链接失败, code:", res.code);
    }
  });
} catch (err) {
  console.log(err);
}

发送消息

// 定义消息投送目标会话
const conversation = {
  conversationType: RongIMLib.ConversationType.PRIVATE,
  targetId: "userID", // 这里是接收人ID
};
// 发送文本（表情）消息
function sendTextMsg() {
  // 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
  const message = new RongIMLib.TextMessage({
    content: "这里是发送的文本消息内容",
  });
  // 发送
  RongIMLib.sendMessage(conversation, message)
    .then((res) => {
      console.log("发送回调", res);
      // 发送成功后展示到对话框中
    })
    .catch((err) => {
      console.log(err);
    });
}

//  发送图片消息
function sendImgMsg() {
  // file = <input type="file" /> 所选的文件信息
  const msgBody = {
    file, // 待上传文件
    user: { id: "", name: "", portraitUri: "", extra: "" }, // 消息中携带的用户信息，非必填
    extra: "连同图片一起发送的文本", // 消息中携带的透传信息，非必填
  };
  const hooks = {
    onProgress(progress) {
      console.log("progress", progress);
    }, // 上传进度监听，可选
    onComplete(fileInfo) {
      // 上传完成时的回调钩子，可选
      console.log(fileInfo.url); // 文件存储地址 图片cdn链接
    },
  };
  const options = {
    contentDisposition: "inline", // 'inline' | 'attachment' , 使用 aws 上传时返回链接在浏览器中的展示形式
  };
  RongIMLib.sendImageMessage(conversation, msgBody, hooks, options).then(
    ({ code, data }) => {
      console.log(data); // 发送回调结果
      if (code === 0) {
        // 发送成功 可以展示到对话框的还有消息侧
        console.log("发送成功");
      }
      return alert("图片发送失败");
    }
  );
}

自定义消息

// 注册自定义消息  s:person 自定义
const PersonMessage = RongIMLib.registerMessageType(
  "s:person",
  false,
  false,
  [],
  false
);
// 构建要发送的自定义消息
const message = new PersonMessage([
  { desc: "查询订单号", orderID: 123 },
  { desc: "查询我是谁", orderID: 123 },
]);
// 发送消息
RongIMLib.sendMessage(
  {
    conversationType: RongIMLib.ConversationType.PRIVATE,
    targetId: "userID",
  },
  message
).then((res) => {
  if (res.code === 0) {
    console.log(res.code, res.data);
  } else {
    console.log(res.code);
  }
});

表情加载

// 引入
<script src="https://cdn.ronghub.com/RongEmoji-2.2.10.min.js"></script>
 // 表情信息可参考 http://unicode.org/emoji/charts/full-emoji-list.html
const config = {
    size: 25,
    url: '//f2e.cn.ronghub.com/sdk/emoji-48.png',
    lang: 'en',
    extension: {
        dataSource: {
            u1F914: { // 自定义 u1F914 对应的表情
                en: 'thinking face', // 英文名称
                zh: '思考', // 中文名称
                tag: '🤔', // 原生 Emoji
                position: '0 0' // 所在背景图位置坐标
            }
        },
        url: '//cdn.ronghub.com/thinking-face.png' // 新增 Emoji 背景图 url
    }
};
RongIMLib.RongIMEmoji.init(config);
// RongIMEmojiList 是表情列表 可展示到view中供选择
const RongIMEmojiList = RongIMLib.RongIMEmoji.list;
// 部分示例
😊😭😂💔😑😟🐶🎉📢🤔🌙💤🍦🚀

关于语音/视频通话

// 引入一下链接  顺序不变
<script src="https://cdn.ronghub.com/RongIMLib-5.3.0.prod.js"></script>
// RTCLib v5
<script src="https://cdn.ronghub.com/RCRTC-5.3.12.prod.js"></script>
 // RongCallLib
<script src="https://cdn.ronghub.com/RCCall-5.0.latest.js"></script>

// 当RongIMLib.connect连接成功后，在成功回调中初始化音视频
 rtcClient = RongIMLib.installPlugin(RCRTC.installer)
    caller = RongIMLib.installPlugin(RCCall.installer, {
        rtcClient,
        onSession(session){
            session.registerSessionListener({
                // 这里的内容参考开发文档
            });
        },
    })

// 我这里由于业务不需要音视频所以没有深度测试，只是简单测试了下打电话功能，暂时不做仔细记录

展示对话框

结语

本文仅以 WEB 客户端集成做记录，如果是实现聊天对话客服功能，完全够用了。