轻量级Web端即时通讯框架：MobileIMSDK-Web基本介绍

最新动态

❶ 基于MobileIMSDK-Web的全功能Web端IM产品RainbowChat-Web的v3.0版 已经发布（详见版本更新说明）。
❷ MobileIMSDK-Web工程的v4.0版 已经发布（详见更新说明），提供基于Socket.io v2和v3两个版本。

► 推荐案例：基于MobileIMSDK-Web的RainbowChat-Web产品截图：

▲ 本图引用自《RainbowChat-Web产品运行截图》（更多截图点此进入、更多演示视频点此进入）

► 更多RainbowChat-Web介绍资料：

• ① RainbowChat-Web详细介绍：点击进入
• ② RainbowChat-Web产品截图：点击进入 （* 推荐）
• ③ RainbowChat-Web演示视频：点击进入 （* 推荐）
• ④ RainbowChat-Web技术转让：点击进入
• ⑤ RainbowChat-Web淘宝链接：点击进入
  

技术准备

► 如您对Web端即时通讯技术尚不了解：点此进入
► 关于MobileIMSDK-Web为何使用的是Socket.io而不是Netty：点此进入
► MobileIMSDK-Web的最新版本更新动态：点此进入

一、支持作者

付费捐助的存在，是作者目前为数不多的物质支撑，如果您希望 MobileIMSDK-Web 系列能够持续发展下去，并使得您的项目能够得到它持久的回馈，您的任何一笔捐助都意义非凡。Jack Jiang依托即时通讯网长期提供即时通讯技术的分享和传播，这里的技术资源和技术支持毫无疑问是您能找到的最低成本且是最优质的，您的支持是我们继续下去的动力！

捐助作者得 MobileIMSDK-Web 精篇源码和精编资料：

资源名称	包含内容	捐助金额	捐助方式	发货方式	专享技术支持
<精篇源码>	• 1、SDK精编注释源码 • 2、简明Demo源码	399 元	淘宝链接	付款后发货	1、VIP技术群 2、论坛讨论区 3、一对一交流、永久免费升级
<手册教程>	• 1、详尽开发者指南（共22页） • 2、赠送视频教程（时长44分钟）	149 元	淘宝链接	付款后发货

   
taobao.com/item.htm?id=621500349058        taobao.com/item.htm?id=556718940694

二、基本介绍

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

• 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网页方式的移动端即时通讯场景下，详细介绍请见：http://www.52im.net/thread-52-1-1.html。

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

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

我该如何选择？

• 选择一：如果您的应用是用原生代码编写：
  如iOS是用Objective-C编写、Android是用Java编写等，那么您可以将MobileIMSDK引入到您的项目中从而实现原生代码级的IM（或推送）应用；
• 选择二：如果您的应用是基于Web网页实现的：
  那么您的最佳选择就是使用MobileIMSDK-Web来开发您的网页端聊天（或消息推送）。
  

四、源码和手册获取

MobileIMSDK-Web工程目前没有开源，您可通过淘宝链接捐助作者的方式获取（同时您也将立即获得作者的专享技术支持），详见文首“支持作者”部分，感谢您的理解与支持。

或者直接点击以下链接：

• 1）精篇源码：SDK精编注释源码+简明Demo源码（付款后自动发货到您的关联邮箱，无需人工干预）；
• 2）手册指南：详尽开发者指南（共22页）+[附送]开发者视频教程（时长44分钟）（付款后自动发货到您的邮箱，无需人工干预）。
  

五、设计目标

原生的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服务端拥有极高的并发处理性能。
  

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

六、框架组成

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

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

七、技术亮点

• 轻量易使用：超轻量级——纯JS编写且极少依赖，高度提炼——简单易用；
• 兼容性好：基于socket.io网络框架，浏览器兼容性好，在不支持WebSocket的旧式浏览器上仍可很好地工作；
• 断网恢复能力：拥有网络状况自动检测、断网自动治愈的能力；
• 支持多种设备：支持运行于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-APP版完全兼容的协议模型；
• 消息收发互通：实现了与MobileIMSDK-APP版的无缝消息互通。
  

