Web版即时通讯/IM系统：RainbowChat-Web基本介绍

1、基本介绍

RainbowChat-Web是一套基于MobileIMSDK-Web的网页端IM系统。不同于市面上某些开源或淘宝售卖的demo级代码，RainbowChat-Web的产品级代码演化自真正运营过的商业产品，其所依赖的通信层核心SDK（即MobileIMSDK-Web）已在数年内经过大量客户及其辐射的最终用户的使用和验证。

RainbowChat-Web为自主知识产权的产品级工程，可方便有Web端全功能IM需求的开发者，能站在既有的成果上直接2次开发，从而快速掌握自主开发全功能Web端IM的能力、加快项目进度、同时降低项目开发的不可控风险。

特别说明：本产品是RainbowChat的姊妹产品。从产品规划上来说，RainbowChat是APP端IM系统产品，RainbowChat-Web（即本产品）是Web端IM系统产品。即RainbowChat和RainbowChat-Web（本产品）是两套系统、两个产品，目的是提供更灵活的选择，因为不是所有人都需要3端（即android\ios\web）同时提供，这样进行产品划分可减去不需要的购买成本。但两者的底层从第一行代码开始就设计为无缝互通，化整为零，开发者的选择可以更加灵活自由。（两个产品的整合互通演示视频：点此进入）

最新动态：RainbowChat-Web v3.1 已发布（详见更新说明）。

2、相关链接

  ① RainbowChat-Web详细介绍：点击进入（* 本文）
  ② RainbowChat-Web产品截图：点击进入
  ③ RainbowChat-Web演示视频：点击进入
  ④ RainbowChat-Web技术转让：点击进入[推荐]
  ⑤ RainbowChat-Web淘宝链接：点击进入
  ⑥ RainbowChat-Web更新日志：点击进入

更多详情，请进入：RainbowChat-Web产品专区。

3、使用技术

Web端IM框架：MobileIMSDK-Web

4、产品优势

RainbowChat-Web与网上找到的免费或开源代码相比，有以下优势：

	网上的代码	RainbowChat-Web
* 自主开发（从核心到应用层，技术可控，绝非开源拼凑）	?	√
* 原创前端UI（网上同类产品几乎都修改自layim界面壳，少有从零打造web im前端的能力）	×	√
* 精编代码（代码精炼，注释完备，绝不炫技）	×	√
* 完全开源（保证100%原始代码，绝无假开源套路，不信？问问别人敢不敢这么说）	×	√
* 丰富的手册	×	√
* 源自运营过的产品（并非Demo，不是萌新团队练手代码）	×	√
* 有问必答的技术支持（论坛、VIP群、一对一）	×	√
* 代码品质保证（不会为了凑功能而堆代码）	×	√
* 持续的升级和永久售后	×	√

▶ 具体技术优势：请见本文“13、技术亮点”一节。

另外，Jack Jiang依托即时通讯网长期提供即时通讯技术的分享和传播，这里的技术资源和技术支持毫无疑问是您能找到的最低成本且是最优质的！

5、技术支持和联系方式

• 讨论学习和资料区：点此进入 ^推荐
• 即时通讯技术交流QQ群：101279154
• 即时通讯网VIP QQ群：200090696 ^推荐
• bug/建议发送至：jb2011@163.com
• 技术培训/转让/合作/咨询等欢迎联系作者 QQ：413980957、微信：hellojackjiang
  

        

6、技术转让和授权方式

实施细则：《RainbowChat-Web 技术转让说明、授权协议书范本》。
补充说明：如果还需了解更多技术细节或解答其他疑问，请联系作者，QQ：413980957、微信：hellojackjiang、邮箱：jack.jiang@52im.net。

7、客户案例（部分）

