SpringBoot实现实时弹幕

实时弹幕系统已成为现代视频网站和直播平台的标准功能，它让观众可以在观看视频时发送即时评论，这些评论会以横向滚动的方式显示在视频画面上，增强了用户的互动体验和社区参与感。

本文将介绍如何使用SpringBoot构建一个实时弹幕系统。

效果展示

一、实时弹幕系统概述

1.1 什么是弹幕系统

弹幕系统允许用户发送的评论直接显示在视频画面上，这些评论会从右向左横向滚动。

1.2 弹幕系统特点

• 实时性：用户发送的弹幕几乎立即显示在所有观看者的屏幕上
• 互动性：观众可以直接"看到"其他人的反应，形成集体观看体验
• 时间关联性：弹幕通常与视频的特定时间点关联
• 视觉冲击力：大量弹幕同时出现会形成独特的视觉效果

二、技术设计

2.1 整体架构

我们将构建的弹幕系统包括以下主要组件：

1. 前端播放器：负责视频播放和弹幕展示
2. WebSocket服务：处理实时弹幕消息的传递
3. 弹幕存储：保存历史弹幕记录
4. 内容过滤组件：过滤不良内容

2.2 通信协议选择

实现实时弹幕系统，我们需要选择一个适合的通信协议。主要选项包括：

协议	优点	缺点	适用场景
WebSocket	全双工通信，低延迟，广泛支持	需要服务器保持连接，资源消耗较大	实时性要求高的场景
SSE (Server-Sent Events)	服务器推送，简单实现	只支持服务器到客户端的单向通信	服务器推送更新场景
长轮询 (Long Polling)	兼容性好，实现简单	效率低，延迟高	兼容性要求高的场景

此处选择WebSocket进行实现。

三、使用SpringBoot实现WebSocket服务

3.1 添加依赖

首先，在pom.xml中添加相关依赖：

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        3.4.5
         
    
    cm
    springboot-danmaku
    0.0.1-SNAPSHOT
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.springframework.boot
            spring-boot-starter-websocket
        
        
            com.baomidou
            mybatis-plus-spring-boot3-starter
            3.5.5
        
        
            com.h2database
            h2
            runtime
        
        
            org.projectlombok
            lombok
            true
        
    
    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    21
                    21
                    utf-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                3.2.0
                
                    
                        
                            repackage
                        
                    
                
            
        
    

3.2 WebSocket配置

创建WebSocket配置类：

package com.example.danmaku.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 启用简单的消息代理，用于将消息返回给客户端
        config.enableSimpleBroker("/topic");
        // 设置应用程序前缀
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册STOMP端点，客户端通过这个端点连接到WebSocket服务器
        registry.addEndpoint("/ws-danmaku")
                .setAllowedOriginPatterns("*")
                .withSockJS(); // 启用SockJS fallback选项
    }
}

3.3 定义弹幕消息模型

使用MyBatis-Plus实体定义：

@Data
@TableName("danmaku")
public class Danmaku {
    
    @TableId(type = IdType.AUTO)
    private Long id;
    
    @TableField(value = "content", strategy = FieldStrategy.NOT_EMPTY)
    private String content;  // 弹幕内容
    
    @TableField("color")
    private String color;    // 弹幕颜色
    
    @TableField("font_size")
    private Integer fontSize; // 字体大小
    
    @TableField("time")
    private Double time;     // 视频时间点
    
    @TableField("video_id")
    private String videoId;  // 关联的视频ID
    
    @TableField("user_id")
    private String userId;   // 发送用户ID
    
    @TableField("username")
    private String username; // 用户名
    
    @TableField("created_at")
    private LocalDateTime createdAt; // 创建时间
}

3.4 弹幕消息传输对象

@Data
public class DanmakuDTO {
    private String content;
    private String color = "#ffffff"; // 默认白色
    private Integer fontSize = 24;    // 默认字体大小
    private Double time;
    private String videoId;
    private String userId;
    private String username;
}

