Web版即时通讯/IM系统：RainbowChat-Web前端功能截图

JackJiang

☞ 友情提示：因服务器带宽较小、本页内图片多，如网速加载慢请稍等！

1、基本介绍

RainbowChat-Web是一套基于MobileIMSDK-Web的产品级Web版IM系统。详情请见：《Web版即时通讯/IM系统：RainbowChat-Web基本介绍》。

☞ 特别说明：所有运行截图、运行视频皆为实机运行图，并非PS效果图。（全部清晰大图可从文末附件下载！）

2、相关链接

  ❶ RainbowChat-Web详细介绍：点击进入（☜ 本文）
  ❷ RainbowChat-Web产品截图：点击进入
  ❸ RainbowChat-Web演示视频：点击进入
  ❹ RainbowChat-Web技术授权：点击进入 ^推荐
  ❺ RainbowChat-Web淘宝链接：点击进入
  ❻ RainbowChat-Web更新日志：点击进入

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

3、技术支持和联系方式

☞ VIP技术支持QQ群(200090696) ・普通技术交流群・个人博客・Github主页・联系作者 ☜

☞ 技术培训/授权/合作/咨询等欢迎联系作者 QQ：413980957、微信：hellojackjiang（“技术授权说明、授权协议书范本”点此进入）
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_author2023-2.png

Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_author2023-2.png

4、主界面概览

1）主界面：（点此看大图、演示视频点此查看）

2）主界面-聊天窗全屏时：（点此查看大图）

3）主界面(聊天窗关闭时)：（点此查看大图）

4）在主流浏览器上的运行截图：（点此看大图、演示视频点此查看）

5）不同系统、不同分辨率、不同浏览器的真机运行截图：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_222.jpg

Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_222.jpg

Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_111.jpg

5、当前支持的聊天消息类型

（☞ 点此看大图，也可查看 真机运行演示视频）

6、登陆、注册、忘记密码等功能截图

（☞ 点此看大图，也可查看 真机运行演示视频）

7、“我”的个人中心等功能截图

（☞ 点此看大图，也可查看 真机运行演示视频）

8、“设置”等辅助功能截图

（☞ 点此看大图，也可查看 真机运行演示视频）

9、添加好友（发出申请）

（☞ 点此看大图，也可查看 真机运行演示视频）

10、处理好友请求、删除好友等截图

（☞ 点此看大图，也可查看 真机运行演示视频）

11、一对一陌生人聊天

（☞ 点此看大图，也可查看 真机运行演示视频）

12、一对一好友聊天

（☞ 点此看大图，也可查看 真机运行演示视频）

13、创建群聊功能

（☞ 点此看大图，也可查看 真机运行演示视频）

14、群聊聊天界面

（☞ 点此看大图，也可查看 真机运行演示视频）

15、群信息管理（用于群主）

（☞ 点此看大图，也可查看 真机运行演示视频）

16、群信息管理（普通群员）

（☞ 点此看大图，也可查看 真机运行演示视频）

17、发送“个人名片”消息

（☞ 点此看大图，也可查看 真机运行演示视频）

18、发送“群名片”消息

（☞ 点此看大图，也可查看 真机运行演示视频）

19、发送“位置”消息

（☞ 点此看大图，也可查看 真机运行演示视频）

20、“消息撤回”功能

（☞ 点此看大图，也可查看 真机运行演示视频）

21、“消息转发”功能

（☞ 点此看大图，也可查看 真机运行演示视频）

22、“消息引用”功能

（☞ 点此看大图，也可查看 真机运行演示视频）

23、“@”功能

（☞ 点此看大图，也可查看 真机运行演示视频）

24、v5.0新增功能特性

（☞ 点此看大图，也可查看 真机运行演示视频）

（☞ 点此看大图，也可查看 真机运行演示视频）

附录：所有运行截图打包下载（清晰版）

RainbowChat-Web_v7.0版_运行截图合集(Part1).zip (10.21 MB , 下载次数: 206 )

RainbowChat-Web_v7.0版_运行截图合集(Part2).zip (10.94 MB , 下载次数: 8 )

2 楼: 宋晓涛

效果特别好，优秀

3 楼: JackJiang

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

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

增强版的表情功能效果截图：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_aaaa.jpg

消息“撤回”功能效果截图：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_bbb.jpg

消息气泡右键功能效果截图：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_ccc.jpg

设置好友备注功能效果截图：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_dd.jpg

4 楼: JackJiang

最新动态：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升级，已适配并升级完成）。

升级后的位置消息相关功能截图（更多截图点此查看）：
Web版即时通讯/IM系统：RainbowChat-Web前端功能截图_rbpw_v4_1.jpg

5 楼: JackJiang

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

6 楼: JackJiang

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

7 楼: JackJiang

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

8 楼: JackJiang

正文中的运行截图已于2024年7月8日更新至 v7.0

9 楼: JackJiang

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

本文目录

1、基本介绍

2、相关链接

3、技术支持和联系方式

4、主界面概览

5、当前支持的聊天消息类型

6、登陆、注册、忘记密码等功能截图

7、“我”的个人中心等功能截图

8、“设置”等辅助功能截图

9、添加好友（发出申请）

10、处理好友请求、删除好友等截图

11、一对一陌生人聊天

12、一对一好友聊天

13、创建群聊功能

14、群聊聊天界面

15、群信息管理（用于群主）

16、群信息管理（普通群员）

17、发送“个人名片”消息

18、发送“群名片”消息

19、发送“位置”消息

20、“消息撤回”功能

21、“消息转发”功能

22、“消息引用”功能

23、“@”功能

24、v5.0新增功能特性

附录：所有运行截图打包下载（清晰版）

本帖已收录至以下技术专辑

MobileIMSDK(v6.5精编版)

MobileIMSDK-Web(有偿开源)

RainbowAVnew(有偿开源)

RainbowChat(技术授权)

RainbowChat-Web(技术授权)

RainbowTalk(技术授权)

精华之王

活跃开发者

黄金版主

终身成就

即时通讯网

友情链接[友链交换]

关于

关注我们new

MobileIMSDK (v6.5精编版)

MobileIMSDK-Web (有偿开源)

RainbowAVnew (有偿开源)

RainbowChat (技术授权)

RainbowChat-Web (技术授权)

RainbowTalk (技术授权)

即时通讯网　