• 广州水**尘信息科技有限公司
• 成都**创想信息技术有限公司
• 江西中科****医疗科技有限公司
• 南京*石科技股份有限公司
• 哈尔滨*智科技有限公司
• 小牛**（北京）科技有限公司
• 沈阳民航东北**有限公司
• 重庆*云科技有限公司
• 上海**信息产业（集团）有限公司
• 马鞍山**声电子技术有限公司
• 福建省***金融信息服务有限公司
• 青岛中科**科技有限公司
• 山东高速信息**有限公司
• 海南海**网传媒科技有限公司杭州分公司
• 福建**互娱文化集团有限公司
• 南京*酷网络科技有限公司
• 厦门*漫科技有限公司
• 北京**联科技股份有限公司
• 常州美*文化传媒有限公司
• 山东趣*网络科技有限公司
• 北京*互联科技有限公司
• 厦门**互联网络科技有限公司
• 北京中科**科技有限公司
• 北京*真科技股份有限公司
• 成都*途*创科技有限公司
• 东莞市*博网络科技有限公司
• 东莞市*仔电子商务有限公司
• 天津车*家数据信息技术有限公司
• 苏州*石信息技术有限公司
• 杭州*拓科技有限公司
• 上海*赢信息技术有限公司
• 四川**快网络科技有限公司
• 成都*易信息技术有限公司
• *华科技（昆山）有限公司
• 厦门大**贸易有限公司
• 北京捷迅**科技有限公司；
• 上海*旺信息科技有限公司
• 上海*亿信息技术有限公司
• 北京**司特科技有限责任公司
• 上海*君网络科技有限公司
• 厦门*智计算机科技有限公司
• 广州市华*信息科技有限公司
• 南宁*兴网络科技有限公司
• 重庆**智慧医疗科技有限公司
• 郑州*桃科技有限公司
• 上海*智信息科技有限公司
• 四川省成都市*点科技工作室
• 上海*擎软件有限公司
• 杭州*合信息技术有限公司
• 深圳市*硕技术有限公司
• 北京电*技术应用研究所
• 重庆*润科技有限公司
• 北京文**宇科技发展有限公司
• **飞行器科技（深圳）有限公司武汉分公司
• 成都**克斯科技有限公司
• 海南*信达信息技术有限公司
• 深圳市*通科技有限公司
• 杭州*子信息科技有限公司
• 北京*智*英企业策划有限公司
• 武汉**极客软件工程有限公司
• 山东*科信息技术有限公司
• 北京博**英企业策划有限公司
• 武汉码**客软件工程有限公司
• 山东*科信息技术有限公司
• 广西联*科技有限责任公司
• 北京*山科技股份有限公司
• 南京*江科技有限公司
• 大连*途信息技术有限公司
• 江苏*创信息技术有限公司
• 厦门盛**道科技有限公司
• 重庆*未科技有限公司
• 北京有**大软件股份有限公司
• 广西南宁**计算机科技有限公司
• 徐州*酷科技有限公司
• 北京文*信息技术有限公司
• 广州*兴网络科技有限公司
• 济南**信息科技有限公司
• 西安*吧网络科技有限公司
• 山东**信息有限公司
• 中**脉（北京）技术股份有限公司
• 泉州市*顺网络科技有限公司
• 内蒙古蒙**蒙古文化股份有限公司
• 深圳市*源科技有限公司  
  (.....  以上仅部分客户，个人用户因涉隐私也未列出  .....)
  

（因保密原则，以上客户均不具名，且任何涉及客户信息的咨询等均无法提供，感谢你的理解！）

8、品质说明

❶ 源自真正运营的商业产品：
RainbowChat-Web的技术源于真实运营的商业产品。

❷ 它不是个Demo：
不同于市面上某些开源或淘宝售卖的demo级代码，RainbowChat-Web的产品级代码演化自真正运营过的商业产品，其所依赖的通信层核心SDK（即MobileIMSDK-Web）已在数年内经过大量客户及其辐射的最终用户的使用和验证。

❸ 简洁、精炼、优化、原生：
RainbowChat-Web为了尽可能降低2次开发时的上手门槛、兼容性、可读性、可维护性的难度，坚持不依赖任何前端框架（这些框架通常是指AngularJS、VUE、EmberJS、React等），返璞归真，只使用原生JS+HTML+CSS（再无其它复杂性），极大降低开发者的上手难度、兼容成本，达到最简洁、最精炼、最灵活的目标（简洁、简单、回归本质的东西，才能拥最强的生命力）。（注：基于众所周之的开发便利性，RainbowChat-Web的前端也使用了广受欢迎的jQuery库）

截止目前：RainbowChat-Web努力保证在各主流系统、主流浏览器、不同分辨率屏幕上的一致体验，包括但不限于：Chrome、Safari、FireFox、Edge、360浏览器、世界之窗浏览器等▼


▲ 在各种主流浏览器上的运行情况（更多截图点此进入、更多演示视频点此进入）


▲ 超宽屏上的显示情况（更多截图点此进入、更多演示视频点此进入）


▲ 不同系统、不同分辨率屏幕的真机运行情况（更多截图点此进入、更多演示视频点此进入）

9、存在的意义

1用于演示MobileIMSDK-Web开发全功能网页端IM的能力

RainbowChat-Web的即时通讯技术层基于MobileIMSDK-Web，RainbowChat-Web的产品级代码演化自真正运营过的商业产品。可作为MobileIMSDK-Web工程的产品级Web端IM实现参考案例，希望对MobileIMSDK-Web的使用者有所启发。

