轻量级Web端IM即时通讯框架MobileIMSDK-Web，基于Socket.io库

⭐️ 同步开源地址：

一、基本介绍

MobileIMSDK-Web是一套纯JS编写的Web端IM即时通讯框架(含服务端)：

• 1）超轻量级、极少依赖；
• 2）纯JS编写、高度提炼，简单易用；
• 3）基于著名的socket.io网络库实现，浏览器兼容性好、服务端并发性能好；
• 4）支持运行于iOS、Android等移动端浏览器和各种PC端浏览器；
• 5）能与MobileIMSDK的APP版（原生移动端代码编写）完美互通；
• 6）可应用于手机端/PC端的网页聊天应用、企业OA、Web端消息推送等场景。

☞ 补充说明：MobileIMSDK-Web是MobileIMSDK的姊妹工程，MobileIMSDK-Web专注于Web端网页聊天（或推送），而MobileIMSDK用于原生代码编写的移动端IM（或推送）应用，但二者可完美互通——从而实现原生代码编写的移动端与基于html的网页聊天完美互通。

☞关于为何使用的是Socket.io而不是Netty作为MobileIMSDK-Web的网络层，详见：《MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty？》。

二、与MobileIMSDK的区别

☞ 关于MobileIMSDK：

MobileIMSDK主要使用原生代码编写，应用于非Web网页方式的移动端即时通讯场景下（当然最新的MobileIMSDK框架也支持基于HTML5的WebSocket客户端）。

• ❶GitHub：https://github.com/JackJiang2011/MobileIMSDK
• ❷码云gitee：https://gitee.com/jackjiang/MobileIMSDK
• ❸Gitcode：https://gitcode.com/hellojackjiang2011/MobileIMSDK

☞ 关于MobileIMSDK-Web：
MobileIMSDK-Web完全使用JavaScript编写，主要应用于不支持HTML5的需要兼容旧式浏览器的Web网页方式的即时通讯场景下（包括但不限于手机端、PC端的网页聊天（或消息推送）等）。

☞ MobileIMSDK与MobileIMSDK-Web的互通：

基于MobileIMSDK-Web开发的开发的网页聊天等和基于MobileIMSDK开发的移动端IM等可以无缝地进行消息互通，两个框架之间的通信协议完全兼容，从而实现您的网页聊天（或推送）与手机端原生代码开发的IM（或推送）进行完美协作，实现多端通信。

☞ 我该如何选择？

选择一：如果您的应用是用原生代码编写，如移动端是原生代码编写或者不需要兼容旧式浏览器，那么您可以将MobileIMSDK引入到您的项目中从而实现IM（或推送）应用；

选择二：如果您的应用是基于Web网页且需要兼容旧式浏览器，那么您的最佳选择就是使用MobileIMSDK-Web来开发您的网页端聊天（或消息推送）。

三、设计目标

原生的WebSocket代码或者原始的socket.io代码，使得网络通信代码与大量前端UI界面代码混在一起，使得UI界面的重构、维护、改版都非常困难。而MobileIMSDK-Web工程将让开发者专注于UI应用层的开发，网络通信层专业的代码交由SDK开发人员，从而解偶Web端IM的UI前端和通信层的耦合性，同时大大降低复杂性。
总结一下，MobileIMSDK-Web的设计目标是为您的Web端IM带来以下便利：

• 1）前端UI代码与网络通信代码解耦：UI界面的重构、维护、改版都非常容易和优雅；
• 2）服务端网络通信代码与业务代码解耦：使得服务端的业务逻辑实现起来清晰简单；
• 3）浏览器端的高兼容性：受益于socket.io框架，MobileIMSDK-Web在不支持WebSocket的旧式浏览器上仍可很好地工作；
• 4）服务端的高并发、高性能：得益于Nodejs的异步编程模型和高并发特性，基于MobileIMSDK-Web编写的IM服务端拥有极高的并发处理性能。

四、框架组成

整套MobileIMSDK-Web框架由以下2部分组成：

• 1）浏览器端SDK：用于开发浏览器端页面，纯JS编写，极少依赖，方便对接基于原生JS、Angular、EmberJS、VUE等各种前端框架；
• 2）服务器端SDK：用于开发Web端IM的服务端，支持高性能和高并发。

五、技术亮点

• ✅️ 轻量易使用：超轻量级——纯JS编写且极少依赖，高度提炼——简单易用；
• ✅️ 兼容性好：基于socket.io网络框架，浏览器兼容性好，在不支持WebSocket的旧式浏览器上仍可很好地工作；
• ✅️ QoS机制：完善的消息送达保证机制（真正ACK应答机制），确保不漏过每一条消息；
• ✅️ 断网恢复能力：拥有网络状况自动检测、断网自动治愈的能力；
• ✅️ 支持多种设备：支持运行于iOS、Android等移动端浏览器和各种PC端浏览器；
• ✅️ 封装的通信协议：实现了一个对上层透明的即时通讯通信协议模型；
• ✅️ 身份认证机制：实现了简单合理的身份认证机制（socket.io官方并未实现之，资料也几乎没有）；
• ✅️ 全消息路径：实现了client to server、server to client、client to client 共3种消息路径（socket.io官方只演示了广播消息，一对一发送无资料）；
• ✅️ 服务端慢io解偶：开发者可通过使用MQ进行DB等慢io的读、写解偶，保证IM实时消息高吞吐和性能；
• ✅️ 服务端代码解偶：实现了上层应用代码与sdk核心代码的解偶，上线、下线、c2s消息、c2c消息、身份认证等的回调通知；
• ✅️ 实现了在线列表：服务端实现了一个高性能的在线用户列表机制；
• ✅️ 完善的log记录：服务端接入了log4js日志框架，确保MobileIMSDK-Web中的每一个关键步骤都有日志输出，让您的运行调试更为便利；
• ✅️ 浏览器端代码解耦：实现了UI前端代码与sdk网络通信代码解偶，防止前端代码跟IM核心代码混在一起，不利于持续升级、重用和维护；
• ✅️ 轻松开启数据加密：一个参数即可开启SSL/TLS通信加密；
• ✅️ 聊天协议兼容：实现了与MobileIMSDK完全兼容的协议模型。

MobileIMSDK-Web的浏览器兼容性：

（☞MobileIMSDK-Web的兼容性由socket.io网络框架决定：点此查看兼容性说明）

六、性能负载

得益于socket.io网络框架的高性能和Nodejs的异步编程模型，MobileIMSDK-Web可支持单机数万甚至上十万并发连接。当然，每种应用场景都有各自的特点和差异，请视具体场景具体评估之，性能数据仅供参考。（关于为何使用的是Socket.io而不是Netty作为MobileIMSDK-Web的网络层，详见《MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty？》）
☞ socket.io性能测试讨论：socket.io 高并发实战、socket.io保持6万+连接测试？、如何实现单服务器300万个长连接的？。

七、开发者手册

八、Demo运行截图

九、产品案例

以下为基于MobileIMSDK-Web的Web端IM产品案例RainbowChat-Web的产品情况。

下图为RainbowChat-Web的主界面（更多截图、更多演示视频）：

下图为RainbowChat-Web的主界面[聊天窗全屏时]（更多截图、更多演示视频）：

（本文内容引用自：http://www.52im.net/thread-959-1-1.html）