如何基于Spring Boot实现HTML页面实时展示Telegram Bot消息？

整体思路 #

通过WebSocket实现后端到前端的实时消息推送，当Telegram服务类收到新消息时，立刻推送给前端，前端通过DataTables的API动态添加行，实现实时展示。

后端实现（Spring Boot） #

1. 添加WebSocket依赖 #

在pom.xml中加入Spring WebSocket的依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 配置WebSocket #

创建WebSocket配置类，开启WebSocket支持：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    private final TelegramMessageHandler telegramMessageHandler;

    public WebSocketConfig(TelegramMessageHandler telegramMessageHandler) {
        this.telegramMessageHandler = telegramMessageHandler;
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 配置WebSocket路径，允许跨域（根据实际部署情况调整）
        registry.addHandler(telegramMessageHandler, "/telegram-messages")
                .setAllowedOrigins("*");
    }
}

3. 实现WebSocket消息处理器 #

创建处理器类，负责管理前端连接和消息推送：

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;

public class TelegramMessageHandler extends TextWebSocketHandler {
    // 存储所有活跃的前端会话
    private final CopyOnWriteArrayList<WebSocketSession> sessions = new CopyOnWriteArrayList<>();
    private final ObjectMapper objectMapper = new ObjectMapper();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) {
        sessions.remove(session);
    }

    // 推送消息到所有连接的前端
    public void sendMessage(TelegramMessage message) throws IOException {
        String jsonMessage = objectMapper.writeValueAsString(message);
        for (WebSocketSession session : sessions) {
            if (session.isOpen()) {
                session.sendMessage(new TextMessage(jsonMessage));
            }
        }
    }
}

4. 修改Telegram服务类 #

当收到新消息时，调用WebSocket处理器推送消息：

import org.springframework.stereotype.Service;
import java.io.IOException;

@Service
public class TelegramBotService {
    private final TelegramMessageHandler messageHandler;

    public TelegramBotService(TelegramMessageHandler messageHandler) {
        this.messageHandler = messageHandler;
    }

    // 假设这是你接收Telegram消息的核心方法
    public void onTelegramMessageReceived(String userId, String content, long timestamp) throws IOException {
        TelegramMessage message = new TelegramMessage(userId, content, timestamp);
        // 这里可以添加你的业务处理逻辑
        
        // 推送给前端
        messageHandler.sendMessage(message);
    }
}

// 消息实体类，前后端字段需保持一致
class TelegramMessage {
    private String userId;
    private String content;
    private long timestamp;

    // 构造器、getter、setter
    public TelegramMessage(String userId, String content, long timestamp) {
        this.userId = userId;
        this.content = content;
        this.timestamp = timestamp;
    }

    // 省略getter和setter方法
}

前端实现 #

1. 引入依赖 #

在HTML中引入jQuery、DataTables的CSS和JS：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

2. 初始化DataTable并监听WebSocket #

创建表格并完成实时更新逻辑：

<table id="telegramMessagesTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>用户ID</th>
            <th>消息内容</th>
            <th>接收时间</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
$(document).ready(function() {
    // 初始化DataTable
    const table = $('#telegramMessagesTable').DataTable({
        columns: [
            { data: 'userId' },
            { data: 'content' },
            { 
                data: 'timestamp',
                render: function(data) {
                    return new Date(data).toLocaleString();
                }
            }
        ]
    });

    // 建立WebSocket连接
    const socket = new WebSocket('ws://localhost:8080/telegram-messages');
    
    // 监听后端推送的消息
    socket.onmessage = function(event) {
        const message = JSON.parse(event.data);
        // 动态添加行到表格，draw(false)保持当前分页位置
        table.row.add(message).draw(false);
    };

    // 连接断开时自动重连
    socket.onclose = function() {
        console.log('WebSocket连接断开，3秒后尝试重连');
        setTimeout(() => window.location.reload(), 3000);
    };
});
</script>

关键注意点 #

• 跨域配置：如果前端和后端不在同一域名/端口，需在WebSocketConfig中正确配置setAllowedOrigins，或者配合Spring全局CORS配置。
• 消息序列化：确保前后端的消息实体字段完全一致，避免JSON解析错误。
• 会话管理：WebSocket处理器中需及时移除已关闭的会话，避免无效推送浪费资源。

内容的提问来源于stack exchange，提问作者Hipolito Matias Miguel Angel