一对一在线图文聊天之融云IMLib

由于我自己的项目中有用到一对一的图文聊天，但是由于时间和技术等问题，最终采用了融云集成的SDK开发。以下是详细的步骤。

以上是我的两个聊天页面，User端和Doctor端，页面什么都一样，唯一不同就是融云的token和接收消息的id。

在打开页面之后在浏览器控制台可以看到当前已经连上融云的server。

下面是演示。
User发送文字聊天，控制台打印出发送文字信息成功。我这里的接收端id为002，

在接收端Doctor则监听到消息，获得消息显示在页面上。

Doctor端发送一张图片，接收端id为001，在控制台可以看到发送图片消息成功。

在接收端为001中，监听到了002发送过来的消息，得到消息里面的图片并显示在页面上。

基本图文聊天如上图演示，因为在线聊天所以没有获取历史消息。其中还有发送emoji消息，文件消息，语音消息，小视频，GIF等在官网的开发文档里面都有相应的代码，我这边只用到了图文，其他的没有用到。

https://www.rongcloud.cn/

虽说官方文档已经说得很明白了，但是依旧需要自己花时间去研究怎么运用。

导入需要用到的js

<script src="https://cdn.ronghub.com/RongIMLib-4.2.latest.js"></script>

这里的appkey在融云官网开发者后台获取，id在融云开发者后台自己注册用户id，也可以在调用接口注册。我这边只需要两个用户，所以直接在开发者后台注册了。注册成功之后会获得该用户的token。
下面是js代码，从官网拷贝下来的，只有简单的文字聊天，图片要上传到服务器，官网开发文档有，可以自己去看。
填入appkey和token等自己的设置之后打开应该可以在控制台看到连接成功和发送消息成功，在事件监听里面可以收到别的端发来的消息，只需要拿到消息显示在你自己的聊天样式中就行了。
融云开发文档里面的代码都是最原始的，首先你得有一个聊天页面。

// 应用初始化以获取 RongIMLib 实例对象，请务必保证此过程只被执行一次
const im = RongIMLib.init({ appkey: '<Your-App-Key>' });
// 添加事件监听
im.watch({
  // 监听会话列表变更事件, 触发时机：会话状态变化（置顶、免打扰）、会话未读数变化（未读数增加、未读数清空）、会话 @ 信息、会话最后一条消息变化
  conversation (event) {
    // 假定存在 getExistedConversationList 方法，以获取当前已存在的会话列表数据
    const conversationList = getExistedConversationList()
    // 发生变更的会话列表
    const updatedConversationList = event.updatedConversationList;
    // 通过 im.Conversation.merge 计算最新的会话列表
    const latestConversationList = im.Conversation.merge({ conversationList, updatedConversationList })
  },
  // 监听消息通知
  message (event) {
    // 新接收到的消息内容
    const message = event.message;
  },
  // 监听 IM 连接状态变化
  status (event) {
    console.log('connection status:', event.status);
  },
  // 监听聊天室 KV 数据变更
  chatroom (event) {
    /**
     * 聊天室 KV 存储数据更新
     * @example
     * [
     *  {
     *    "key": "name",
     *    "value": "我是小融融",
     *    "timestamp": 1597591258338, 
     *    "chatroomId": "z002", 
     *    "type": 1 // 1: 更新（ 含:修改和新增 ）、2: 删除
     *  },
     * ]
     */
    const updatedEntries = event.updatedEntries
  },
  expansion (event) {
    /**
     * 更新的消息拓展数据
     * @example {
     *    expansion: { key: 'value' },      // 设置或更新的扩展值
     *    messageUId: 'URIT-URIT-ODMF-DURR' // 设置或更新扩展的消息 uid
     * }
     */
    const updatedExpansion = event.updatedExpansion;
    /**
     * 删除的消息拓展数据
     * @example {
     *    deletedKeys: ['key1', 'key2'],    // 设置或更新的扩展值
     *    messageUId: 'URIT-URIT-ODMF-DURR' // 设置或更新扩展的消息 uid
     * }
     */
    const deletedExpansion = event.deletedExpansion;
  }
});
im.connect({ token: '<Your-Token>' }).then(user => {
  console.log('链接成功, 链接用户 id 为: ', user.id);
}).catch(error => {
  console.log('链接失败: ', error.code, error.msg);
});

var conversation = im.Conversation.get({
  targetId: '接收方的 userId',
  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
  content: {
    content: 'Hello RongCloud' // 文本内容
  }
}).then(function(message){
  console.log('发送文字消息成功', message);
});

im.Conversation.getList({
  count: 30,
  startTime: 0,
  order: 0
}).then(conversationList => {
  console.log('获取会话列表成功', conversationList);
});

以上就是通过融云SDK做的在线聊天，简单来说一下步骤：

1. 初始化
2. 设置监听消息
3. 连接server
4. 发送消息
5. 获取记录，会话列表等。

前面必要的三步顺序不要乱，发送消息根据你需要的类型去官网选择代码，在监听消息里面可以判断一下对方发送过来的消息类型，然后显示到你的页面上。
希望对你有所帮助，有问题欢迎提问，也欢迎指正。