如何通过Node.js实现Twitch评论实时新增DOM元素展示？

EJS属于服务器端模板渲染，仅能在页面首次加载时生成静态内容，无法满足实时更新页面的需求。要实现Twitch评论的实时展示，核心是建立服务器与前端的实时双向通信，推荐采用以下方案：

1. 技术选型 #

• 后端：Node.js + tmi.js + Socket.IO（Socket.IO比原生WebSocket更易用，自带断线重连、跨兼容等特性）
• 前端：原生JS（或任意前端框架）负责接收消息并操作DOM

2. 具体实现步骤 #

后端（server.js） #

先安装依赖：

npm install tmi.js socket.io express

编写server.js代码：

const express = require('express');
const tmi = require('tmi.js');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*", // 生产环境请替换为你的前端域名
    methods: ["GET", "POST"]
  }
});

// Twitch连接配置
const twitchClient = new tmi.Client({
  connection: {
    secure: true,
    reconnect: true
  },
  identity: {
    username: '你的Twitch用户名',
    password: '你的OAuth令牌（可从twitchapps.com/tmi获取）'
  },
  channels: ['目标频道名']
});

// 启动Twitch监听
twitchClient.connect().catch(console.error);

// 监听Twitch新评论
twitchClient.on('message', (channel, tags, message, self) => {
  if (self) return; // 忽略自身发送的消息
  // 将评论数据推送给所有连接的前端客户端
  io.emit('new-twitch-comment', {
    username: tags.username,
    message: message,
    avatar: `https://static-cdn.jtvnw.net/jtv_user_pictures/${tags.user_id}-profile_image-300x300.png`
  });
});

// 托管前端静态文件（将html放在public文件夹下）
app.use(express.static('public'));

server.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

前端（public/index.html） #

编写前端页面，接收Socket.IO消息并创建DOM元素：

<!DOCTYPE html>
<html>
<head>
  <title>Twitch评论实时展示</title>
  <style>
    .comment {
      margin: 8px 0;
      padding: 8px;
      border-bottom: 1px solid #eee;
    }
    .comment-username {
      font-weight: bold;
      color: #6441a5;
    }
  </style>
</head>
<body>
  <div id="comments-container"></div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const commentsContainer = document.getElementById('comments-container');

    // 接收后端推送的新评论
    socket.on('new-twitch-comment', (comment) => {
      // 创建评论DOM元素
      const commentElement = document.createElement('div');
      commentElement.className = 'comment';
      
      const usernameElement = document.createElement('span');
      usernameElement.className = 'comment-username';
      usernameElement.textContent = `${comment.username}: `;
      
      const messageElement = document.createElement('span');
      messageElement.textContent = comment.message;
      
      commentElement.appendChild(usernameElement);
      commentElement.appendChild(messageElement);
      
      // 将新评论插入页面容器
      commentsContainer.appendChild(commentElement);
      // 可选：自动滚动到最新评论位置
      commentsContainer.scrollTop = commentsContainer.scrollHeight;
    });
  </script>
</body>
</html>

3. 关键说明 #

• Socket.IO负责在服务器和前端间建立实时连接，当Twitch有新评论时，服务器通过io.emit()将消息推送给所有在线前端
• 前端收到消息后，直接通过原生JS创建DOM元素并插入页面，实现实时更新
• 若不想使用Socket.IO，也可采用原生WebSocket，但Socket.IO封装了断线重连、兼容性处理等细节，开发更高效
• 生产环境需将CORS配置中的origin替换为你的实际前端域名，避免安全风险

内容的提问来源于stack exchange，提问作者kanjas