一、關(guān)于RainbowChat-Web

RainbowChat-Web是一套Web網(wǎng)頁(yè)端IM系統(tǒng)，是RainbowChat的姊妹系統(tǒng)（RainbowChat是一套基于開源IM聊天框架 MobileIMSDK (Github地址)  的產(chǎn)品級(jí)移動(dòng)端IM系統(tǒng)）。

關(guān)于RainbowChat

RainbowChat是一套基于開源IM聊天框架 MobileIMSDK 的產(chǎn)品級(jí)移動(dòng)端IM系統(tǒng)。RainbowChat源于真實(shí)運(yùn)營(yíng)的產(chǎn)品，解決了大量的屏幕適配、細(xì)節(jié)優(yōu)化、機(jī)器兼容問題（可自行下載體驗(yàn)：專業(yè)版下載安裝）。

* RainbowChat可能是市面上提供im即時(shí)通訊聊天源碼的，唯一一款同時(shí)支持TCP、UDP兩種通信協(xié)議的IM產(chǎn)品（通信層基于開源IM聊天框架  MobileIMSDK 實(shí)現(xiàn)）。

► 詳細(xì)產(chǎn)品介紹：http://www.52im.net/thread-19-1-1.html
► 版本更新記錄：http://www.52im.net/thread-1217-1-1.html
► 全部運(yùn)行截圖：Android端、iOS端
► 在線體驗(yàn)下載：專業(yè)版(TCP協(xié)議)、專業(yè)版(UDP協(xié)議)      （關(guān)于 iOS 端，請(qǐng)：點(diǎn)此查看）

關(guān)于MobileIMSDK

MobileIMSDK 是一套專門為移動(dòng)端開發(fā)的開源IM即時(shí)通訊框架，超輕量級(jí)、高度提煉，一套API優(yōu)雅支持UDP 、TCP 、WebSocket 三種協(xié)議，支持iOS、Android、H5、小程序、Uniapp、標(biāo)準(zhǔn)Java平臺(tái)，服務(wù)端基于Netty編寫。

工程開源地址：

• 1）Gitee碼云地址：https://gitee.com/jackjiang/MobileIMSDK
• 2）Github托管地址：https://github.com/JackJiang2011/MobileIMSDK

v11.7 版更新內(nèi)容

此版更新內(nèi)容（更多歷史更新日志）：

（1）Android端主要更新內(nèi)容：

• 1）[優(yōu)化] 優(yōu)化了首頁(yè)“消息”列表中單聊類型未正確同步時(shí)的收發(fā)消息和點(diǎn)擊后的處理邏輯；
• 2）[優(yōu)化] 優(yōu)化了首頁(yè)“消息”列表中同一好友和陌生人會(huì)話不能自動(dòng)合并的問題；

（2）服務(wù)端主要更新內(nèi)容：

• 1）[優(yōu)化] 大幅提升群聊性能（改進(jìn)離線消息存儲(chǔ)方式等：異步提交、批量處理）；
• 2）[優(yōu)化] 升級(jí)了mysql驅(qū)動(dòng)至最新版8.4.0；
• 3）[優(yōu)化] 優(yōu)化了離線消息處理性能（異步化、無(wú)鎖隊(duì)列、批量處理、事務(wù)合并）；
• 4）[優(yōu)化] 優(yōu)化了聊天記錄處理性能（異步化、無(wú)鎖隊(duì)列、批量處理、事務(wù)合并）；
• 5）[優(yōu)化] 優(yōu)化了“接口1008-26-8”，使得與Web產(chǎn)品聯(lián)合部署明web前端按時(shí)間戳加載的消息不與客戶端發(fā)生重復(fù)；
• 6）[優(yōu)化] 修改了離線消息、聊天記錄異步定時(shí)器實(shí)現(xiàn)，使之運(yùn)行更健壯；
• 7）[優(yōu)化] 加好友成功后將成功通知保存至離線消息和消息記錄。