3.5 定义Mapper接口

@Mapper
public interface DanmakuMapper extends BaseMapper {
    
    /**
     * 根据视频ID查询所有弹幕，按时间排序
     */
    @Select("SELECT * FROM danmaku WHERE video_id = #{videoId} ORDER BY time ASC")
    List findByVideoIdOrderByTimeAsc(@Param("videoId") String videoId);
    
    /**
     * 根据视频ID和时间范围查询弹幕
     */
    @Select("SELECT * FROM danmaku WHERE video_id = #{videoId} AND time BETWEEN #{startTime} AND #{endTime} ORDER BY time ASC")
    List findByVideoIdAndTimeBetween(
            @Param("videoId") String videoId, 
            @Param("startTime") Double startTime, 
            @Param("endTime") Double endTime);
}

3.6 弹幕服务

@Service
public class DanmakuService {
    
    private final DanmakuMapper danmakuMapper;
    private final SimpMessagingTemplate messagingTemplate;
    
    @Autowired
    public DanmakuService(DanmakuMapper danmakuMapper, SimpMessagingTemplate messagingTemplate) {
        this.danmakuMapper = danmakuMapper;
        this.messagingTemplate = messagingTemplate;
    }
    
    /**
     * 保存并发送弹幕
     */
    public Danmaku saveDanmaku(DanmakuDTO danmakuDTO) {
        // 内容过滤（简单示例）
        String filteredContent = filterContent(danmakuDTO.getContent());
        
        // 创建弹幕实体
        Danmaku danmaku = new Danmaku();
        danmaku.setContent(filteredContent);
        danmaku.setColor(danmakuDTO.getColor());
        danmaku.setFontSize(danmakuDTO.getFontSize());
        danmaku.setTime(danmakuDTO.getTime());
        danmaku.setVideoId(danmakuDTO.getVideoId());
        danmaku.setUserId(danmakuDTO.getUserId());
        danmaku.setUsername(danmakuDTO.getUsername());
        danmaku.setCreatedAt(LocalDateTime.now());
        
        // 保存到数据库
        danmakuMapper.insert(danmaku);
        
        // 通过WebSocket发送到客户端
        messagingTemplate.convertAndSend("/topic/video/" + danmaku.getVideoId(), danmaku);
        
        return danmaku;
    }
    
    /**
     * 获取视频的所有弹幕
     */
    public List getDanmakusByVideoId(String videoId) {
        return danmakuMapper.findByVideoIdOrderByTimeAsc(videoId);
    }
    
    /**
     * 获取指定时间范围内的弹幕
     */
    public List getDanmakusByVideoIdAndTimeRange(
            String videoId, Double startTime, Double endTime) {
        return danmakuMapper.findByVideoIdAndTimeBetween(videoId, startTime, endTime);
    }
    
    /**
     * 简单的内容过滤实现
     */
    private String filterContent(String content) {
        // 实际应用中这里可能会有更复杂的过滤逻辑
        String[] sensitiveWords = {"敏感词1", "敏感词2", "敏感词3"};
        String filtered = content;
        
        for (String word : sensitiveWords) {
            filtered = filtered.replaceAll(word, "***");
        }
        
        return filtered;
    }
}

3.7 弹幕控制器

package com.example.danmaku.controller;

import com.example.danmaku.dto.DanmakuDTO;
import com.example.danmaku.model.Danmaku;
import com.example.danmaku.service.DanmakuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/danmaku")
public class DanmakuController {
    
    private final DanmakuService danmakuService;
    
    @Autowired
    public DanmakuController(DanmakuService danmakuService) {
        this.danmakuService = danmakuService;
    }
    
    /**
     * 发送弹幕
     */
    @MessageMapping("/danmaku/send")
    public Danmaku sendDanmaku(DanmakuDTO danmakuDTO) {
        return danmakuService.saveDanmaku(danmakuDTO);
    }
    
