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

[simplove]

前端是 web 考试页面，经常由于当前网络不行导致考试出问题，想做一个在前端可以展示类似王者荣耀或者英联联盟那样的 ping 值，这个东西可以很直观的看到当前网络到服务器的情况。
目前考试端只支持 WEB，没有做客户端。
不知道有没有人知道有这些的组件或者是方案？

[DrakeXiang]

定时请求接口不就行了？

[kop1989]

不太理解这个“ping 值”对于 web 考试这个业务有什么现实指导意义。

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

你告诉人家你 ping 值是 0，也不意味着他下次请求的 js 、css 、html 文件一定能成功加载。

[kop1989]

所以还是要从页面加载错误的提示友好程度，以及如何给予用户有建设性的操作意见为出发点。

[tabris17]

个人觉得这玩意儿就是甩锅用的 feature
硬要做的话也很简单，js 定时发起一个 ajax 请求，然后等待服务器端返回数据，把 time cost 打印出来就行了

[simplove]

@kop1989 类似这种： 网络情况 绿色按钮表示网络很好，红色铵钮表示网络很差

[John60676]

同意 @kop1989 的观点，你告诉用户网络不行，但是你的解决方案呢？还不如加个错误重连

[simplove]

@John60676 网络不行得找他们自己的 IT 呀，我们只是不想用户总是甩锅给我们就行。

[laozhoubuluo]

@simplove 如 4# 所说拿到 time cost 完了转换成值就完了。比如 300ms 以下就是绿灯，1000ms 以下黄灯，3000ms 以下红灯，5000ms 或者没拿到请求直接黑灯下面显示当前网络异常顺便冻结掉提交按钮。
另外应用侧也需要解决方案，例如定期在后端以及 localstorage 暂存用户答案以便后续提交之类的，纯粹的网络状态告知不能完全解决问题。

[eason1874]

做个轮询接口，发送请求之前记录时间 t1，收到响应之后记录 t2，t2 减去 t1 就是时间差。

条件允许上 websocket，服务器每 30 秒推送一次，本地收到响应就计算与上次的时间差。

[xinJang]

同意 2 楼观点。
拿王者举例，可是王者资源是在本地的，你一个 web 该请求的都没请求到，就看个网络情况有多大的意义，没想明白