EJS模板中<%=%>标签无法输出数据，console.log正常显示求助

你把服务器端EJS渲染逻辑和客户端WebSocket异步回调混在一起了，这是核心问题：

• EJS是服务器端模板引擎，页面发送给浏览器前就会完成所有<%=%>标签的解析替换。
• WebSocket的onmessage是浏览器端的异步回调，只有当WebSocket收到消息时才会执行，此时EJS早就完成渲染了，里面的<%=%>标签不会再被解析，自然没法显示数据。而console.log是在浏览器端执行的，所以能正常打印收到的数据。

把EJS的静态渲染和客户端的动态DOM操作分开：先让EJS渲染好空表格结构，再通过客户端JS在收到WebSocket消息时动态更新表格内容。

修改后的代码示例：

<table class="table table-stripped">
  <thead>
    <tr>
       <th>Last update time</th>
       <th>Key</th>
       <th>Value</th>
     </tr>
   </thead>
   <!-- 给tbody加个ID，方便客户端JS获取 -->
   <tbody id="telemetry-tbody">
       <tr>
           <td colspan="3" class="text-center">No data found</td>
       </tr>
   </tbody>
</table>

<!-- 客户端JavaScript，放在模板末尾或者单独的JS文件里 -->
<script>
// 初始化WebSocket连接（替换成你的实际WebSocket地址）
const ws = new WebSocket('ws://your-server-address');
const tableBody = document.getElementById('telemetry-tbody');

ws.onmessage = function(event) {
  const receivedMsg = JSON.parse(event.data);
  const latestTelemetryData = receivedMsg.data;
  const keys = Object.keys(latestTelemetryData);

  // 先清空表格内容
  tableBody.innerHTML = '';

  if (keys.length > 0) {
    keys.forEach(key => {
      const telemetryValues = latestTelemetryData[key];
      // 创建表格行并插入到tbody
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${key}</td>
        <td>${telemetryValues[0][0]}</td>
        <td>${telemetryValues[0][1]}</td>
      `;
      tableBody.appendChild(row);
    });
  } else {
    // 没有数据时显示提示
    tableBody.innerHTML = '<tr><td colspan="3" class="text-center">No data found</td></tr>';
  }
};
</script>

• 服务器端EJS只负责渲染页面的静态结构，动态数据的更新交给客户端JS处理。
• 使用document.createElement或者直接修改innerHTML来动态生成表格行，这是浏览器端操作DOM的标准方式，能实时响应WebSocket收到的新数据。

内容的提问来源于stack exchange，提问作者Abul Bashar Sobuj