融雲IM SDK web 端整合表情採坑篇

公司整合 im 使用的是融雲的 im sdk，我們有移動端，有 web 端，移動端同事整合表情時還是蠻順利的貌似移動端 sdk 裡就支援，一切都很順理成章的樣子，web 端就有些棘手了。web 端的表情是需要單獨引入外掛程式的，這點還是有點困惑的。

這第一步不用說肯定是 sdk 的初始化和連線了。這些在文件的指引下都是很順利的還很欣慰，還為文件的細緻點過贊。

這第二步就是細化相關功能了。比如說發訊息時可以帶表情。

按照文件中的示例發了一條表情訊息，完美成功了。看到文件中有 emoji 外掛程式，好奇的點開看看。好吧 ╮(╯▽╰)╭，如果要發表情訊息需要整合外掛程式。

沒關係，沒關係，乙個外掛程式而已。有文件有教程不怕不拍的 (▽

)按步驟整合，自認為本人是個比較聽話的，文件讓咱幹嘛就幹嘛。決不搞特殊。

so ~ 一切都很完美很太平。開心的整合，拿到了了表，發訊息也可以正常攜帶了，美美的給了移動端，你看成功了 ~

哈哈哈暗自竊喜中ヾ(￣ー￣)x(▽)ゞ奈何移動端同事也同樣會給了我乙份大禮給 web 發了個帶表情的訊息。點開一看。這什麼。。。這什麼。。。這一堆黑框是什麼鬼 -_-||

額 ~ 我做錯了什麼。。。檢查了變沒問題啊，看了眼資料心裡安慰了許多，原來收到的就是那麼個黑框，於是理直氣壯的去融雲提了工單。

問：web 端收到的表情展示成方塊

答：1、web 端展示 emoji 時, 不管是通過歷史訊息還是訊息***監聽的訊息, 都需要呼叫 emojitohtml 轉成 html 或者使用 symboltoemoji 將 unicode(您說的小方塊) 轉化成原生 emoji 字元

2、不同瀏覽器, 不同裝置, 展示的原生 emoji 表情都不同

3、如需多端展示 emoji 一致, 需使用 emojitohtml 轉化為 html 後再展示(此方法為以形式展示)

按照工單的提示對訊息內容做了處理，呼叫了 emojitohtml 方法。完美解決。

emojitohtml:
function
(message)
,

class
="message-entry"
v-html
="emojitohtml(message.content)"
>
pre>

由於開發使用了 vue 所以直接在標籤上做了處理，在需要轉換的訊息型別上呼叫此方法即可。目前本人僅僅轉換了文字類訊息。

融雲官網：

融雲IM SDK web 端整合 表情採坑篇