网络测速需要前端如何设计?-灵析社区

无敌英俊大师兄

**问题背景:** 我们研发的一款 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) } } } 3. 由于网络情况的特殊性,在网络较差的情况下,前端不可能等到 100MB 全部返回才提示用户,所以在前端做了一个超时处理,5s 之内取消这个请求,通过 5s 内接收到的数据除于/5s 得出网速。(使用 axios 和 new AbortController) **问题:** 1.前端有能力主动取消请求,并且获得已经传输的数据吗? 2.前端这边如何去设计来达成需求呢?

阅读量:139

点赞量:0

问AI
如果不考虑兼容性的话,"Network Information API" (https://link.segmentfault.com/?enc=1c%2FevK8yioLBJTxX8id16g%3D%3D.%2B3crbccgixX7%2FP3m0YemXbOjS0W088dqGHOf7Gv1TXGnVyWnZyXe9p5aBujFdBanZ1EBPm4if2PP5CBncojPYU3KYOaiFCma45F7o1Ada%2FY%3D) 下的 "downloadlinkMax" (https://link.segmentfault.com/?enc=bztMWU8YoSxR%2F%2FmYU5rVFg%3D%3D.UIa3ZO5kXJhfc3i26o3fANKLovn8veE5KTo5DCy0JbO%2F9J52vk%2F9EBz7Z3Miw55L4fU8eAHnHdnagUmWU4CZveks6aj57hsM7kacbUyBqhk%3D) 属性,可以获得当前网络下的最大下行速度。 navigator.connection.downlinkMax; 如果要考虑兼容问题,个人认为是通过下载一定大小的资源,通过下载时间来计算下行速度。 毕竟为了测试下载速度,真的下载了100m的文件,有点不合适。