提示：MobileIMSDK-Web是一套纯JS编写的Web端即时通讯框架(含服务端)。MobileIMSDK-Web适用于各种Web网页方式的即时通讯场景（包括但不限于手机端、PC端的网页聊天（或消息推送）等）。

2RainbowChat-Web可技术转让进行2次开发，大幅降低自主开发网页端IM的风险和难度

RainbowChat-Web在上手门槛、兼容性、可读性、可维护性等方面，都做了很大努力，在我们看来，一套优秀的产品并不只是实现功能这么简单，考虑到开发者的感受，也同样关键！截止目前，RainbowChat-Web努力保证在各主流浏览器上的一致体验。

RainbowChat-Web为自主知识产权的产品级工程，可进行技术转让，以便开发者能站在既有的成果上直接2次开发，从而快速掌握自主开发全功能网页端IM的能力、加快项目进度、同时降低项目开发的不可控风险。技术咨询和合作，欢迎联系作者，支持正规公对公、或个人用户的技术合作（详见《RainbowChat-Web 技术转让说明、授权协议书范本》）。

10、运行演示

❶ 运行截图，详见：《Web版即时通讯/IM系统：RainbowChat-Web前端功能截图》
❷ 演示视频，详见：《Web版即时通讯/IM系统：RainbowChat-Web运行演示视频》

11、功能简介

1、支持文本消息、语音留言消息、图片消息、大文件消息、短视频消息、名片消息、位置消息、消息表情、快捷消息等；
2、支持一对一陌生人聊天模式；
3、支持一对一正式好友聊天模式；
4、支持多对多群聊聊天模式；
5、完善的群组信息管理：建群、退群、解散、转让、邀请、踢人、群公告等；
6、完整的注册、登陆、密码找回等功能闭环；
7、个人中心功能：改基本信息、改个性签名、改头像、改密码等；
8、支持查看个人相册、个人语音介绍；
9、完整的离线消息/指令拉取机制；
10、完整的历史消息/指令存取机制；
11、完整的好友关系管理：查找好友、发出请求、处理请求、删除好友等；
12、以及其它未提及的功能和特性。

12、技术亮点

• 1）轻量易使用：纯原生JS编写，坚持不依赖任何前端框架（这些框架通常是指AngularJS、VUE、EmberJS、React等）；
• 2）模块化设计：所有UI模块、数据逻辑均由独立封装的JS对象管理，代码规范、低耦合，有效防止代码复杂性扩散（整个前端约3万行代码）；
• 3）支持微服务：所有前端数据请求均为AJAX调用，方便您的服务端微服务化改造；
• 4）浏览器跨域：所有AJAX接口均为JSONP实现，百分百支持跨域；
• 5）通信代码解偶：得益于高内聚的MobileIMSDK-Web工程，实现了IM功能逻辑与网络通信的解偶，利于持续升级、重用和维护（这是经验不足的IM产品做不到的）；
• 6）支持WebSocket：并非某些产品中还在使用的过时“长轮询”技术，真正的“即时通讯”；
• 7）网络兼容性好：核心层基于MobileIMSDK-Web技术，在不支持WebSocket的情况下仍可很好地工作；
• 8）断网恢复能力：拥有网络状况自动检测、断网自动治愈的能力；
• 9）轻松支持加密：一个参数即可开启SSL/TLS通信加密；
• 10）服务端慢io解偶：IM实例本身坚持不直接进行DB等慢io的读、写，保证IM实时消息高吞吐和性能；
• 11）服务端逻辑解偶：得益于MobileIMSDK-Web工程，实现了上层逻辑与网络通信核心的解偶，底层数据通信全部通过低偶合的回调通知来实现；
• 12）完善的log记录：服务端使用log4js日志框架，确保每一关键步骤都有日志输出，让您的运行调试更为便利；
• 13）聊天协议兼容：实现了与RainbowChat-APP产品完全兼容的协议模型；
• 14）消息收发互通：实现了与RainbowChat-APP产品的无缝消息互通。
  

13、设计原则

为了更易学习、研究、2次开发，RainbowChat-Web始终遵从：

• 1）极少依赖：绝不存在莫名其妙的多余库引用，复制就能运行（无需辅助构建工具），保持轻量；
• 2）架构简洁：简单直接，坚持原生JS+HTML+CSS，易于学习，能少一个分层则绝不强行炫技；
• 3）不使用任何企业框架：前端坚持不使用AngularJS/VUE/EmberJS/React等、后端也无需使用express/koa/thinkjs/egg等，返璞归真，技术可控；
• 4）简单地就是最好的：始终贯彻简单直接的互联网产品技术理念。
  

