关于sdk:融云-Web-SDK-如何实现表情的收发

公司需要: 要求聊天产品像 QQ、微信一样, 能够接管、发送简略表情

首先查看融云开发文档, 能够看到表情插件的形容, 但与产品需要不完全一致, 还须要联合其余办法实现更丰盛的表情性能

次要与产品不符的中央:

1、融云提供的表情个数无限, 仅 128 个

2、融云提供的表情没有 QQ 表情活泼丰盛

融云表情插件: https://docs.rongcloud.cn/im/imlib/web/plugin/emoji/

接下来顺次按程序介绍:

1、什么是 Emoji

2、如何实现类 QQ 的表情抉择框

3、联合融云 SDK 实现表情的发送

4、联合融云 SDK 实现表情的接管

Emoji 日语 绘文字 . 是日本在无线通信中所应用的视觉情感符号, 绘指图画, 文字 指的则是字符, 用于在音讯中插入表情. 自 2007 年苹果公司公布的 iOS 5 输入法退出 Emoji 后, 这种表情符号开始席卷寰球

最后 Emoji 实现仅为将字符转为图片显示. 比方: :) 在音讯中被替换为 ????. 所以难以标准化

2010 年, Unicode 编码退出 Emoji 字符, 使其标准化. 也就是目前 Emoji 与文字一样, 自身就是字符, 零碎或浏览器会主动将其转化为图形展现

Emoji 列表: http://unicode.org/emoji/charts/full-emoji-list.html

由上图, 抉择框的实现实质是将表情列表顺次排列渲染. 重点在于 如何获取表情列表

获取形式有以下几种:

1、间接应用融云提供的 128 个表情

var list = RongIMLib.RongIMEmoji.list;
/*
list => [
    {
        unicode: 'u1F600',
        emoji: '????',
        node: span,
        symbol: '[笑嘻嘻]'
    },
    ...
]
*/

2、通过 Emoji 官网列表获取

如果融云提供的 128 个表情不满足需要或心愿齐全自定义表情列表, 可自行通过 Emoji 官网列表抉择本人喜爱的 Emoji 表情

官网列表: http://unicode.org/emoji/charts/full-emoji-list.html

3、自行制作并定义表情

局部读者会发现, QQ 抉择框中有些表情 Emoji 列表里是没有的, 比方以下几个表情:

这是因为这些表情是 QQ 自行制作定义的. QQ 以图片的模式展现这些表情

读者也能够模拟 QQ, 自行定义表情符号和图片. 展现对应符号时, 替换成对应图片即可

融云表情插件也提供了扩大的性能, 代码如下:

var 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);

通过 什么是 Emoji 的形容, 可知 Emoji 自身就是字符, 自定义扩大表情也举荐应用字符定义. 所以发送表情实质上就是发送一般文本音讯

留神: 记得先初始化、连贯融云 SDK

var conversation = im.Conversation.get({
  targetId: '接管方的 userId',
  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
  content: {content: '我是表情 哈哈哈 ????' // 文本内容. 要发送原生字符, 不要将整个 html 字符串发送进来哈}
}).then(function(message){console.log('发送表情胜利啦 ~~~', message);
});

与发送音讯雷同, 接管表情音讯实质上就是接管一般文本音讯. 所以按照融云文档设置音讯监听即可

var im = RongIMLib.init({appkey: ''}); // 倡议全局只初始化一次
var conversationList = []; // 以后已存在的会话列表
im.watch({message: function(event){
    var message = event.message;
    console.log('有人给我发音讯啦:', message);
  }
});

集成收音讯局部遇到的一些坑:

1、遇到了反复监听同一条音讯的问题

起因是: im.watch 每次连贯都会去调用, 导致监听了屡次. 要留神 im.watch 是全局监听, 不会随着断开链接被勾销掉

2、收到了一些相似 樂、 的乱码文字

通过融云的 Release Notes 发现从 Web 3.0.6 开始曾经解决了此问题

如果不不便降级, 融云也提供了解决办法, 能够通过调用插件的 symbolToEmoji 来转化这些字符. 亲测无效

var text = '';
RongIMLib.RongIMEmoji.symbolToEmoji(text);
// => '????????'

3、各个系统展现 Emoji 不统一

此问题融云文档有阐明, 是因为不同零碎、浏览器对字符的渲染实现不统一

能够通过转化成图片展现, 使各个系统、浏览器对立

融云也提供了间接转化成 html 的办法, 用户显示时间接展现 html 就能够

var text = '???? 测试 Emoji';
// 将 text 中的原生 Emoji (蕴含 Unicode) 转化为 HTML
var html = RongIMLib.RongIMEmoji.emojiToHTML(text);
// => "<span class='rong-emoji-content'name='[笑嘻嘻]'>????</span> 测试 Emoji"
// 之后通过 innerHTML(如果应用框架, 用框架提供的办法接口. 比方 vue 的 v-html) 将 html 绑定到须要展现的地位就能够了

什么是 Emoji ?

如何实现类 QQ 的表情抉择框

联合融云 SDK 实现表情的发送

联合融云 SDK 实现表情的接管