共计 6455 个字符，预计需要花费 17 分钟才能阅读完成。
► 相干链接：
① MobileIMSDK-H5 端的具体介绍
② MobileIMSDK-H5 端的开发手册 new（* 精编 PDF 版）
一、技术筹备
您是否已对 Web 端即时通讯技术有所理解？
1）新手入门贴：史上最全 Web 端即时通讯技术原理详解
2）Web 端即时通讯技术盘点：短轮询、Comet、Websocket、SSE
您须要对 WebSocket 技术有所理解：
1）老手疾速入门：WebSocket 扼要教程
2）WebSocket 详解（一）：初步意识 WebSocket 技术
3）WebSocket 从入门到精通，半小时就够！
4）从零了解 WebSocket 的通信原理、协定格局、安全性
WebSocket 规范文档、API 手册：
1）WebSocket 的 API 手册
2）WebSocket 的规范文档
二、开发工具筹备
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 从入门到精通，半小时就够！