部分功能運(yùn)行截圖（更多截圖點(diǎn)此查看）：

► 相關(guān)鏈接：

• ① MobileIMSDK-H5端的詳細(xì)介紹
• ② MobileIMSDK-H5端的開發(fā)手冊(cè)new（* 精編PDF版）

一、技術(shù)準(zhǔn)備

您是否已對(duì)Web端即時(shí)通訊技術(shù)有所了解？

• 1）新手入門貼：史上最全Web端即時(shí)通訊技術(shù)原理詳解
• 2）Web端即時(shí)通訊技術(shù)盤點(diǎn)：短輪詢、Comet、Websocket、SSE

您需要對(duì)WebSocket技術(shù)有所了解：

• 1）新手快速入門：WebSocket簡(jiǎn)明教程
• 2）WebSocket詳解（一）：初步認(rèn)識(shí)WebSocket技術(shù)
• 3）WebSocket從入門到精通，半小時(shí)就夠！
• 4）從零理解WebSocket的通信原理、協(xié)議格式、安全性

WebSocket標(biāo)準(zhǔn)文檔、API手冊(cè)：

• 1）WebSocket的API手冊(cè)
• 2）WebSocket的標(biāo)準(zhǔn)文檔

二、開發(fā)工具準(zhǔn)備

1）WebStorm：

（JackJiang 使用的版本號(hào)如上圖所示，建議你也使用此版或較新版本）

2）一站式下載地址：WebStorm官方下載地址點(diǎn)此進(jìn)入。

三、工程文件用途說(shuō)明

3.1文件概覽

純?cè)鶭S實(shí)現(xiàn)，無(wú)任何重框架依賴：

MobileIMSDK-H5端SDK本身只是JS文件源碼的集合，本工程中自帶的前端Demo的目的只是為了方便隨時(shí)測(cè)試MobileIMSDK-H5端的SDK代碼而已，在此工程中的使用也僅僅只涉及了一個(gè)主Demo頁(yè)面而已。

工程目錄說(shuō)明：

3.2詳細(xì)說(shuō)明

SDK 各模塊/文件作用說(shuō)明：

四、主要 API 接口

4.1主要 API 接口概覽

如下圖所示：所有 SDK 接口均由/mobileimsdk/mobileimsdk-client-sdk.js 提供。，接口設(shè)計(jì)跟MobileIMSDK 的APP版一樣，均為高內(nèi)聚和低侵入的回調(diào)方式傳入SDK處理邏輯，無(wú)需（也不建議）開發(fā)者直接修改sdk級(jí)代碼。

▲ 圖上為瀏覽器端SDK的對(duì)外接口文件位置

▲ 圖上為瀏覽器SDK為開發(fā)者提供的回調(diào)接口

▲ 圖上瀏覽器端SDK的對(duì)外接口文件全圖

4.2主要 API 接口用途說(shuō)明

1）IMSDK.isLogined()：

• 用途：是否已經(jīng)完成過首次登陸。
• 說(shuō)明 ：用戶一旦從自已的應(yīng)用中完成登陸IM服務(wù)器后，本方法就會(huì)一直返回true（直到退出登陸IM）。
• 返回值：{boolean}，true表示已完成首次成功登陸（即已經(jīng)成功登陸過IM服務(wù)端了，后面掉線時(shí)不影響此標(biāo)識(shí)），否則表示尚未連接IM服務(wù)器。

2）IMSDK.isOnline()：

• 用途：是否在線。
• 說(shuō)明 ：表示網(wǎng)絡(luò)連接是否正常。
• 返回值：{boolean}，true表示網(wǎng)絡(luò)連接正常，否則表示已掉線，本字段只在this._logined=true時(shí)有意義（如果都沒有登陸到IM服務(wù)器，怎么存在在線或掉線的概念呢）。

3）IMSDK.getLoginInfo()：

