V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
simplove
V2EX  ›  程序员

请教一个 web 网页端展示网络延迟的方案

  •  
  •   simplove · 2021-08-25 12:47:03 +08:00 · 1780 次点击
    这是一个创建于 1222 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前端是 web 考试页面,经常由于当前网络不行导致考试出问题,想做一个在前端可以展示类似王者荣耀或者英联联盟那样的 ping 值,这个东西可以很直观的看到当前网络到服务器的情况。
    目前考试端只支持 WEB,没有做客户端。
    不知道有没有人知道有这些的组件或者是方案?
    10 条回复    2021-08-27 15:49:14 +08:00
    DrakeXiang
        1
    DrakeXiang  
       2021-08-25 12:49:35 +08:00
    定时请求接口不就行了?
    kop1989
        2
    kop1989  
       2021-08-25 13:27:11 +08:00
    不太理解这个“ping 值”对于 web 考试这个业务有什么现实指导意义。

    页面加载出来就是加载出来了。
    加载不出来就是加载不出来。
    脚本、样式加载不完全就是不完全。
    你一个 ping 值能怎样呢?

    你告诉人家你 ping 值是 0,也不意味着他下次请求的 js 、css 、html 文件一定能成功加载。
    kop1989
        3
    kop1989  
       2021-08-25 13:33:46 +08:00
    所以还是要从页面加载错误的提示友好程度,以及如何给予用户有建设性的操作意见为出发点。
    tabris17
        4
    tabris17  
       2021-08-25 13:38:53 +08:00
    个人觉得这玩意儿就是甩锅用的 feature
    硬要做的话也很简单,js 定时发起一个 ajax 请求,然后等待服务器端返回数据,把 time cost 打印出来就行了
    simplove
        5
    simplove  
    OP
       2021-08-25 13:39:26 +08:00
    @kop1989 类似这种: 网络情况 绿色按钮表示网络很好,红色铵钮表示网络很差
    John60676
        6
    John60676  
       2021-08-25 13:50:14 +08:00
    同意 @kop1989 的观点,你告诉用户网络不行,但是你的解决方案呢?还不如加个错误重连
    simplove
        7
    simplove  
    OP
       2021-08-25 13:52:39 +08:00
    @John60676 网络不行得找他们自己的 IT 呀,我们只是不想用户总是甩锅给我们就行。
    laozhoubuluo
        8
    laozhoubuluo  
       2021-08-25 13:57:43 +08:00   ❤️ 3
    @simplove 如 4# 所说拿到 time cost 完了转换成值就完了。比如 300ms 以下就是绿灯,1000ms 以下黄灯,3000ms 以下红灯,5000ms 或者没拿到请求直接黑灯下面显示当前网络异常顺便冻结掉提交按钮。
    另外应用侧也需要解决方案,例如定期在后端以及 localstorage 暂存用户答案以便后续提交之类的,纯粹的网络状态告知不能完全解决问题。
    eason1874
        9
    eason1874  
       2021-08-25 14:01:57 +08:00
    做个轮询接口,发送请求之前记录时间 t1,收到响应之后记录 t2,t2 减去 t1 就是时间差。

    条件允许上 websocket,服务器每 30 秒推送一次,本地收到响应就计算与上次的时间差。
    xinJang
        10
    xinJang  
       2021-08-27 15:49:14 +08:00
    同意 2 楼观点。
    拿王者举例,可是王者资源是在本地的,你一个 web 该请求的都没请求到,就看个网络情况有多大的意义,没想明白
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2752 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:15 · PVG 20:15 · LAX 04:15 · JFK 07:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.