Node.js+Socket.io页面加载发送JSON数据报错：socket未定义

你遇到的ReferenceError: socket is not defined错误很典型，问题出在对Socket.io的使用逻辑上——socket实例只有在客户端与服务器建立Socket连接时才会被创建，而你在HTTP路由app.get('/')里直接调用socket.broadcast.emit，这里根本不存在名为socket的变量，自然会报错。

另外还有个小问题：你在发送页面后才尝试推送数据，但此时客户端可能还没完成Socket连接，就算有socket实例也无法成功发送。

问题代码的核心问题 #

1. 在app.get('/')路由中直接使用未定义的socket变量：Socket.io的socket对象只能在io.on('connection')的回调函数中获取，这个回调会在每个客户端成功连接时触发。
2. socket.broadcast.emit用法不符合需求：这个方法是给除当前连接客户端之外的所有已连接客户端发消息，而你需要给刚加载页面的客户端发数据，应该用socket.emit。
3. res.sendfile是已废弃的方法，推荐使用res.sendFile（注意大小写）。

修正后的服务器端代码 #

var express = require('express');
var app = express();
var server = require("http").createServer(app);
var path = require('path');
var io = require('socket.io').listen(server);
var fs = require('fs');

server.listen(80);
console.log("Server is running!")

app.use('/static', express.static(path.join(__dirname, 'public')));

// 优化读取文件的函数，增加错误处理
function readFile(filePath) {
  try {
    return fs.readFileSync(filePath, 'utf8');
  } catch (err) {
    console.error('读取日志文件失败:', err);
    return JSON.stringify([]); // 返回空数组的JSON字符串，避免客户端处理出错
  }
}

// 监听客户端的Socket连接事件
io.on('connection', (socket) => {
  console.log('新客户端已建立Socket连接');

  // 客户端连接成功后，主动推送日志数据
  const lastLogs = readFile('public/data/logs.json');
  socket.emit('savedLogs', lastLogs);

  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('客户端已断开Socket连接');
  });
});

app.get('/', function (req, res) {
  // 使用sendFile替代已废弃的sendfile
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

客户端配合代码（index.html） #

你需要在页面中引入Socket.io的客户端脚本，并监听服务器发送的savedLogs事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>日志页面</title>
</head>
<body>
  <!-- 引入Socket.io客户端脚本，路径由Socket.io自动提供 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 与服务器建立Socket连接
    const socket = io();

    // 监听服务器推送的日志数据
    socket.on('savedLogs', (logsData) => {
      console.log('收到服务器发送的日志:', logsData);
      // 在这里将日志数据渲染到页面上，比如：
      // document.getElementById('logs-container').textContent = logsData;
    });
  </script>
</body>
</html>

关键知识点说明 #

• io.on('connection', callback)：这是Socket.io的核心事件，每有一个客户端成功建立Socket连接，就会触发这个回调，回调参数中的socket就是当前客户端的连接实例。
• socket.emit(eventName, data)：给当前连接的客户端发送消息，适合给刚加载页面的用户推送初始数据的场景。
• io.emit(eventName, data)：给所有已连接的客户端发送消息，适合广播全局通知的场景。
• socket.broadcast.emit(eventName, data)：给除当前客户端之外的所有已连接客户端发送消息，适合比如用户上线通知其他用户的场景。

内容的提问来源于stack exchange，提问作者Христо Тодоров