MobileIMSDK-Web的浏览器兼容性：

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

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

八、性能负载

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

socket.io性能测试讨论：socket.io 高并发实战、socket.io保持6万+连接测试？、如何实现单服务器300万个长连接的？。

九、授权方式

授权方法：
完成捐助后，你即可永久自由地使用MobileIMSDK-Web（包括后绪永久免费提供升级版），无需单独授权，如：用于研究、学习、甚至商业用途。MobileIMSDK-Web为著作权作品，未经作者授权不可对MobileIMSDK-Web本身进行二次出售（但基于此进行的后续演进和开发成果由您自行独享），请尊重知识产权。

版本升级：
精编注释版可永久免费获取最新版本，作者承诺在捐助者索取最新版本时，提供优先交付的保证。（另请参见《MobileIMSDK-Web 版本更新日志（本贴持续更新...）》）

获取授权书：
如您确实需要单独的正式授权书，请联系作者即可。授权书电子版(盖章有效)将发到您的指定邮箱，如还需寄送纸质授权书(盖章有效)则请补上邮费即可（快递收多少就是多少，无需多付）。

著作权证书：


补充说明：如需获得更多技术支持或技术合作请联系作者，QQ：413980957。

十、联系方式

• 讨论学习和资料区：点击进入；
• 即时通讯网VIP群：200090696 （更多QQ群点此进入）；
• bug和建议请发贴：点击进入；
• 技术支持、技术合作或咨询请联系作者QQ：413980957。
  

      

十一、Demo运行视频

▶ 以下为PC端运行实拍视频（新窗口中打开此视频）：

（限于视频时长，无法深入演示全部，如有疑问请联系Jack Jiang！另：为方便录制，视频中Win10为虚拟机中运行，真机会很流畅！）

十二、Demo运行截图

1）MobileIMSDK-Web Demo在PC端浏览器运行效果：


2）MobileIMSDK-Web Demo在手机端浏览器运行效果（点击可看大图 ▼）：


3）MobileIMSDK-Web Demo在PC端主流浏览器的运行效果（点击可看大图 ▼）：

案例1：某商业客服系统部分截图

下图为某云客服产品IM子系统-Web版访客端：


下图为某云客服产品IM子系统-Web版客服后台端：

案例2：IM产品RainbowChat-Web运行截图

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


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

附录1：开发手册和视频教程

1）开发者手册预览全图：（手册详情点此进入）


2）视频教程部分截图：（视频详情点此进入）

❶ MobileIMSDK-Web工程的v3.4版 已经发布（详见版本更新说明），如有需要，可联系Jack Jiang。
❷ 基于MobileIMSDK-Web的全功能Web端IM产品RainbowChat-Web已经发布，如有需要，可联系Jack Jiang。

呵呵哒。

学习学习

终于出来了。看看能不能替换我用的底层

支持下~

支持下

高科技项目哦!

刚入手新人

赞

支持下

能否支持群聊？

引用：juneshen 发表于 2017-11-15 10:12
能否支持群聊？

群聊从技术上说就是单聊的循环发送，自已按照自已系统的性能目标实现一下即可。

赞

赞一个

支持支持支持支持

不错啊，学习了

MobileIMSDK-Web的服务端也是有两个版本吗？netty和mina？

引用：ROBINCHEN 发表于 2018-03-16 09:48
MobileIMSDK-Web的服务端也是有两个版本吗？netty和mina？

MobileIMSDK-Web的网络层框架是基于Nodejs的Socket.io开源工程的，至于为何使用Socket.io，请见我写的详细文章：
《MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty？》

引用：JackJiang 发表于 2018-03-16 10:02
MobileIMSDK-Web的网络层框架是基于Nodejs的Socket.io开源工程的，至于为何使用Socket.io，请见我写的详 ...

抱歉，没认真看

不错不错， 学习了， 赞一个