如何对每个用户的聊天消息进行分组？
用户名
我使用Vue.js构建了群聊消息。我目前正在获取返回如下数组的消息：
"data":[
{
"id":1,
"message":"<p>yo<\/p>",
"removed":"false",
"user":{
"uid":2,
"metadata":{
"username":"Testing"
}
},
"post_date":"2018-02-24 14:30"
},
{
"id":2,
"message":"<p>test<\/p>",
"removed":"false",
"user":{
"uid":1,
"metadata":{
"username":"Admin"
}
},
"post_date":"2018-02-24 22:31"
},
{
"id":3,
"message":"<p>Wassup?<\/p>",
"removed":"false",
"user":{
"uid":1,
"metadata":{
"username":"Admin"
}
},
"post_date":"2018-02-24 22:40"
},
{
"id":12,
"message":"again for testing post date",
"removed":"false",
"user":{
"uid":1,
"metadata":{
"username":"Admin"
}
},
"post_date":"2018-03-04 00:59"
},
{
"id":13,
"message":"Hello!",
"removed":"false",
"user":{
"uid":2,
"metadata":{
"username":"Testing"
}
},
"post_date":"2018-03-04 11:13"
},
{
"id":13,
"message":"<p>Hi!</p>",
"removed":"false",
"user":{
"uid":2,
"metadata":{
"username":"Testing"
}
},
"post_date":"2018-03-04 11:13"
},
],
目前，我只是遍历数据并将每个消息输出到单独的div。我更希望在同一用户连续发布多个消息时对消息进行分组。
我将如何处理？应该是选项服务器端（也许是可选group参数？）还是客户端完成？
编辑这是聊天电流的样子：
这是所需的外观： 
The problem if I group them by the UID/Username, is that the messages need to be output in order. So if User 1 send three messages, then User 2 send two, then User 1 sends another message, all of user 1s message will be grouped together. Rather the User 1s three messages should be grouped, then User 2s, then it should show User 1s last message.
Guru Prasad
I solved this problem for myself pretty recently. Here's a full example.
The core business logic for grouping messages, in the above example, can be found under src/store.js in the addMessage function.
除非您的服务器还存储了所有消息，并且您没有某种机制可以确保所有客户端之间的因果顺序，否则我建议您在每个客户端上运行逻辑。这样，您可以确保客户在任何情况下都不会看到邮件跳来跳去。最坏的情况是，邮件将显示为未分组。
确定此消息的算法在收到新消息时运行，因此它在每个客户端上运行，但是您也可以对其进行调整以使其适合您的用例！如下所示（我可能使用了错误的流程图元素..歉意）。
addMessage({ state }, { msg, selfHash }) {
let addAsNewMsg = true;
const lastMessage = state.messages.slice(-1)[0];
if (lastMessage && lastMessage.userHash === msg.userHash) {
// The last message was also sent by the same user
// Check if it arrived within the grouping threshold duration (60s)
const lastMessageTime = moment(lastMessage.time);
const msgTime = moment(msg.time);
const diffSeconds = msgTime.diff(lastMessageTime, "seconds");
if (diffSeconds <= 60) {
addAsNewMsg = false; // We're going to be appending.. so
lastMessage.message.push(msg.message);
// We're going to now update the timestamp and (any) other fields.
delete msg.message; // Since, we've already added this above
Object.assign(lastMessage, msg); // Update with any remaining properties
}
}
if (addAsNewMsg) {
state.messages.push(msg);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
SQL Server中的非确定性数据类型
- 4
Swift 2.1-对单个单元格使用UITableView
- 5
如何避免每次重新编译所有文件？
- 6
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
应用发明者仅从列表中选择一个随机项一次
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
HttpClient中的角度变化检测
- 11
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 12
如何了解DFT结果
- 13
Camunda-根据分配的组过滤任务列表
- 14
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 15
为什么此后台线程中未处理的异常不会终止我的进程？
- 16
构建类似于Jarvis的本地语言应用程序
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 19
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 20
使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面
- 21
使用 text() 獲取特定文本節點的 XPath
我来说两句