用活字格在应用中内置一个聊天群模块！
本帖最后由 phoben 于 2023-2-28 11:59 编辑因业务需要，要在应用中内置一个类似微信群的功能，需要根据项目自动创建群，自动拉取对应业务人员入群。
除此之外，还支持以下功能：
[*]编辑成员
[*]@特定人员（企业微信会推送提醒）
[*]移动端能打开回复
[*]有未读消息提醒
[*]能隐藏群，有新消息时自动显示出来
[*]能支持表情和附件
[*]仿IM的我方和对方消息左右区分
[*]聊天框拉取项目信息
如果你恰好需要也在系统内实现这么一个功能，尤其是专为业务而生的聊天群，可以参考此贴；
一、数据库构建
先看看数据库该怎么构建比较合理，这里我选择了用主子表的方式，主表存群信息，子表存聊天记录！
主表字段设计如下：
ID：系统自增
消息数量：记录群消息条数
群名称：文本字符
群成员：逗号隔开的用户名
隐藏成员：逗号隔开的用户名
关联项目类型：自定义项目类型编号，用来区分这个群是针对什么类型的业务；
项目编号：自定义项目编号，用来绑定某个业务编号；
子表字段设计如下：
ID：系统自增ID
群ID：所属主表ID
消息内容：具体的消息文本
已读人：逗号隔开的用户名
附件：文本字符串
特别提醒：逗号隔开的用户名
数据表设计没有什么特殊的，咱们功能少，其实不需要太多字段；
二、设计界面
最终界面效果如下：
PC版采用弹窗的方式
移动端会收到消息提醒，点击卡片消息，则跳转到聊天窗口：
界面设计的难点剖析：
[*]双方信息需要左右分开：类似微信等IM软件，自己的消息颜色和位置都是不一样的；
[*]手机端和PC端共用一个页面：上面两张图其实是一个页面（如果做两个页面，每次维护起来非常麻烦）；
[*]@指定人的交互设计：这里需要用到一个插件，然后选择对应的人，最重要的是需要一点JS改变输入框的水印文字；
@指定人效果
首先来说页面怎么布局
因为PC端和移动端共用聊天页面，但是明显PC端的右侧，是多了一个群列表的显示，所以我们需要做嵌套处理
新建两个页面如下：
项目聊天室 =>这个页面是用来给PC端用的
聊天室 =>这个页面是用来给手机端用的
PC页面里面用“页面容器”嵌入手机端页面即可。
实际上大家看到的PC弹窗中的聊天区域是子页面，如下图：
设计器中的布局：
聊天室子页面：
=>
布局这下大家清楚了，这里面没太多难点，就是需要做一些列隐藏的动态效果
例如：点击右上角图标可收起隐藏详情信息、点击“@”图标展开成员列表、成员列表失去焦点自动收起....
这些都是活字格自带的功能（除了成员列表用的是本人发布的一款插件“FYMENU”）,只需要细心调整即可。
最终效果动图（手机端）：
图中的@效果运用了一些JS，这里分享给大家：
var text= "@" + Forguncy.Page.getCell("九宫格").getValue()
$(".inputSend textarea").attr("placeholder",text);
页面布局就告一段落，如果大家还有不明白的，可以留言交流。
剩下的环节，就是具体功能逻辑的实现了，这里总结出来给大家参考：
Q：如何实现发送消息？
A：发送消息可以写成服务端命令，传入群ID、消息内容、附件、@对象几个关键参数，然后就往数据表里增加数据即可；
Q：如何实现@某个人并提醒？
A：前端刚说过了如何@一个或多个人，我是用FYMENU插件实现的，将特别提醒的对象用户名，用逗号隔开，直接传入发送消息的服务端命令里，然后在命令里检测这些人，给他们推送一条卡片消息即可
Q：如何实现隐藏群？
A：隐藏群依靠一个字段实现，就是主表中的隐藏成员字段来记录隐藏该群的成员用户名，用逗号隔开，在前端页面，只需要在表格筛选里，把隐藏名单里有当前用户的筛掉就可以；
PC端隐藏群动图
如果还有不明白的，欢迎在下方提问，我会挑一些更新在帖子上祝大家工作顺利！
本帖最后由 phoben 于 2023-2-28 12:00 编辑
aatest 发表于 2021-7-24 13:20
这个有有个很大的缺陷的， 其他人发送消息了， 本人的页面需要刷新才能看到别人发的消息吧。如果是用表格 ...
tcp只能单向通信，如果实现通知，必须用socket，目前活字格服务端没有这个功能，希望官方能够尽早安排上！
从活字格8开始，官方已支持“服务端通知”功能
本质上就是socket协议，大家可以实现实时聊天了！！！
这个有有个很大的缺陷的， 其他人发送消息了， 本人的页面需要刷新才能看到别人发的消息吧。如果是用表格定时刷新，貌似又会有其他问题，你这个实现了 消息实时刷新？ 太牛了吧，明天把腾讯干倒 lh123 发表于 2021-7-23 22:08
你的作品真的太棒了。ui非常好看
谢谢夸奖 lovert 发表于 2021-7-23 23:00
太牛了吧，明天把腾讯干倒
别忘了投票哦 太牛了！必须投票 liucy 发表于 2021-7-24 09:04
太牛了！必须投票
谢谢支持! 已投 膜拜大佬 厉害啊