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）同时提供，这样进行产品划分可减去不需要的购买成本。但两者的底层从第一行代码开始就设计为无缝互通，化整为零，开发者的选择可以更加灵活自由。（两个产品的整合互通演示视频：点此进入）

最新动态：2019年04月12日已发布RainbowChat-Web v1.6（详见更新说明）。

2、相关链接

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

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

3、使用技术

Web端IM框架：MobileIMSDK-Web

4、技术支持

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

        

5、技术转让和授权方式

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

6、品质说明

❶ 源自真正运营的商业产品：
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、Edege、360浏览器、世界之窗浏览器等▼


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


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


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

7、存在的意义

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 技术转让说明、授权协议书范本》）。

8、运行演示

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

9、功能简介

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

10、技术亮点

• 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产品的无缝消息互通。
  

11、设计原则

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

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

12、技术合法性

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

13、部分概览截图

* 详细截图说明请查看《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就可以运行它

好像很厉害

收藏，学习了