当前位置：首页 > news >正文

做网站哪个比较好今日热点新闻事件

news 2026/4/7 1:52:12

做网站哪个比较好,今日热点新闻事件,网站网站建设,网站布局案例猜测、实现 B 站在看人数猜测找到接口参数总结实现猜测找到接口浏览器打开一个 B 站视频，比如《黑神话：悟空》最终预告 | 8月20日，重走西游_黑神话悟空 (bilibili.com) ，打开 F12 开发者工具，经过观察&#xf…

猜测、实现 B 站在看人数

- 猜测
- - 找到接口
  - 参数
  - 总结
- 实现

猜测

找到接口

浏览器打开一个 B 站视频，比如《黑神话：悟空》最终预告 | 8月20日，重走西游_黑神话悟空 (bilibili.com) ，打开 F12 开发者工具，经过观察，发现每 30 秒就会有一个如下的请求：

https://api.bilibili.com/x/player/online/total?aid=1056417986&cid=1641689875&bvid=BV1oH4y1c7Kk&ts=57523354{"code": 0,"message": "0","ttl": 1,"data": {"total": "239","count": "182","show_switch": {"total": true,"count": true},"abtest": {"group": "b"}}
}

返回值中的 data.total 就是在看人数，如下：

参数

请求有 4 个参数：

aid=1056417986
cid=1641689875
bvid=BV1oH4y1c7Kk
ts=57523354

aid、bvid 是稿件的编号，cid 是视频的编号，一个稿件可能有多个视频。通过三者可定位到唯一的视频。

ts 从命名上来看应该是时间戳，比如 57523353、57523354 ，但显然太短了，应该是经过处理的，最后发现是时间戳（秒）除以 30 向上取整的结果：

calcTs = function(date) {// 时间戳（秒）const timestamp_second = date.getTime() / 1000;// 除以 30 向上取整const ts = Math.ceil(timestamp_second / 30);console.log(ts)return ts;
}

下图是两个请求的参数以及请求的时间：

在浏览器控制台验证猜想，通过 calcTs 函数可计算出 ts，与请求参数完全吻合：

总结

B 站的实现思路应该是：aid、bvid、cid 作为唯一编号，以 30 秒为一个时间窗口进行统计，在这 30s 中的请求都会使窗口值加 1，每次累加完后返回最新值即可。

但同时还发现在多个标签页中打开同一个视频时，比如 5 个标签页，一开始在看人数都是 1，等一会在看人数才会陆续变成 5。也就是说返回的不是最新值，因为如果返回最新值的话，5 个标签页的在看人数应该分别是 1 2 3 4 5。

猜测应该是同时存在两个 30 秒时间窗口，这里称为当前窗口（ currentWindow ，也就是 ts 对应的 30s 窗口）和上一个窗口（previousWindow 即 ts - 1 对应的 30s 窗口），每次都累加到 currentWindow，但返回 previousWindow。

这样就能解释为什么一开始在看人数都是 1，等一会在看人数才会陆续变成 5 了。打开视频时，previousWindow 不存在，所以返回了 1；同时创建 currentWindow 并从 1 累加到 5。这样等 30s 后下一个定时任务时，currentWindow 就变成了 previousWindow，5 个标签页都会返回 5，在看人数就都陆续变成 5 了。

实现

后端可以使用 Redis 实现，最简单的办法是使用 string 结构，以 aid、bvid、cid、ts 作为 key，给 key 设置大于 60s 的过期时间，每次请求时使用 incr 自增即可。但这样会导致 Redis 找那个有大量的 key，不好维护。

可以使用 hash 结构，以 ts 为 key，以 aid、bvid、cid 为 field，窗口值为 value。这样 Redis 中只会有 ts、ts - 1 两个 key。如果必要的话，也可以根据 field 的值将其 hash 分区到 2 * N 个 key 中。

TotalService

package com.example.demo3;import lombok.SneakyThrows;
import org.redisson.api.*;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.GetMapping;import java.time.Duration;
import java.util.concurrent.ExecutionException;@Service
public class TotalService {private final RedissonClient redisson;public TotalService(RedissonClient redisson) {this.redisson = redisson;}@SneakyThrows({ExecutionException.class, InterruptedException.class})@GetMappingpublic Integer total(String aid, String bvid, String cid, Long ts) {RBatch batch = redisson.createBatch(BatchOptions.defaults());// currentWindow// 以时间戳作为 keyRMapAsync<String, Integer> currentWindow = batch.getMap(ts.toString());// 以 aid, bvid, cid 作为 currentWindow 的 keyString field = field(aid, bvid, cid);// 自增 + 1currentWindow.addAndGetAsync(field, 1);// 过期时间必须大于 60scurrentWindow.expireIfNotSetAsync(Duration.ofSeconds(70));// previousWindowRMapAsync<String, Integer> previousWindow = batch.getMap(String.valueOf(ts - 1));RFuture<Integer> totalFuture = previousWindow.getAsync(field);batch.execute();Integer total = totalFuture.get();// 如果 previousWindow 不存在，则返回 1if (total == null || total == 0) {return 1;}return total;}private String field(String aid, String bvid, String cid) {return aid + ":" + bvid + ":" + cid;}
}

TotalController

@RestController
@RequestMapping("/x/player/online/total")
public class TotalController {private final TotalService totalService;public TotalController(TotalService totalService) {this.totalService = totalService;}@CrossOrigin(originPatterns = "*")@GetMappingpublic Integer total(@RequestParam("aid") String aid, @RequestParam("bvid") String bvid,@RequestParam("cid") String cid, @RequestParam("ts") Long ts) {return totalService.total(aid, bvid, cid, ts);}
}

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><div>aid <input id="aid" type="text" value="113071355923972">bvid <input id="bvid" type="text" value="BV1giHnexEiD">cid <input id="cid" type="text" value="25714427593"></div><div>在看：<span id="total">0</span></div>
</div>
</body>
<script type="text/javascript">const elem_aid = document.getElementById("aid");const elem_bvid_elem = document.getElementById("bvid");const elem_cid_elem = document.getElementById("cid");const elem_total = document.getElementById("total");refreshTotal().then(() => {// 30 秒执行一次setInterval(function () {refreshTotal();}, 30000)});async function refreshTotal() {const aid = elem_aid.value;const bvid = elem_bvid_elem.value;const cid = elem_cid_elem.value;const ts = calcTs(new Date());const url = `http://localhost:8080/x/player/online/total?aid=${aid}&cid=${cid}&bvid=${bvid}&ts=${ts}`;const response = await fetch(url);const total = await response.json();console.log(total);elem_total.innerHTML = total;}function calcTs(date) {// 时间戳（秒）const timestamp_second = date.getTime() / 1000;// 除以 30 向上取整const ts = Math.ceil(timestamp_second / 30);console.log(ts)return ts;}
</script>
</html>