開源即時(shí)通訊IM框架MobileIMSDK的H5端技術(shù)概覽
Posted on 2024-09-18 10:36 Jack Jiang 閱讀(94) 評(píng)論(0) 編輯 收藏一、基本介紹
MobileIMSDK的H5端是一套純JS編寫的基于標(biāo)準(zhǔn)WebSocket的即時(shí)通訊庫(kù):- 1)超輕量級(jí)、極少依賴;
- 2)純JS編寫、高度提煉,簡(jiǎn)單易用;
- 3)基于標(biāo)準(zhǔn)WebSocket協(xié)議,客戶端兼容性好;
- 4)支持運(yùn)行于iOS、Android等移動(dòng)端瀏覽器和各種PC端瀏覽器;
- 5)能與 MobileIMSDK(Github托管鏈接)的各種APP原生代碼客戶端完美互通;
- 6)可應(yīng)用于手機(jī)端/PC端的網(wǎng)頁(yè)聊天應(yīng)用、企業(yè)OA、Web端等即時(shí)通訊場(chǎng)景。
二、與MobileIMSDK的關(guān)系
MobileIMSDK-H5端 是基于標(biāo)準(zhǔn)HTML5的WebSocket協(xié)議的 MobileIMSDK配套客戶端庫(kù)。
以下是MobileIMSDK的通信架構(gòu)圖:
MobileIMSDK是一套專為移動(dòng)端開發(fā)的原創(chuàng)開源IM通信層框架:
- 1)歷經(jīng)8年、久經(jīng)考驗(yàn);
- 2)超輕量級(jí)、高度提煉,lib包50KB以內(nèi);
- 3)精心封裝,一套API同時(shí)支持UDP、TCP、WebSocket三種協(xié)議(可能是全網(wǎng)唯一開源的);
- 4)客戶端支持iOS、Android、標(biāo)準(zhǔn)Java、H5(暫未開源)、微信小程序(暫未開源)、Uniapp
(暫未開源);
- 5)服務(wù)端基于Netty,性能卓越、易于擴(kuò)展;
- 6)可與姊妹工程 MobileIMSDK-Web 無(wú)縫互通實(shí)現(xiàn)網(wǎng)頁(yè)端聊天或推送等;
- 7)可應(yīng)用于跨設(shè)備、跨網(wǎng)絡(luò)的聊天APP、企業(yè)OA、消息推送等各種場(chǎng)景。
PS: MobileIMSDK一直在持續(xù)開發(fā)和升級(jí)中,新Uniapp端是MobileIMSDK工程的最新成果。
三、與MobileIMSDK-Web的關(guān)系
MobileIMSDK-Web也是一套純JS編寫的Web端即時(shí)通訊框架(含服務(wù)端)。MobileIMSDK-Web框架與MobileIMSDK-H5端的相同點(diǎn):
- 1)都是Web端即時(shí)通訊框架;
- 2)都是純JS編寫;
- 3)都可以運(yùn)行在手機(jī)、pc端的瀏覽器或web容器內(nèi)。
- 1)MobileIMSDK-Web可以兼容不支持HTML5的舊版瀏覽器或容器,而MobileIMSDK-H5端必須運(yùn)行在當(dāng)前主流的HTML5瀏覽器或容器;
- 2)MobileIMSDK-Web需依賴于socket.io這種第3方通信層庫(kù),而MobileIMSDK-H5端無(wú)任何額外依賴。
- 選擇一:如果您的應(yīng)用必須兼容舊版瀏覽器(包括舊版IE等):
那唯一的選擇就是MobileIMSDK-Web,因?yàn)樗嬖诘闹饕獌r(jià)值就是為了兼容舊版瀏覽器; - 選擇二:如果您的應(yīng)用只需運(yùn)行在現(xiàn)今主流的HTML5瀏覽器或容器:
那么建議您優(yōu)先使用MobileIMSDK的H5端,必竟直接調(diào)用標(biāo)準(zhǔn)HTML5的WebSocket API,要簡(jiǎn)潔、輕量多了,也沒(méi)有第3方依賴。
四、設(shè)計(jì)目標(biāo)
直接使用原生的WebSocket有以下問(wèn)題和劣勢(shì):- 1)功能有限:沒(méi)有提供心跳保活、斷線重連、送達(dá)保證(重傳和去重)等即時(shí)通訊關(guān)鍵算法和邏輯;
- 2)API 簡(jiǎn)陋:在如此有限的標(biāo)準(zhǔn)API下,能邏輯清晰和健壯地實(shí)現(xiàn)并組合心跳保活、斷線重連、送達(dá)保證等算法,需要相當(dāng)高的技術(shù)掌控力;
- 3)邏輯耦合:經(jīng)驗(yàn)欠缺的開發(fā)人員,會(huì)將WebSocket通信代碼與前端UI界面代碼混在一起,使得UI界面的編寫、維護(hù)、改版都非常困難。
總結(jié)一下,MobileIMSDK-H5端庫(kù)的設(shè)計(jì)目標(biāo)是為您的Web端IM帶來(lái)以下便利:
- 1)前端與通信解偶:前端UI與網(wǎng)絡(luò)通信代碼解耦,UI界面的重構(gòu)、維護(hù)、改版都非常容易和優(yōu)雅;
- 2)輕量級(jí)和兼容性:受益于標(biāo)準(zhǔn)WebSocket,可很好地運(yùn)行于現(xiàn)今主流的H5瀏覽器上,且無(wú)需額外依賴;
- 3)核心內(nèi)聚和收斂:得益于長(zhǎng)期的提煉和經(jīng)驗(yàn)積累,SDK核心層高度封裝,開發(fā)者無(wú)需理解復(fù)雜算法即可簡(jiǎn)單上手。
- 4)純JS輕量級(jí)實(shí)現(xiàn):純JS編寫,無(wú)Angular、EmberJS、VUE等各種重量級(jí)前端框架依賴,方便對(duì)接各種既有系統(tǒng);
五、技術(shù)亮點(diǎn)
- 1)輕量易使用:超輕量級(jí)——純JS編寫且極少依賴,高度提煉——簡(jiǎn)單易用;
- 2)兼容性很好:基于標(biāo)準(zhǔn)WebSocket,可很好地運(yùn)行于現(xiàn)今主流的H5瀏覽器上,且無(wú)需額外依賴;
- 3)斷網(wǎng)恢復(fù)能力:擁有網(wǎng)絡(luò)狀況自動(dòng)檢測(cè)、斷網(wǎng)自動(dòng)治愈的能力;
- 4)送達(dá)保證機(jī)制:完善的QoS消息送達(dá)保證機(jī)制(自動(dòng)重傳、消息去重、狀態(tài)反饋等),不漏過(guò)每一條消息;
- 5)支持多種設(shè)備:支持運(yùn)行于iOS、Android等移動(dòng)端瀏覽器和各種PC端瀏覽器;
- 6)通信協(xié)議封裝:實(shí)現(xiàn)了一個(gè)對(duì)上層透明的即時(shí)通訊通信協(xié)議模型;
- 7)身份認(rèn)證機(jī)制:實(shí)現(xiàn)了簡(jiǎn)單合理的身份認(rèn)證機(jī)制;
- 8)完善的log信息:在開發(fā)調(diào)試階段,確保每一個(gè)算法關(guān)鍵步驟都有日志輸出,讓您的運(yùn)行調(diào)試更為便利;
- 9)前端代碼解耦:實(shí)現(xiàn)了UI前端代碼與sdk網(wǎng)絡(luò)通信代碼解偶,防止前端代碼跟IM核心代碼混在一起,不利于持續(xù)升級(jí)、重用和維護(hù);
- 10)多端協(xié)議兼容:實(shí)現(xiàn)了與MobileIMSDK各APP端完全兼容的協(xié)議模型;
六、文件組成
SDK代碼文件概覽:
SDK代碼文件用途說(shuō)明:
七、Demo功能預(yù)覽和說(shuō)明
八、Demo運(yùn)行效果實(shí)拍圖
1)Demo在手機(jī)端瀏覽器中的真機(jī)實(shí)拍圖:
2)Demo在電腦端瀏覽器中的真機(jī)實(shí)拍圖:
八、更多Demo運(yùn)行效果截圖
1)Demo在PC端瀏覽器運(yùn)行效果:

3)Demo在PC端主流瀏覽器的運(yùn)行效果(點(diǎn)擊可看大圖 ▼):
十、詳盡開發(fā)者手冊(cè)
① MobileIMSDK-H5端的詳細(xì)介紹:點(diǎn)此查看 ??② MobileIMSDK-H5端的開發(fā)手冊(cè)(網(wǎng)頁(yè)版):點(diǎn)此查看 ??
③ MobileIMSDK-H5端的開發(fā)手冊(cè)(精編PDF版):點(diǎn)此查看 ?? (* 推薦)
④ MobileIMSDK-開源框架的詳細(xì)介紹:https://gitee.com/jackjiang/MobileIMSDK (Github托管鏈接)??
十一、相關(guān)資料
[1] HTML5 WebSocket API 文檔[2] MobileIMSDK開源框架的API文檔
[3] MobileIMSDK開源IM框架源碼(Github地址點(diǎn)此)
[4] MobileIMSDK-Web框架基礎(chǔ)介紹
作者:Jack Jiang (點(diǎn)擊作者姓名進(jìn)入Github)
出處:http://www.52im.net/space-uid-1.html
交流:歡迎加入即時(shí)通訊開發(fā)交流群 215891622
討論:http://www.52im.net/
Jack Jiang同時(shí)是【原創(chuàng)Java
Swing外觀工程BeautyEye】和【輕量級(jí)移動(dòng)端即時(shí)通訊框架MobileIMSDK】的作者,可前往下載交流。
本博文
歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明出處(也可前往 我的52im.net 找到我)。