    /**
     * 获取视频的所有弹幕（REST API）
     */
    @GetMapping("/video/{videoId}")
    public ResponseEntity> getDanmakusByVideoId(@PathVariable String videoId) {
        List danmakus = danmakuService.getDanmakusByVideoId(videoId);
        return ResponseEntity.ok(danmakus);
    }
    
    /**
     * 获取指定时间范围内的弹幕（REST API）
     */
    @GetMapping("/video/{videoId}/timerange")
    public ResponseEntity> getDanmakusByTimeRange(
            @PathVariable String videoId,
            @RequestParam Double start,
            @RequestParam Double end) {
        List danmakus = danmakuService.getDanmakusByVideoIdAndTimeRange(videoId, start, end);
        return ResponseEntity.ok(danmakus);
    }
}

四、前端实现

4.1 HTML和CSS

    
    
    
    


    

        
        

    
    
    

        
        
        
            小
            中
            大
        
        发送
    
    
    
    

4.2 JavaScript实现

// danmaku.js
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const videoPlayer = document.getElementById('video-player');
    const danmakuContainer = document.getElementById('danmaku-container');
    const danmakuInput = document.getElementById('danmaku-input');
    const colorPicker = document.getElementById('color-picker');
    const fontSizeSelect = document.getElementById('font-size');
    const sendBtn = document.getElementById('send-btn');
    
    // 视频ID（实际应用中可能从URL或其他地方获取）
    const videoId = 'video123';
    
    // 用户信息（实际应用中可能从登录系统获取）
    const userId = 'user' + Math.floor(Math.random() * 1000);
    const username = '用户' + userId.substring(4);
    
    // WebSocket连接
    let stompClient = null;
    
    // 连接WebSocket
    function connect() {
        const socket = new SockJS('/ws-danmaku');
        stompClient = Stomp.over(socket);
        
        stompClient.connect({}, function(frame) {
            console.log('Connected to WebSocket: ' + frame);
            
            // 订阅当前视频的弹幕频道
            stompClient.subscribe('/topic/video/' + videoId, function(response) {
                const danmaku = JSON.parse(response.body);
                showDanmaku(danmaku);
            });
            
            // 获取历史弹幕
            loadHistoryDanmaku();
        }, function(error) {
            console.error('WebSocket连接失败: ', error);
            // 尝试重新连接
            setTimeout(connect, 5000);
        });
    }
    
    // 加载历史弹幕
    function loadHistoryDanmaku() {
        fetch(`/api/danmaku/video/${videoId}`)
            .then(response => response.json())
            .then(danmakus => {
                // 记录历史弹幕，用于播放到相应时间点时显示
                window.historyDanmakus = danmakus;
                console.log(`已加载${danmakus.length}条历史弹幕`);
            })
            .catch(error => console.error('获取历史弹幕失败:', error));
    }
    
    // 发送弹幕
    function sendDanmaku() {
        const content = danmakuInput.value.trim();
        if (!content) return;
        
        const danmaku = {
            content: content,
            color: colorPicker.value,
            fontSize: parseInt(fontSizeSelect.value),
            time: videoPlayer.currentTime,
            videoId: videoId,
            userId: userId,
            username: username
        };
        
        stompClient.send('/app/danmaku/send', {}, JSON.stringify(danmaku));
        
        // 清空输入框
        danmakuInput.value = '';
    }
    
    // 显示弹幕
    function showDanmaku(danmaku) {
        // 创建弹幕元素
        const danmakuElement = document.createElement('div');
        danmakuElement.className = 'danmaku';
        danmakuElement.textContent = danmaku.content;
        danmakuElement.style.color = danmaku.color;
        danmakuElement.style.fontSize = danmaku.fontSize + 'px';
        
        // 随机分配轨道（垂直位置）
        const trackHeight = danmaku.fontSize + 5; // 轨道高度
        const maxTrack = Math.floor(danmakuContainer.clientHeight / trackHeight);
        const trackNumber = Math.floor(Math.random() * maxTrack);
        danmakuElement.style.top = (trackNumber * trackHeight) + 'px';
        
        // 计算动画持续时间（基于容器宽度）
        const duration = 8 + Math.random() * 4; // 8-12秒
        danmakuElement.style.animationDuration = duration + 's';
        
        // 添加到容器
        danmakuContainer.appendChild(danmakuElement);
        
        // 动画结束后移除元素
        setTimeout(() => {
            danmakuContainer.removeChild(danmakuElement);
        }, duration * 1000);
    }
    
    // 视频时间更新时，显示对应时间点的历史弹幕
    videoPlayer.addEventListener('timeupdate', function() {
        const currentTime = videoPlayer.currentTime;
        
        // 如果历史弹幕已加载
        if (window.historyDanmakus && window.lastCheckedTime !== Math.floor(currentTime)) {
            window.lastCheckedTime = Math.floor(currentTime);
            
            // 检查是否有需要在当前时间点显示的弹幕
            window.historyDanmakus.forEach(danmaku => {
                // 如果弹幕时间点在当前时间的±0.5秒内且尚未显示
                if (Math.abs(danmaku.time - currentTime) <= 0.5 && 
                    (!window.displayedDanmakus || !window.displayedDanmakus.includes(danmaku.id))) {
                    
                    // 记录已显示的弹幕ID
                    if (!window.displayedDanmakus) {
                        window.displayedDanmakus = [];
                    }
                    window.displayedDanmakus.push(danmaku.id);
                    
                    // 显示弹幕
                    showDanmaku(danmaku);
                }
            });
        }
    });
    
    // 视频跳转时重置已显示弹幕记录
    videoPlayer.addEventListener('seeking', function() {
        window.displayedDanmakus = [];
    });
    
    // 绑定发送按钮点击事件
    sendBtn.addEventListener('click', sendDanmaku);
    
    // 绑定输入框回车事件
    danmakuInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendDanmaku();
        }
    });
    
    // 连接WebSocket
    connect();
});