• 用途：返回登陸時(shí)提交的登陸信息（用戶名、密碼/token等）。
• 說(shuō)明 ：格式形如：{loginUserId:'',loginToken:''}，此返回值的內(nèi)容由調(diào)用登陸函數(shù) loginImpl()時(shí)傳入的內(nèi)容決定。字段定義詳見：PLoginInfo
• 返回值：{boolean}，true表示網(wǎng)絡(luò)連接正常，否則表示已掉線，本字段只在this._logined=true時(shí)有意義（如果都沒有登陸到IM服務(wù)器，怎么存在在線或掉線的概念呢）。

4）IMSDK.sendData(p, fnSucess, fnFail, fnComplete)：

• 用途：向某人發(fā)送一條消息。
• 參數(shù)p：{Protocal} 要發(fā)送的消息協(xié)議包對(duì)象，Protocal詳情請(qǐng)見“/module/mb_constants.js”下的createCommonData函數(shù)說(shuō)明。
• 返回值：{int} 0表示成功，否則表示錯(cuò)誤碼，錯(cuò)碼詳見“/module/mb_constants.js”下的MBErrorCode對(duì)象屬性說(shuō)明。

5）IMSDK.disconnectSocket()：

• 用途：客戶端主動(dòng)斷開客戶端socket連接。
• 說(shuō)明 ：當(dāng)開發(fā)者登陸IM后，需要退出登陸時(shí)，調(diào)用本函數(shù)就對(duì)了，本函數(shù)相當(dāng)于登陸函數(shù) loginImpl()的逆操作。

6）IMSDK.setDebugCoreEnable(enable)：

• 用途：是否開啟MobileIMSDK-H5端核心算法層的log輸入，方便開發(fā)者調(diào)試。
• 參數(shù)enable ：{boolean} true表示開啟log輸出，否則不輸出，開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false（即不輸出log）。

7）IMSDK.setDebugSDKEnable(enable)：

• 用途：是否開啟MobileIMSDK-H5端框架層的log輸入，方便開發(fā)者調(diào)試。
• 參數(shù)enable ：{boolean} true表示開啟log輸出，否則不輸出，開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false（即不輸出log）。

8）IMSDK.setDebugPingPongEnable(enable)：

• 用途：是否開啟MobileIMSDK-H5端框架層的底層網(wǎng)絡(luò)WebSocket心跳包的log輸出，方便開發(fā)者調(diào)試。
• 參數(shù)enable ：{boolean} true表示開啟log輸出，否則不輸出，開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false（即不輸出log）。
• 注意：必須 setDebugEnable(true) 且 setDebugPingPongEnable(true) 時(shí)，心跳log才會(huì)真正輸出，方便控制。
• 返回值：true表示開啟log輸出，否則不輸出，開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false（即不輸出log）。

9）IMSDK.loginImpl(varloginInfo, wsUrl)：

• 用途：登陸/連接MobileIMSDK服務(wù)器時(shí)調(diào)用的方法。
• 說(shuō)明 ：登陸/連接MobileIMSDK服務(wù)器由本函數(shù)發(fā)起
• 參數(shù)varloginInfo：{PLoginInfo} 必填項(xiàng)，登陸要提交給Websocket服務(wù)器的認(rèn)證信息，不可為空，對(duì)象字段定義見：PLoginInfo
• 參數(shù)wsUrl：{string} 必填項(xiàng)：要連接的Websocket服務(wù)器地址，不可為空，形如：wss://yousite.net:3000/websocket。

10）IMSDK.callback_onIMLog(message, toConsole)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：用于debug的log輸出。
• 推薦用法 ：開發(fā)者可在此回調(diào)中按照自已的意圖打印MobileIMSDK微信小程序端框架中的log，方便調(diào)試時(shí)使用。
• 參數(shù)1： {String}：必填項(xiàng)，字符串類型，表示log內(nèi)容。
• 參數(shù)2： {boolean}：選填項(xiàng)，true表示輸出到console，否則默認(rèn)方式(由開發(fā)者設(shè)置的回調(diào)決定)。

