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 v6.0 已发布（详见更新说明）。

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、支持文本消息、查看语音留言消息(由App产品发送)、图片消息、大文件消息、查看短视频消息(由App产品发送)、名片消息、位置消息、消息表情、快捷消息、消息撤回、消息转发等；
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运行演示视频》。

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


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


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


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

最新动态：RainbowChat-Web[专业版] v6.0 已发布（详见更新说明）。

学习了

最新动态：RainbowChat-Web[专业版] v5.0 已发布（详见更新说明）。

收藏了，谢谢！

最新动态：已发布RainbowChat-Web[专业版] v4.1（详见更新说明），bug解决及升级优化！。

此版更新内容：

• 1）[bug][前端]解决了掉线后发出的消息，在被判定未送达的情况下，重连成功时会再次重发的问题（这是MobileIMSDK-Web的bug）；
• 2）[优化][前端]解决了发送的html等内容，对方显示正常，而自已这边显示不正常的问题（没被转义）；
• 3）[优化][服务端-独立交付版]解决了log4j2的两个jar包冲突导致在linux下不能正常输出log的问题；
• 4）[优化][服务端-RainbowChatMQserver]优化了使用mysql8.0驱动时，不能正确读取SQL异常信息的问题（会报空指针异常）；
• 5）[优化][前端]解决了位置消息发送功能无法正常使用的问题（高德地图官方API升级，已适配并升级完成）；
• 6）[优化][前端]解决了位置消息查看时的地图控制工具不正常的问题（高德地图官方API升级，已适配并升级完成）。
  

升级后的位置消息相关功能截图（更多截图点此查看）：

引用：cffycls 发表于 2022-07-29 09:37
这web版对移动端的uinapp支持怎么样

暂时不能直接支持uniapp，用uniapp写im是外包需求？

这web版对移动端的uinapp支持怎么样

收藏

学习，不错不错

写得真好

最新动态：RainbowChat-Web v4.0 已发布于2022年1月14日（详见更新说明）。

• 1）[前端] [新增] 增加了消息“撤回”功能，体验与微信保持一致（支持3种聊天模式，包含完整的前后端处理逻辑）；
• 2）[前端] [新增] 增加了删除聊天消息功能；
• 3）[前端] [新增] 增加了设置好友备注（及附属字段）的功能；
• 4）[前端/服务端] [优化] 升级MobileIMSDK-Web库至v5.0版（支持完整消息送达保证机制）；
• 5）[前端] [优化] 将原UI各模块代码按js文件分拆，使得代码更易理解和阅读；
• 6）[前端] [优化] 增强了表情功能，且可与APP产品互通；
  

增强版的表情功能效果截图：


消息“撤回”功能效果截图：


消息气泡右键功能效果截图：


设置好友备注功能效果截图：

真好

厉害

引用：wx_OdEsBIyL 发表于 2021-07-15 14:07
收费吗

是的。

收费吗

6啊

有演示网页吗？准备集成进小程序看一下效果

学习了。厉害。

厉害厉害，可以研究研究

请问，web版是否实现点对点视频聊天，点对点语音聊天，群组视频聊天，群组语音聊天，能否和app版互通