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

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

公司集成 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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章