11）IMSDK.callback_onIMData(p, options)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：用于收到聊天消息時(shí)在UI上展現(xiàn)出來(lái)（事件通知于收到IM消息時(shí)）。
• 推薦用法：開發(fā)者可在此回調(diào)中處理收到的各種IM消息。
• 參數(shù)1： {Protocal}：詳情請(qǐng)見“/module/mb_constants.js”下的Protocal類定義)。

12）IMSDK.callback_onIMAfterLoginSucess()：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：客戶端的登陸請(qǐng)求被服務(wù)端成功認(rèn)證完成后的回調(diào)（事件通知于 登陸/認(rèn)證 成功后）。
• 推薦用法 ：開發(fā)者可在此回調(diào)中進(jìn)行登陸IM服務(wù)器成功后的處理。

13）IMSDK.callback_onIMAfterLoginFailed(isReconnect)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：客戶端的登陸請(qǐng)求被服務(wù)端認(rèn)證失敗后的回調(diào)（事件通知于 登陸/認(rèn)證 失敗后）。
• 說(shuō)明 ：登陸/認(rèn)證失敗的原因可能是用戶名、密碼等不正確等，但具體邏輯由服務(wù)端的 callBack_checkAuthToken回調(diào)函數(shù)去處理。
• 推薦用法：開發(fā)者可在此回調(diào)中提示用戶登陸IM服務(wù)器失敗。。
• 參數(shù)1： {boolean}：true表示是掉線重連后的認(rèn)證失敗（在登陸其間可能用戶的密碼信息等發(fā)生了變更），否則表示首次登陸時(shí)的認(rèn)證失敗。

14）IMSDK.callback_onIMReconnectSucess()：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：掉線重連成功后的回調(diào)（事件通知于掉線重連成功后）。
• 推薦用法 ：開發(fā)者可在此回調(diào)中處理掉線重連成功后的界面狀態(tài)更新等，比如設(shè)置將界面上的“離線”文字更新成“在線”。

15）IMSDK.callback_onIMDisconnected()：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：網(wǎng)絡(luò)連接已斷開時(shí)的回調(diào)（事件通知于與服務(wù)器的網(wǎng)絡(luò)斷開后）。
• 推薦用法 ：開發(fā)者可在此回調(diào)中處理掉線時(shí)的界面狀態(tài)更新等，比如設(shè)置將界面上的“在線”文字更新成“離線”。

16）IMSDK.callback_onIMPing()：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：本地發(fā)出心跳包后的回調(diào)通知（本回調(diào)并非MobileIMSDK-H5端核心邏輯，開發(fā)者可以不需要實(shí)現(xiàn)！）。
• 推薦用法 ：開發(fā)者可在此回調(diào)中處理底層網(wǎng)絡(luò)的活動(dòng)情況。

17）IMSDK.callback_onIMPong()：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：收到服務(wù)端的心跳包反饋的回調(diào)通知（本回調(diào)并非MobileIMSDK-H5端核心邏輯，開發(fā)者可以不需要實(shí)現(xiàn)！）。
• 推薦用法 ：開發(fā)者可在此回調(diào)中處理底層網(wǎng)絡(luò)的活動(dòng)情況。

18）IMSDK.callback_onIMShowAlert(alertContent)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：框架層的一些提示信息顯示回調(diào)（本回調(diào)并非MobileIMSDK-H5端核心邏輯，開發(fā)者可以不需要實(shí)現(xiàn)！）。
• 說(shuō)明 ：開發(fā)者不設(shè)置的情況下，框架默認(rèn)將調(diào)用wx.showModal()顯示提示信息，否則將使用開發(fā)者設(shè)置的回調(diào)——目的主要是給開發(fā)者自定義這種信息的UI顯示，提升UI體驗(yàn)，別無(wú)它用】。
• 參數(shù)1：{String}：必填項(xiàng)，文本類型，表示提示內(nèi)容。

