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