网络测速需要前端如何设计?

作者站长头像
站长
· 阅读数 5

问题背景:我们研发的一款 app 需要测不同 bssid 的网速,来提示用户采用最佳速度的网络。

现在的实现方式:1.前端先切换到对应的 bssid 网络上2.后端提供了一个函数 speedTest,前端可以传递字节数,然后后端会创建相对应大小的垃圾数据返回给前端,后端 go 代码实现也比较简单。假设前端传递 100MB 的数据给后端。

func handleSpeedTest(c *gin.Context) {
    sizeRaw := c.Query("size")
    size, err := strconv.ParseInt(sizeRaw, 10, 64)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": fmt.Sprintf("invalid size: %s", err)})
        return
    }

    ctx := c.Request.Context()

    c.Header("Content-Type", "application/octet-stream")
    c.Header("Cache-Control", "no-cache")

    const chunkSize = 256 * 1024
    data := make([]byte, chunkSize)
    for writtenSize := int64(0); writtenSize < size; writtenSize += chunkSize {
        if size-writtenSize < chunkSize {
            data = make([]byte, size-writtenSize)
        }

        select {
        case <-ctx.Done():
            return
        default:
            _, _ = c.Writer.Write(data)
        }
    }
}
  1. 由于网络情况的特殊性,在网络较差的情况下,前端不可能等到 100MB 全部返回才提示用户,所以在前端做了一个超时处理,5s 之内取消这个请求,通过 5s 内接收到的数据除于/5s 得出网速。(使用 axios 和 new AbortController)

问题:1.前端有能力主动取消请求,并且获得已经传输的数据吗?2.前端这边如何去设计来达成需求呢?

回复
1个回答
avatar
test
2024-06-23

如果不考虑兼容性的话,Network Information API 下的 downloadlinkMax 属性,可以获得当前网络下的最大下行速度。

navigator.connection.downlinkMax;

如果要考虑兼容问题,个人认为是通过下载一定大小的资源,通过下载时间来计算下行速度。毕竟为了测试下载速度,真的下载了100m的文件,有点不合适。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容