V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
HariopaNic
V2EX  ›  程序员

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

  •  
  •   HariopaNic · 114 天前 · 1511 次点击
    这是一个创建于 114 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

    5.后端回复说数据处理完毕,则该消息显示为状态 4:消息成功发送(后端处理完毕)。
    snowlee
        7
    snowlee  
       113 天前
    虽然没写过,但是感觉这是乐观更新的经典场景了
    abelmakihara
        8
    abelmakihara  
       113 天前
    网卡的时候 QQ 很明显并不是真实顺序
    尤其有图视频的情况下
    刷新下重进就变了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2917 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 14:42 · PVG 22:42 · LAX 06:42 · JFK 09:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.