融云IM SDK web 端集成 — 表情采坑篇

Posted 2021-09-16 融云RongCloud

公司集成 IM 使用的是融云的 IM SDK，我们有移动端，有 web 端，移动端同事集成表情时还是蛮顺利的貌似移动端 SDK 里就支持，一切都很顺理成章的样子，web 端就有些棘手了。web 端的表情是需要单独引入插件的，这点还是有点困惑的。

一脸懵的看着文档，踩着优雅的脚步入坑，完成我的表情集成采坑之旅

这第一步不用说肯定是 SDK 的初始化和连接了。这些在文档的指引下都是很顺利的还很欣慰，还为文档的细致点过赞。

这第二步就是细化相关功能了。比如说发消息时可以带表情。

手动划重点专用~

按照文档https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#emoji中的示例发了一条表情消息，完美成功了。看到文档中有 Emoji 插件，好奇的点开看看。好吧 ╮(╯▽╰)╭，如果要发表情消息需要集成插件。

没关系，没关系，一个插件而已。有文档有教程不怕不拍的 (_^▽^_)

---

开心的看着文档，优雅的写着代码~~

按步骤集成，自认为本人是个比较听话的，文档让咱干嘛就干嘛。决不搞特殊。

so ~ 一切都很完美很太平。开心的集成，拿到了了表，发消息也可以正常携带了，美美的给了移动端，你看成功了 ~

哈哈哈暗自窃喜中 ヾ(￣ー￣)X(^▽^)ゞ 奈何移动端同事也同样会给了我一份大礼给 web 发了个带表情的消息。点开一看。这什么。。。这什么。。。这一堆黑框是什么鬼 -_-||

额 ~ 我做错了什么。。。检查了变没问题啊，看了眼数据心里安慰了许多，原来收到的就是那么个黑框，于是理直气壮的去融云提了工单。

---

工单问答时间：

问：web 端收到的表情展示成方块

答： 1、web 端展示 emoji 时, 不管是通过历史消息还是消息监听器监听的消息, 都需要调用 emojiToHTML 转成 HTML 或者使用 symbolToEmoji 将 unicode(您说的小方块) 转化成原生 emoji 字符 2、不同浏览器, 不同设备, 展示的原生 Emoji 表情都不同 3、如需多端展示 Emoji 一致, 需使用 emojiToHTML 转化为 HTML 后再展示(此方法为以图片形式展示)

按照工单的提示对消息内容做了处理，调用了 emojiToHTML 方法。完美解决。

---

废话少说，上代码：

emojiToHtml:function(message){
return RongIMLib.RongIMEmoji.emojiToHTML(message);
},

<pre class="Message-entry" v-html="emojiToHtml(message.content)"></pre>
​

由于开发使用了 vue 所以直接在标签上做了处理，在需要转换的消息类型上调用此方法即可。目前本人仅仅转换了文本类消息。

参考文案：

文档地址：https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#emoji

融云官网：https://www.rongcloud.cn/