视频网站弹幕系统简易实现

要实现的是 "历史弹幕 + 实时弹幕" 混合的完整弹幕系统,类似 B 站的做法。

我们来一步步设计并实现它👇


✅ 场景目标

你的视频播放器要支持:

功能 说明
🎞 历史弹幕 视频开始播放时加载过去用户发送的弹幕,按时间同步展示
🧑‍💻 实时弹幕 当前用户或其他用户正在发的弹幕,立即出现在屏幕上

🧠 核心设计理念

🔁 整体流程图

复制代码
                   ┌────────────┐
     ┌────────────▶│ WebSocket  │◀────────────┐
     │             │ 服务器广播 │              │
     │             └─────▲──────┘              │
     │                   │                     │
     ▼             ┌─────┴──────┐              ▼
 [观看者A]        [Spring Boot 后端]       [观看者B]
    │  GET 弹幕历史    ▲        │       GET 弹幕历史 │
    │                 数据库     │                   │
    ▼                            ▼                   ▼
同步播放历史弹幕         接收实时弹幕          接收实时弹幕

🧱 技术实现拆解

🔸 后端

✅ 数据模型(MySQL)
sql 复制代码
CREATE TABLE danmu (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  video_id BIGINT NOT NULL,
  text VARCHAR(255) NOT NULL,
  time_in_video DOUBLE NOT NULL,  -- 出现的时间(秒)
  send_time DATETIME NOT NULL
);
✅ 接口 1:获取历史弹幕
java 复制代码
@GetMapping("/api/danmu/history")
public List<DanmuDto> getHistory(@RequestParam Long videoId) {
    return danmuRepository.findByVideoIdOrderByTimeInVideo(videoId);
}
✅ 接口 2:WebSocket 实时弹幕服务
java 复制代码
@ServerEndpoint("/ws/danmu/{videoId}")
@Component
public class DanmuWebSocket {

    private static final Map<String, Session> sessionMap = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session, @PathParam("videoId") String videoId) {
        sessionMap.put(session.getId(), session);
    }

    @OnMessage
    public void onMessage(String msgJson, Session session, @PathParam("videoId") String videoId) {
        // 解析 JSON 为 Danmu 对象
        Danmu danmu = new Gson().fromJson(msgJson, Danmu.class);
        danmu.setSendTime(LocalDateTime.now());

        // 保存弹幕到数据库
        danmuService.save(danmu);

        // 广播给所有客户端
        sessionMap.values().forEach(s -> {
            try {
                s.getBasicRemote().sendText(msgJson);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    @OnClose
    public void onClose(Session session) {
        sessionMap.remove(session.getId());
    }
}

🔸 前端(HTML + JS)

✅ 加载历史弹幕并同步播放
js 复制代码
let historyDanmus = []; // { time: 3.5, text: "弹幕内容" }

fetch("/api/danmu/history?videoId=101")
  .then(res => res.json())
  .then(data => {
    historyDanmus = data.sort((a, b) => a.time - b.time);
  });

setInterval(() => {
  const currentTime = video.currentTime;
  while (historyDanmus.length && historyDanmus[0].time <= currentTime) {
    showDanmu(historyDanmus.shift().text);
  }
}, 200);
✅ 实时弹幕连接
js 复制代码
const socket = new WebSocket("ws://localhost:8080/ws/danmu/101");

socket.onmessage = (event) => {
  const danmu = JSON.parse(event.data);
  showDanmu(danmu.text);
};

function sendDanmu(text) {
  const time = video.currentTime;
  socket.send(JSON.stringify({ videoId: 101, text, time }));
}

🔸 弹幕展示动画(CSS + JS)

js 复制代码
function showDanmu(text) {
  const el = document.createElement("div");
  el.className = "danmu";
  el.innerText = text;
  el.style.top = Math.random() * 80 + "%";
  el.style.color = randomColor();
  document.getElementById("danmu-area").appendChild(el);
  setTimeout(() => el.remove(), 8000);
}

✅ 总结:逻辑分工

功能 负责方 技术
视频播放进度监听 前端 video.currentTime
加载历史弹幕 后端接口 GET /api/danmu/history
弹幕显示同步播放 前端 JS + 定时器 每 200ms 检查一次
实时弹幕收发 WebSocket 后端广播 + 前端展示
数据存储 MySQL timeInVideo + text

✅ 用户视角体验流程

  1. 打开视频页面
  2. 请求并同步播放历史弹幕
  3. 用户点击发送 → 发到 WebSocket
  4. 后端广播 + 存库
  5. 所有在线用户立即看到

相关推荐
好奇的菜鸟2 小时前
Spring Boot 事务失效问题:同一个 Service 类中方法调用导致事务失效的原因及解决方案
数据库·spring boot·sql
hjjdebug6 小时前
ffplay6 播放器关键技术点分析 1/2
c++·ffmpeg·音视频
_pengliang9 小时前
WebRTC 双向视频通话
音视频·webrtc
Super Rookie9 小时前
Spring Boot 企业项目技术选型
java·spring boot·后端
来自宇宙的曹先生9 小时前
用 Spring Boot + Redis 实现哔哩哔哩弹幕系统(上篇博客改进版)
spring boot·redis·后端
开开心心_Every10 小时前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
lzzy_lx_208910 小时前
Spring Boot登录认证实现学习心得:从皮肤信息系统项目中学到的经验
java·spring boot·后端
小七mod10 小时前
【Spring】Java SPI机制及Spring Boot使用实例
java·spring boot·spring·spi·双亲委派
上上迁11 小时前
分布式接口幂等性的演进和最佳实践,含springBoot 实现(Java版本)
java·spring boot·分布式