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

65 天前
 HariopaNic

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

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

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

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

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

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

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

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

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

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

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

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

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

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

© 2021 V2EX