融雲 Web SDK 如何實現表情的收發

2021-10-12 06:20:56 字數 2837 閱讀 8214

首先檢視融雲開發文件, 可以看到表情外掛程式的描述, 但與產品需求不完全一致, 還需要結合其他方法實現更豐富的表情功能

主要與產品不符的地方:

1、融雲提供的表情個數有限, 僅 128 個

2、融雲提供的表情沒有 qq 表情生動豐富

融雲表情外掛程式:

接下來依次按順序介紹:

1、什麼是 emoji

2、如何實現類 qq 的表情選擇框

3、結合融雲 sdk 實現表情的傳送

4、結合融雲 sdk 實現表情的接收

emoji 日語繪文字. 是日本在無線通訊中所使用的視覺情感符號,指圖畫,文字指的則是字元, 用於在訊息中插入表情. 自 2007 年蘋果公司發布的 ios 5 輸入法加入 emoji 後, 這種表情符號開始席捲全球

最初 emoji 實現僅為將字元轉為顯示. 比如::)在訊息中被替換為 ?. 所以難以標準化

2010 年, unicode 編碼加入 emoji 字元, 使其標準化. 也就是目前 emoji 與文字一樣, 本身就是字元, 系統或瀏覽器會自動將其轉化為圖形展示

emoji 列表:

如何獲取表情列表

獲取方式有以下幾種:

1、直接使用融雲提供的 128 個表情

var list = rongimlib.rongimemoji.list;

/*list => [

,...

]*/

2、通過 emoji 官方列表獲取

如果融雲提供的 128 個表情不滿足需求或希望完全自定義表情列表, 可自行通過 emoji 官方列表選擇自己喜歡的 emoji 表情

官方列表:

3、自行製作並定義表情

部分讀者會發現, qq 選擇框中有些表情 emoji 列表裡是沒有的, 比如以下幾個表情:

讀者也可以模仿 qq, 自行定義表情符號和. 展示對應符號時, 替換成對應即可

融雲表情外掛程式也提供了擴充套件的功能, **如下:

var config =},

url:

''// 新增 emoji 背景圖 url}}

;rongimlib.rongimemoji.

init

(config)

;

通過什麼是 emoji的描述, 可知 emoji 本身就是字元, 自定義擴充套件表情也推薦使用字元定義. 所以傳送表情本質上就是傳送普通文字訊息

注意: 記得先 初始化、連線 融雲 sdk

var conversation = im.conversation.

get();

conversation.

send(}

).then

(function

(message)

);

與傳送訊息相同, 接收表情訊息本質上就是接收普通文字訊息. 所以依照融雲文件設定訊息監聽即可

var im = rongimlib.

init(''

});// 建議全域性只初始化一次

var conversationlist =

;// 當前已存在的會話列表

im.watch(}

);

整合收訊息部分遇到的一些坑:1、遇到了重複監聽同一條訊息的問題

原因是: im.watch 每次連線都會去呼叫, 導致監聽了多次. 要注意 im.watch 是全域性監聽, 不會隨著斷開鏈結被取消掉

2、收到了一些類似的亂碼文字

通過融雲的 release notes 發現從 web3.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)

;// => "?測試 emoji"

// 之後通過 innerhtml(如果使用框架, 用框架提供的方法介面. 比如 vue 的 v-html) 將 html 繫結到需要展示的位置就可以了

使用融雲 Web SDK 撤回訊息

專案根據融雲的文件已經完成了簡單的聊天功能,現在需要完成的需求是能對傳送成功的訊息能夠撤回 var conversation im.conversation.get conversation.recall then function message 根據文件整合,完全沒有問題,訊息能夠撤回且原訊息將...

融雲 Web SDK 如何實現只有乙個裝置登入

在整合融雲的即時通訊時,產品腦門一拍說 咋們要實現乙個功能,不管是 web 端還是移動端登入,必須只能乙個端登入成功並且後登入成功的賬號需要踢掉前面登入的賬號。咋的一聽感覺還蠻簡單的,融雲不是有乙個服務嘛 叫做多裝置訊息同步,我把該服務關掉不就行了 o o哈哈 話不多說,開始揭開謎底 1 首先將多裝...

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

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