► 相關鏈接：
一、技術準備
您是否已對Web端即時通訊技術有所了解？
您需要對WebSocket技術有所了解：
WebSocket標準文檔、API手冊：
二、開發工具準備
1）WebStorm：
（JackJiang 使用的版本號如上圖所示，建議你也使用此版或較新版本）
2）一站式下載地址：WebStorm官方下載地址點此進入。
三、工程文件用途說明
3.1文件概覽
純原生JS實現，無任何重框架依賴：
MobileIMSDK-H5端SDK本身只是JS文件源碼的集合，本工程中自帶的前端Demo的目的只是為了方便隨時測試MobileIMSDK-H5端的SDK代碼而已，在此工程中的使用也僅僅只涉及了一個主Demo頁面而已。
工程目錄說明：
3.2詳細說明
SDK 各模塊/文件作用說明：
四、主要 API 接口
4.1主要 API 接口概覽
如下圖所示：所有 SDK 接口均由/mobileimsdk/mobileimsdk-client-sdk.js 提供。，接口設計跟MobileIMSDK 的APP版一樣，均為高內聚和低侵入的回調方式傳入SDK處理邏輯，無需（也不建議）開發者直接修改sdk級代碼。
▲ 圖上為瀏覽器端SDK的對外接口文件位置
▲ 圖上為瀏覽器SDK為開發者提供的回調接口
▲ 圖上瀏覽器端SDK的對外接口文件全圖
4.2主要 API 接口用途說明
1）IMSDK.isLogined()：
- 用途：是否已經完成過首次登陸。
- 說明 ：用戶一旦從自已的應用中完成登陸IM服務器后，本方法就會一直返回true（直到退出登陸IM）。
- 返回值：{boolean}，true表示已完成首次成功登陸（即已經成功登陸過IM服務端了，后面掉線時不影響此標識），否則表示尚未連接IM服務器。
2）IMSDK.isOnline()：
- 用途：是否在線。
- 說明 ：表示網絡連接是否正常。
- 返回值：{boolean}，true表示網絡連接正常，否則表示已掉線，本字段只在this._logined=true時有意義（如果都沒有登陸到IM服務器，怎么存在在線或掉線的概念呢）。
3）IMSDK.getLoginInfo()：
- 用途：返回登陸時提交的登陸信息（用戶名、密碼/token等）。
- 說明 ：格式形如：{loginUserId:'',loginToken:''}，此返回值的內容由調用登陸函數 loginImpl()時傳入的內容決定。字段定義詳見：PLoginInfo
- 返回值：{boolean}，true表示網絡連接正常，否則表示已掉線，本字段只在this._logined=true時有意義（如果都沒有登陸到IM服務器，怎么存在在線或掉線的概念呢）。
4）IMSDK.sendData(p, fnSucess, fnFail, fnComplete)：
- 用途：向某人發送一條消息。
- 參數p：{Protocal} 要發送的消息協議包對象，Protocal詳情請見“/module/mb_constants.js”下的createCommonData函數說明。
- 返回值：{int} 0表示成功，否則表示錯誤碼，錯碼詳見“/module/mb_constants.js”下的MBErrorCode對象屬性說明。
5）IMSDK.disconnectSocket()：
- 用途：客戶端主動斷開客戶端socket連接。
- 說明 ：當開發者登陸IM后，需要退出登陸時，調用本函數就對了，本函數相當于登陸函數 loginImpl()的逆操作。
6）IMSDK.setDebugCoreEnable(enable)：
- 用途：是否開啟MobileIMSDK-Uniapp端核心算法層的log輸入，方便開發者調試。
- 參數enable ：{boolean} true表示開啟log輸出，否則不輸出，開發者不調用本函數的話系統默認是false（即不輸出log）。
7）IMSDK.setDebugSDKEnable(enable)：
- 用途：是否開啟MobileIMSDK-Uniapp端框架層的log輸入，方便開發者調試。
- 參數enable ：{boolean} true表示開啟log輸出，否則不輸出，開發者不調用本函數的話系統默認是false（即不輸出log）。
8）IMSDK.setDebugPingPongEnable(enable)：
- 用途：是否開啟MobileIMSDK-Uniapp端框架層的底層網絡WebSocket心跳包的log輸出，方便開發者調試。
- 參數enable ：{boolean} true表示開啟log輸出，否則不輸出，開發者不調用本函數的話系統默認是false（即不輸出log）。
- 注意：必須 setDebugEnable(true) 且 setDebugPingPongEnable(true) 時，心跳log才會真正輸出，方便控制。
- 返回值：true表示開啟log輸出，否則不輸出，開發者不調用本函數的話系統默認是false（即不輸出log）。
9）IMSDK.loginImpl(varloginInfo, wsUrl)：
- 用途：登陸/連接MobileIMSDK服務器時調用的方法。
- 說明 ：登陸/連接MobileIMSDK服務器由本函數發起
- 參數varloginInfo：{PLoginInfo} 必填項，登陸要提交給Websocket服務器的認證信息，不可為空，對象字段定義見：PLoginInfo
- 參數wsUrl：{string} 必填項：要連接的Websocket服務器地址，不可為空，形如：wss://yousite.net:3000/websocket。
10）IMSDK.callback_onIMLog(message, toConsole)：
- 用途：由開發者設置的回調方法：用于debug的log輸出。
- 推薦用法 ：開發者可在此回調中按照自已的意圖打印MobileIMSDK微信小程序端框架中的log，方便調試時使用。
- 參數1： {String}：必填項，字符串類型，表示log內容。
- 參數2： {boolean}：選填項，true表示輸出到console，否則默認方式(由開發者設置的回調決定)。
11）IMSDK.callback_onIMData(p, options)：
- 用途：由開發者設置的回調方法：用于收到聊天消息時在UI上展現出來（事件通知于收到IM消息時）。
- 推薦用法：開發者可在此回調中處理收到的各種IM消息。
- 參數1： {Protocal}：詳情請見“/module/mb_constants.js”下的Protocal類定義)。
12）IMSDK.callback_onIMAfterLoginSucess()：
- 用途：由開發者設置的回調方法：客戶端的登陸請求被服務端成功認證完成后的回調（事件通知于 登陸/認證 成功后）。
- 推薦用法 ：開發者可在此回調中進行登陸IM服務器成功后的處理。
13）IMSDK.callback_onIMAfterLoginFailed(isReconnect)：
- 用途：由開發者設置的回調方法：客戶端的登陸請求被服務端認證失敗后的回調（事件通知于 登陸/認證 失敗后）。
- 說明 ：補充說明：登陸/認證失敗的原因可能是用戶名、密碼等不正確等，但具體邏輯由服務端的 callBack_checkAuthToken回調函數去處理。
- 推薦用法：開發者可在此回調中提示用戶登陸IM服務器失敗。。
- 參數1： {boolean}：true表示是掉線重連后的認證失敗（在登陸其間可能用戶的密碼信息等發生了變更），否則表示首次登陸時的認證失敗。
14）IMSDK.callback_onIMReconnectSucess()：
- 用途：由開發者設置的回調方法：掉線重連成功后的回調（事件通知于掉線重連成功后）。
- 推薦用法 ：開發者可在此回調中處理掉線重連成功后的界面狀態更新等，比如設置將界面上的“離線”文字更新成“在線”。
15）IMSDK.callback_onIMDisconnected()：
- 用途：由開發者設置的回調方法：網絡連接已斷開時的回調（事件通知于與服務器的網絡斷開后）。
- 推薦用法 ：開發者可在此回調中處理掉線時的界面狀態更新等，比如設置將界面上的“在線”文字更新成“離線”。
16）IMSDK.callback_onIMPing()：
- 用途：由開發者設置的回調方法：本地發出心跳包后的回調通知（本回調并非MobileIMSDK-Uniapp端核心邏輯，開發者可以不需要實現！）。
- 推薦用法 ：開發者可在此回調中處理底層網絡的活動情況。
17）IMSDK.callback_onIMPong()：
- 用途：由開發者設置的回調方法：收到服務端的心跳包反饋的回調通知（本回調并非MobileIMSDK-Uniapp端核心邏輯，開發者可以不需要實現！）。
- 推薦用法 ：開發者可在此回調中處理底層網絡的活動情況。
18）IMSDK.callback_onIMShowAlert(alertContent)：
- 用途：由開發者設置的回調方法：框架層的一些提示信息顯示回調（本回調并非MobileIMSDK-Uniapp端核心邏輯，開發者可以不需要實現！）。
- 說明 ：開發者不設置的情況下，框架默認將調用wx.showModal()顯示提示信息，否則將使用開發者設置的回調——目的主要是給開發者自定義這種信息的UI顯示，提升UI體驗，別無它用】。
- 參數1：{String}：必填項，文本類型，表示提示內容。
19）IMSDK.callback_onIMKickout(kickoutInfo)：
- 用途：由開發者設置的回調方法：收到服務端的“踢出”指令（本回調并非MobileIMSDK-Uniapp端核心邏輯，開發者可以不需要實現！）。
- 參數1 ：{PKickoutInfo}：非空，詳見：PKickoutInfo
20）IMSDK.callback_onMessagesLost(lostMessages)：
- 用途：由開發者設置的回調方法：消息未送達的回調事件通知。
- 發生場景 ：比如用戶剛發完消息但網絡已經斷掉了的情況下，表現形式如：就像手機qq或微信一樣消息氣泡邊上會出現紅色圖標以示沒有發送成功）。
- 建議用途：應用層可通過回調中的指紋特征碼找到原消息并可以UI上將其標記為“發送失敗”以便即時告之用戶。
- 參數1：{Array<rotocal>}：由框架的QoS算法判定出來的未送達消息列表。
21）IMSDK.callback_onMessagesBeReceived(theFingerPrint)：
- 用途：由開發者設置的回調方法：消息已被對方收到的回調事件通知。
- 說明 ：目前，判定消息被對方收到是有兩種可能：
- 1) 對方確實是在線并且實時收到了；
- 2) 對方不在線或者服務端轉發過程中出錯了，由服務端進行離線存儲成功后的反饋（此種情況嚴格來講不能算是“已被收到”，但對于應用層來說，離線存儲了的消息原則上就是已送達了的消息：因為用戶下次登陸時肯定能通過HTTP協議取到）。
- 建議用途：應用層可通過回調中的指紋特征碼找到原消息并可以UI上將其標記為“發送成功”以便即時告之用戶。
- 參數1：{String}：已被收到的消息的指紋特征碼（唯一ID），應用層可據此ID找到原先已發的消息并可在UI是將其標記為”已送達“或”已讀“以便提升用戶體驗。
五、前端開發指南
5.1如何引入SDK文件到您的前端工程中？
很簡單：只需要將第2節中提到的SDK所有JS文件復制到您的Uniapp工程下即可。
SDK內容見下圖：
5.2如何在代碼中調用SDK？
第一步：在你的網頁中引用SDK的js文件（具體例子詳見Demo中的index.html文件）
第二步：直接在你的JS文件中編寫回調配置代碼（具體例子詳見Demo中的index.js文件）
第三步：在你的JS文件中調用IM的登陸方法即可（具體例子詳見Demo中的index.js文件）
注意：上圖中登錄連接的IP地址請設置為您的MobileIMSDK服務器地址哦。
六、Demo運行方法（在WebStorm中直接預覽）
6.1重要說明
特別說明：MobileIMSDK的H5端（包括Demo在內），全部是靜態的HTML+JS資源，可以通過WebStorm自帶的HTML頁面預覽功能，直接自動加載到電腦的瀏覽器中運行和預覽。
6.2預覽方法
1）在Demo中的index.html文件中，移動鼠標，會在右上角出現如下圖所示的浮出菜單：
2）點擊右上角浮出菜單上相應的瀏覽器就可以自動預覽了（這里以我電腦上已安裝的Edge瀏覽器為例）：
七、Demo運行方法（在Web服務器中部署并訪問）
7.1重要說明
特別說明：MobileIMSDK的H5端（包括Demo在內），全部是靜態的HTML+JS資源，對于服務端是沒有任何依賴的，只需要保證瀏覽器端能加載到即可，可以把它們放置在Tomcat、Apache、IIS、Nginx等等傳統Web服務器中即可，無需任何動態運行環境。
7.2安裝Tomcat
提示：以下Demo的部署，以Java程序員最常用和Tomcat為例（Apache、IIS、Nginx等依此類推）。
Tomcat的安裝就沒什么好說的，直接官網下載對應的版本即可：https://tomcat.apache.org/download-90.cgi。
7.3配置要連接的MobileIMSDK服務器IP
注意：下圖中登陸連接的IP地址請設置為您的MobileIMSDK服務器地址哦。
友情提示： MobileIMSDK的服務端該怎么部署就不是本手冊要討論的內容了，你可以參見《即時通訊框架MobileIMSDK的Demo使用幫助：Server端》。
▲ 配置要連接的服務器IP（以上代碼詳見demo/index.js 文件）
7.4部署Demo
說“部署”有點扯蛋，因為Demo（包括SDK）在內，全是HTML靜態內容，只需要直接復制到任何一種Web服務器即可。
以下是復制到Tomcat服務器網頁目錄后的截圖：
7.5啟動Tomcat
提示：本手冊中僅以啟Tomcat為例，Apache、IIS、Nginx等Web服務器的啟動請自動百度。
運行startup.bat啟動Tomcat：
7.6Demo的運行效果預覽
八、Demo功能預覽和說明
九、Demo運行效果實拍圖
1）Demo在手機端瀏覽器中的真機實拍圖：
2）Demo在電腦端瀏覽器中的真機實拍圖：
十、更多Demo運行效果截圖
1）Demo在PC端瀏覽器運行效果：
2）Demo在手機端瀏覽器運行效果：
3）Demo在PC端各主流瀏覽器的運行效果：
十一、常見問題（FAQ）
11.1為什么瀏覽控制臺下有些log不顯示？
原因是瀏覽器控制臺下的日志級別默認進行了過濾，勾選所有日志級別，就能看到SDK的詳細日志輸出了。
勾選所有的日志輸出級別：
然后就能看到SDK中詳細的日志輸出了（就像下圖這樣），方便調試和研究：
十二、引用資料
[1] WebSocket 標準API手冊
[2] MobileIMSDK開源框架的API文檔
[3] MobileIMSDK開源IM框架源碼（Github地址點此）
[4] MobileIMSDK-H5端基本介紹
[5] MobileIMSDK-H5端的開發手冊（* 精編PDF版）
[6] MobileIMSDK的Demo使用幫助：Server端
[7] WebSocket從入門到精通，半小時就夠！