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

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