五、性能优化与扩展

5.1 性能优化策略

1. 消息压缩：对WebSocket消息进行压缩，减少网络传输量

@Configuration
public class WebSocketMessageConfig implements WebSocketMessageBrokerConfigurer {
    
    @Override
    public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
        // 启用消息压缩
        registry.setMessageSizeLimit(128 * 1024) // 消息大小限制，防止大量弹幕导致的内存问题
                .setSendBufferSizeLimit(512 * 1024) // 发送缓冲区大小限制
                .setSendTimeLimit(15 * 1000); // 发送超时限制
    }
}

2. 弹幕分页加载：对于长视频，分段获取弹幕数据

@GetMapping("/video/{videoId}/paged")
public ResponseEntity> getPagedDanmakus(
        @PathVariable String videoId,
        @RequestParam(defaultValue = "0") int page,
        @RequestParam(defaultValue = "100") int size) {
    
    Page pageParam = new Page<>(page, size);
    QueryWrapper queryWrapper = new QueryWrapper()
            .eq("video_id", videoId)
            .orderByAsc("time");
    
    IPage danmakus = danmakuMapper.selectPage(pageParam, queryWrapper);
    return ResponseEntity.ok(danmakus);
}

3. 前端渲染优化：控制同时显示的弹幕数量

// 在前端控制最大显示弹幕数
const MAX_DANMAKU_COUNT = 100;

// 在showDanmaku函数中添加限制
function showDanmaku(danmaku) {
    // 检查当前弹幕数量
    const currentDanmakuCount = document.querySelectorAll('.danmaku').length;
    if (currentDanmakuCount >= MAX_DANMAKU_COUNT) {
        // 如果超过最大数量，移除最早的弹幕
        const oldestDanmaku = document.querySelector('.danmaku');
        if (oldestDanmaku) {
            oldestDanmaku.remove();
        }
    }
    
    // 原有弹幕显示逻辑...
}

5.2 弹幕过滤增强

