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

要实现的是 "历史弹幕 + 实时弹幕" 混合的完整弹幕系统,类似 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 小时前
基于SpringBoot教师听评课管理系统的设计与实现(毕业设计源码+开题报告+论文+系统部署讲解+答辩指导)
spring boot
MacroZheng2 小时前
扔掉HttpUtil!看看人家的HTTP客户端工具,那叫一个优雅!
java·spring boot·后端
AA-代码批发V哥2 小时前
SpringBoot之多环境配置全解析
spring boot·maven
paopaokaka_luck3 小时前
个人健康管理小程序(消息订阅、Echarts图形化分析)
前端·vue.js·spring boot·电脑
Antonio9153 小时前
【音视频】WebRTC-Web 音视频采集与播放
前端·音视频·webrtc
fouryears_234174 小时前
RabbitMQ 发送方确认的两大工具 (With Spring Boot)
java·spring boot·rabbitmq·java-rabbitmq
蓝染yy5 小时前
Spring Boot
java·spring boot
程序猿小D5 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的便利店信息管理系统(附源码+数据库+毕业论文+远程部署)
数据库·spring boot·mysql·vue·mybatis·毕业论文·便利店信息管理系统
那年一路北9 小时前
Deforum Stable Diffusion,轻松实现AI视频生成自由!
人工智能·stable diffusion·音视频
移远通信9 小时前
不止 “听懂”,更能 “感知”!移远通信全新AI 音频模组 重新定义智能家居“听觉”逻辑
人工智能·音视频·智能家居