19）IMSDK.callback_onIMKickout(kickoutInfo)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：收到服務(wù)端的“踢出”指令（本回調(diào)并非MobileIMSDK-H5端核心邏輯，開發(fā)者可以不需要實(shí)現(xiàn)！）。
• 參數(shù)1 ：{PKickoutInfo}：非空，詳見：PKickoutInfo

20）IMSDK.callback_onMessagesLost(lostMessages)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：消息未送達(dá)的回調(diào)事件通知。
• 發(fā)生場(chǎng)景 ：比如用戶剛發(fā)完消息但網(wǎng)絡(luò)已經(jīng)斷掉了的情況下，表現(xiàn)形式如：就像手機(jī)qq或微信一樣消息氣泡邊上會(huì)出現(xiàn)紅色圖標(biāo)以示沒有發(fā)送成功）。
• 建議用途：應(yīng)用層可通過回調(diào)中的指紋特征碼找到原消息并可以UI上將其標(biāo)記為“發(fā)送失敗”以便即時(shí)告之用戶。
• 參數(shù)1：{Array}：由框架的QoS算法判定出來(lái)的未送達(dá)消息列表。

21）IMSDK.callback_onMessagesBeReceived(theFingerPrint)：

• 用途：由開發(fā)者設(shè)置的回調(diào)方法：消息已被對(duì)方收到的回調(diào)事件通知。
• 說(shuō)明 ：目前，判定消息被對(duì)方收到是有兩種可能：1) 對(duì)方確實(shí)是在線并且實(shí)時(shí)收到了；2) 對(duì)方不在線或者服務(wù)端轉(zhuǎn)發(fā)過程中出錯(cuò)了，由服務(wù)端進(jìn)行離線存儲(chǔ)成功后的反饋（此種情況嚴(yán)格來(lái)講不能算是“已被收到”，但對(duì)于應(yīng)用層來(lái)說(shuō)，離線存儲(chǔ)了的消息原則上就是已送達(dá)了的消息：因?yàn)橛脩粝麓蔚顷憰r(shí)肯定能通過HTTP協(xié)議取到）。
• 建議用途：應(yīng)用層可通過回調(diào)中的指紋特征碼找到原消息并可以UI上將其標(biāo)記為“發(fā)送成功”以便即時(shí)告之用戶。
• 參數(shù)1：{String}：已被收到的消息的指紋特征碼（唯一ID），應(yīng)用層可據(jù)此ID找到原先已發(fā)的消息并可在UI是將其標(biāo)記為”已送達(dá)“或”已讀“以便提升用戶體驗(yàn)。

五、前端開發(fā)指南

5.1如何引入SDK文件到您的前端工程中？

很簡(jiǎn)單：只需要將第2節(jié)中提到的SDK所有JS文件復(fù)制到您的Uniapp工程下即可。

SDK內(nèi)容見下圖：

5.2如何在代碼中調(diào)用SDK？

第一步：在你的網(wǎng)頁(yè)中引用SDK的js文件（具體例子詳見Demo中的index.html文件）

第二步：直接在你的JS文件中編寫回調(diào)配置代碼（具體例子詳見Demo中的index.js文件）

第三步：在你的JS文件中調(diào)用IM的登陸方法即可（具體例子詳見Demo中的index.js文件）

注意：上圖中登錄連接的IP地址請(qǐng)?jiān)O(shè)置為您的MobileIMSDK服務(wù)器地址哦。

六、Demo運(yùn)行方法（在WebStorm中直接預(yù)覽）

6.1重要說(shuō)明

特別說(shuō)明：MobileIMSDK的H5端（包括Demo在內(nèi)），全部是靜態(tài)的HTML+JS資源，可以通過WebStorm自帶的HTML頁(yè)面預(yù)覽功能，直接自動(dòng)加載到電腦的瀏覽器中運(yùn)行和預(yù)覽。

6.2預(yù)覽方法

1）在Demo中的index.html文件中，移動(dòng)鼠標(biāo)，會(huì)在右上角出現(xiàn)如下圖所示的浮出菜單：