对于敏感内容过滤，可以实现更复杂的过滤系统：

@Service
public class ContentFilterService {
    
    private Set sensitiveWords;
    
    @PostConstruct
    public void init() {
        // 从配置文件或数据库加载敏感词
        sensitiveWords = new HashSet<>();
        sensitiveWords.add("敏感词1");
        sensitiveWords.add("敏感词2");
        sensitiveWords.add("敏感词3");
        // 可以从外部文件加载更多敏感词
    }
    
    public String filterContent(String content) {
        if (content == null || content.isEmpty()) {
            return content;
        }
        
        String filteredContent = content;
        for (String word : sensitiveWords) {
            filteredContent = filteredContent.replaceAll(word, "***");
        }
        
        return filteredContent;
    }
    
    // 添加敏感词
    public void addSensitiveWord(String word) {
        sensitiveWords.add(word);
    }
    
    // 移除敏感词
    public void removeSensitiveWord(String word) {
        sensitiveWords.remove(word);
    }
}

六、完整单机演示

6.1 项目结构

src/
├── main/
│   ├── java/
│   │   └── com/
│   │       └── example/
│   │           └── danmaku/
│   │               ├── DanmakuApplication.java
│   │               ├── config/
│   │               │   └── WebSocketConfig.java
│   │               ├── controller/
│   │               │   └── DanmakuController.java
│   │               ├── model/
│   │               │   └── Danmaku.java
│   │               ├── dto/
│   │               │   └── DanmakuDTO.java
│   │               ├── mapper/
│   │               │   └── DanmakuMapper.java
│   │               ├── service/
│   │               │   ├── DanmakuService.java
│   │               │   └── ContentFilterService.java
│   └── resources/
│       ├── application.properties
│       ├── schema.sql
│       └── static/
│           ├── index.html
│           └── danmaku.js

6.2 应用配置

# application.properties
server.port=8080

# H2数据库配置
spring.datasource.url=jdbc:h2:mem:danmakudb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

# MyBatis-Plus配置
mybatis-plus.configuration.map-underscore-to-camel-case=true
mybatis-plus.type-aliases-package=com.example.danmaku.model
mybatis-plus.global-config.db-config.id-type=auto

# WebSocket配置
spring.websocket.max-text-message-size=8192
spring.websocket.max-binary-message-size=8192

6.3 数据库初始化脚本

-- schema.sql
CREATE TABLE IF NOT EXISTS danmaku (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    content VARCHAR(255) NOT NULL,
    color VARCHAR(20) DEFAULT '#ffffff',
    font_size INT DEFAULT 24,
    time DOUBLE NOT NULL,
    video_id VARCHAR(50) NOT NULL,
    user_id VARCHAR(50) NOT NULL,
    username VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 添加一些测试数据
INSERT INTO danmaku (content, color, font_size, time, video_id, user_id, username, created_at)
VALUES
('这是第一条测试弹幕', '#ffffff', 24, 1.0, 'video123', 'user1', '测试用户1', CURRENT_TIMESTAMP),
('这是第二条测试弹幕', '#ff0000', 24, 3.0, 'video123', 'user2', '测试用户2', CURRENT_TIMESTAMP),
('这是第三条测试弹幕', '#00ff00', 24, 5.0, 'video123', 'user3', '测试用户3', CURRENT_TIMESTAMP),
('这是第四条测试弹幕', '#0000ff', 24, 7.0, 'video123', 'user4', '测试用户4', CURRENT_TIMESTAMP);

6.4 主应用类

@SpringBootApplication
@MapperScan("com.example.danmaku.mapper")
public class DanmakuApplication {
    
    public static void main(String[] args) {
        SpringApplication.run(DanmakuApplication.class, args);
    }
}

6.5 运行与测试

1. 启动SpringBoot应用：

mvn spring-boot:run

2. 访问应用：

http://localhost:8080/index.html

3. 查看H2数据库控制台：

参考application.properties中的数据库配置属性

http://localhost:8080/h2-console