请问聊天场景里,前端如何替换快速发送的多条消息?

2024-07-16 17:30:14 +08:00
 HariopaNic

快速发送多条消息,前端用临时队列更新视图,等待响应成功之后再做数据替换。 如果数据结构必须由服务端的逻辑创建,那么临时数据和真实数据该怎么对齐呢,更新真实数据的时机又该如何呢。

没写过相关的场景,突然想到,好奇市面上的类似产品都是按照什么逻辑实现的。

1750 次点击
所在节点    程序员
8 条回复
xiaoming1992
2024-07-16 19:47:17 +08:00
我也没做过,但是如果我做,我会前端对每条待发送的消息生成一个前端 id ,随消息内容一起发送给后端,后端在接收后,把前端 id 、后端 id 、消息体一起响应给前端,前端就能对应上并更新了
codegenerator
2024-07-16 20:20:29 +08:00
前端是永久视图,响应成功后只需要改变消息状态从发送中改为发送成功
数据结构不需要完全由服务器创建,服务器只负责创建 id ,其他跟客户端完全一样
当然客户端需要生成一个客户端 id 作为消息唯一标识
所以没有所谓数据对齐的问题
消息的顺序符合因果一致性就可以了
lscho
2024-07-16 21:15:43 +08:00
数据结构里消息体是前端和服务端一致的,只有状态和 ID 是服务端给的

也就是说前端可以不用等服务端响应就直接可以更新视图

你可以仔细观察一下,QQ 和微信等发送失败、或者被拉黑的场景,也是先更新了视图,然后服务端响应或者超时之后,才会增加发送失败的标记
mybro
2024-07-17 09:20:24 +08:00
我司是这么做的:通过 IM SDK 创建一条消息,调用发送会返回一个 Promise 。Promise.then 里面会有消息内容,通过 id 找到客户端创建的消息,然后用服务端返回的直接替换掉
Yanlongli
2024-07-17 10:04:18 +08:00
没有强制顺序的,有时候你看微信电脑端和手机端的聊天记录顺序还有不一样的,按前端顺序展示即可,后加载的按服务端顺序。
laminux29
2024-07-17 10:15:21 +08:00
先把需要处理的情况,全部罗列出来,然后挨个处理就行,举个简单例子:

1.当用户在前端,比如网页版群聊,发送一条消息时,该消息立即被渲染在前端页面,接着开始处理消息发送逻辑,同时在页面上显示该消息的状态。状态示例:
状态 1:正在发送到后端
状态 2:发送到后端失败,失败原因:XXXXX
状态 3:后端已收到数据,后端正在处理
状态 4:消息成功发送(后端处理完毕)
每种状态有自己的图标。

2.发送频率太快,则该该消息显示为状态 2:发送到后端失败,失败原因为发送频率太快。

3.网络中断,或后端服务未启动,则该消息显示为状态 2:发送到后端失败,失败原因为网络问题或后端服务未响应。

4.后端已经收到数据,后端开始处理,则该消息显示为状态 3:后端已收到数据,后端正在处理。

5.后端回复说数据处理完毕,则该消息显示为状态 4:消息成功发送(后端处理完毕)。
snowlee
2024-07-17 11:11:03 +08:00
虽然没写过,但是感觉这是乐观更新的经典场景了
abelmakihara
2024-07-17 17:22:41 +08:00
网卡的时候 QQ 很明显并不是真实顺序
尤其有图视频的情况下
刷新下重进就变了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1057782

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX