如何通过Socket.io在EJS中实时渲染变量？

EJS作为模板引擎，主要负责页面首次渲染时注入初始变量，而Socket.io负责实时推送动态更新的数据，两者可以完美配合，核心逻辑如下：

1. 服务端配置：同时处理EJS渲染与Socket.io推送 #

先确保Express应用配置好EJS模板引擎，同时保留你原有的Socket.io实时逻辑：

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

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// 配置EJS为模板引擎
app.set('view engine', 'ejs');
app.set('views', './views'); // 指定EJS文件存放目录

// 路由：渲染EJS页面并传递初始变量
app.get('/', (req, res) => {
  // 这里可以是从数据库/配置/其他来源获取的初始数据
  const initialData = {
    test1: '初始温度值',
    test2: '初始湿度值'
  };
  res.render('index', initialData); // 将变量传入EJS模板
});

// Socket.io实时逻辑保持你原有的写法不变
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('message', (msg) => { // 接收单片机消息
    console.log(msg);
    io.emit('temptofront', msg); // 推送给所有客户端
  });
});

server.listen(3000, () => {
  console.log('server running on port 3000');
});

2. EJS客户端模板（views/index.ejs） #

在EJS中直接使用服务端传递的初始变量，同时保留Socket.io的实时监听逻辑：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io + EJS Demo</title>
</head>
<body>
  <!-- 用EJS渲染初始变量 -->
  <p id="test1"><%= test1 %></p>
  <p id="test2"><%= test2 %></p>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const test1El = document.getElementById("test1");
    const test2El = document.getElementById("test2");

    // Socket.io实时接收数据并更新页面，逻辑和纯HTML写法一致
    socket.on('temptofront', (msg) => {
      console.log(msg);
      test1El.innerHTML = msg[0];
      test2El.innerHTML = msg[1];
    });
  </script>
</body>
</html>

关键注意点 #

• EJS语法：<%= 变量名 %>用于输出转义后的变量内容（避免XSS风险），如果需要输出HTML代码，可改用<%- 变量名 %>。
• EJS只负责页面加载时的初始数据填充，后续实时更新完全依赖Socket.io的推送逻辑，和你纯HTML的写法没有本质区别。

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