14、技术合法性

说明：完全自主产权，全套高质量源码和设计文件，绝无隐藏的第3方依赖（详见《RainbowChat-Web 技术转让说明、授权协议书范本》）。

15、真机运行截图

* 详细截图说明请查看《RainbowChat-Web前端功能截图》。
* 运行演示视频请查看《RainbowChat-Web运行演示视频》。

以下为主要界面截图概览：


▲ 主界面（更多截图点此进入、更多演示视频点此进入）


▲ 主界面(聊天窗全屏时)（更多截图点此进入、更多演示视频点此进入）


▲ 主界面(聊天窗关闭时)（更多截图点此进入、更多演示视频点此进入）

你好，请问我只需要群聊和文件传输功能可以吗

就是在那个web版的demo上增添一个群聊和文件传输功能以及用户列表

引用：天上白玉京 发表于 2019-05-05 08:47
就是在那个web版的demo上增添一个群聊和文件传输功能以及用户列表

功能说起来都很简单，但细细一理，一样都少不了：
1）群聊需要群成员列表吧，列表怎么建立的？群怎么群立的？邀请入群呢？删除成员呢？群怎么解散？群名要改吗？等等
2）文件传输功能：怎么上传呢？指令怎么发送？指令怎么解析？界面UI怎么显示？怎么下载呢？
3）用户列表怎么建立的问题：用户从哪里来的？（注册？）列表成员是互加的还是怎么的。。。

你自已试着从编码的角度仔细想想。。。 就像别人说需要聊天产品一样，我就只需要个聊天而已，然而，再怎么简单，基础功能一样也少不了。。。。。

我需要实现的比较简单，不需要这么复杂。
1关于群聊，就是一个客户发送消息到服务器端，然后其他的客户端都能接受这个消息就可以了
2关于用户列表功能，就是在聊天页面把在登录界面注册过的昵称显示出来，用户断开连接显示用户已下线就可以。
3文件传输功能的话，就是客户端能一对一传输文件，现在我能把文件传输到服务器端（网上有不少这方面demo），但是服务器端怎么把文件发送给指定用户，还有用户如何下载还不会。
关于这些你能帮忙做吗，价钱可以商量

。

引用：天上白玉京 发表于 2019-05-05 10:26
我需要实现的比较简单，不需要这么复杂。
1关于群聊，就是一个客户发送消息到服务器端，然后其他的客户端 ...

你说的这一点也不简单，你认为简单，只是你还没有了解具体该怎么做而已。
而且，你也没有理解我在4楼回复你的，引导你理解如何时具体去落地这些功能。

这种情况下，如果别人帮你定制的话，从人性上来说：别人跟你说工作量，你会说这个很简单，别人说价钱，你肯定会说太贵了。建议你自已做，又会觉得太繁琐、太难。就是这么自相矛盾。

所以，这种情况你最好自已提前多考虑清楚。而且，这种情况，我是绝对不会接，也不会碰的。请谅解。

我给你的建议是，你要么自已基于MobileIMSDK-Web开发，要么基于RainbowChat-Web 2次修改。当然，出于尊重对方的选择权，我从不兜售东西，你完全也可以直接买第3方的，如果恰好如你所说的很简单的话，那就是皆大欢喜的事了

好的，还是谢谢你了

学习

学习了，长知识了，为了金币

引用：JackJiang 发表于 2019-05-05 11:32
你说的这一点也不简单，你认为简单，只是你还没有了解具体该怎么做而已。
而且，你也没有理解我在4楼回 ...

太赞同你的回答了，不知道为什么，大家都喜欢说我想要的功能非常简单这句话，只是你想的太“简单”，而不是真正的简单。

引用：kaga 发表于 2019-07-11 16:20
太赞同你的回答了，不知道为什么，大家都喜欢说我想要的功能非常简单这句话，只是你想的太“简单”，而不 ...

是让别人做就会说简单，让自已做就说很复杂，人性啊

不错，我正在研究这个东西，谢谢了

这个web端的能脱离node吗？直接集成在react项目中？

引用：子弹 发表于 2019-08-12 14:27
这个web端的能脱离node吗？直接集成在react项目中？

这个web产品的前端是纯JS+HTML+CSS，前端不依赖于node（node是服务端的事），只要你的客户端环境能支持html5就可以运行它

好像很厉害

收藏，学习了

厉害厉害

收藏，学习了收藏，学习了

收藏，学习了