2）點(diǎn)擊右上角浮出菜單上相應(yīng)的瀏覽器就可以自動(dòng)預(yù)覽了（這里以我電腦上已安裝的Edge瀏覽器為例）：

七、Demo運(yùn)行方法（在Web服務(wù)器中部署并訪問）

7.1重要說(shuō)明

特別說(shuō)明：MobileIMSDK的H5端（包括Demo在內(nèi)），全部是靜態(tài)的HTML+JS資源，對(duì)于服務(wù)端是沒有任何依賴的，只需要保證瀏覽器端能加載到即可，可以把它們放置在Tomcat、Apache、IIS、Nginx等等傳統(tǒng)Web服務(wù)器中即可，無(wú)需任何動(dòng)態(tài)運(yùn)行環(huán)境。

7.2安裝Tomcat

提示：以下Demo的部署，以Java程序員最常用和Tomcat為例（Apache、IIS、Nginx等依此類推）。

Tomcat的安裝就沒什么好說(shuō)的，直接官網(wǎng)下載對(duì)應(yīng)的版本即可：https://tomcat.apache.org/download-90.cgi。

7.3配置要連接的MobileIMSDK服務(wù)器IP

注意：下圖中登陸連接的IP地址請(qǐng)?jiān)O(shè)置為您的MobileIMSDK服務(wù)器地址哦。

友情提示： MobileIMSDK的服務(wù)端該怎么部署就不是本手冊(cè)要討論的內(nèi)容了，你可以參見《即時(shí)通訊框架MobileIMSDK的Demo使用幫助：Server端》。

▲ 配置要連接的服務(wù)器IP（以上代碼詳見demo/index.js 文件）

7.4部署Demo

說(shuō)“部署”有點(diǎn)扯蛋，因?yàn)镈emo（包括SDK）在內(nèi)，全是HTML靜態(tài)內(nèi)容，只需要直接復(fù)制到任何一種Web服務(wù)器即可。

以下是復(fù)制到Tomcat服務(wù)器網(wǎng)頁(yè)目錄后的截圖：

7.5啟動(dòng)Tomcat

提示：本手冊(cè)中僅以啟Tomcat為例，Apache、IIS、Nginx等Web服務(wù)器的啟動(dòng)請(qǐng)自動(dòng)百度。

運(yùn)行startup.bat啟動(dòng)Tomcat：

7.6Demo的運(yùn)行效果預(yù)覽

八、Demo功能預(yù)覽和說(shuō)明

九、Demo運(yùn)行效果實(shí)拍圖

1）Demo在手機(jī)端瀏覽器中的真機(jī)實(shí)拍圖：

2）Demo在電腦端瀏覽器中的真機(jī)實(shí)拍圖：

十、更多Demo運(yùn)行效果截圖

1）Demo在PC端瀏覽器運(yùn)行效果：

2）Demo在手機(jī)端瀏覽器運(yùn)行效果：

3）Demo在PC端各主流瀏覽器的運(yùn)行效果：

十一、常見問題（FAQ）

11.1為什么瀏覽控制臺(tái)下有些log不顯示？

原因是瀏覽器控制臺(tái)下的日志級(jí)別默認(rèn)進(jìn)行了過濾，勾選所有日志級(jí)別，就能看到SDK的詳細(xì)日志輸出了。

勾選所有的日志輸出級(jí)別：

然后就能看到SDK中詳細(xì)的日志輸出了（就像下圖這樣），方便調(diào)試和研究：

十二、引用資料

[1] WebSocket 標(biāo)準(zhǔn)API手冊(cè)

[2] MobileIMSDK開源框架的API文檔

[3] MobileIMSDK開源IM框架源碼（Github地址點(diǎn)此）

[4] MobileIMSDK-H5端基本介紹

[5] MobileIMSDK-H5端的開發(fā)手冊(cè)（* 精編PDF版）

[6] MobileIMSDK的Demo使用幫助：Server端

[7] WebSocket從入門到精通，半小時(shí)就夠！