Socket is not defined等错误排查：本地跨浏览器聊天工具开发问题

服务端代码问题及修复 #

核心问题 #

• 重复调用server.listen，引发端口占用冲突
• socket.on("details")写在io.on('connection')回调外部，此时socket变量未定义
• 未正确绑定客户端消息监听逻辑

修复后的服务端代码 #

const http = require("http");
const host = 'localhost';
const port = 8000;
const { Server } = require("socket.io");

// 创建HTTP服务器
const server = http.createServer();
// 启动服务器（仅调用一次）
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

// 初始化Socket.IO服务器，配置跨域允许所有本地请求
const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

// 监听客户端连接
io.on('connection', (socket) => {
    console.log('a user connected');

    // 监听客户端发送的聊天消息，收到后广播给所有在线客户端
    socket.on("chatmsg", (chatBundle) => {
        console.log(chatBundle);
        io.emit("chatmsg", chatBundle);
    });

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

客户端代码问题及修复 #

核心问题 #

• 未初始化Socket.IO客户端实例，导致socket is not defined
• 直接获取DOM元素而非其value属性，无法拿到输入内容
• 发送消息时事件名chatmsg未加引号，被当作未定义变量
• 表单提交未阻止默认刷新行为，导致页面跳转
• 本地绝对路径引入socket.io.js，浏览器无法正常访问

修复后的客户端代码 #

<!DOCTYPE html>
<html>
    <body>
        <h1>CHAT ROOM</h1>
        <!-- 新增消息展示区域 -->
        <div id="message-list"></div>
        <form id="chat-form">
            <label for="name">Name: 
                <input id="name" name="name" type="text" required>
            </label>
            
            <label for="text">Message: 
                <input id="text" name="text" type="text" required>
            </label>
            
            <input type="submit" id="send" value="Send">
        </form>
        <!-- 使用CDN引入Socket.IO客户端，避免本地路径问题 -->
        <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
        <script>
            // 初始化Socket.IO客户端，连接本地服务器
            const socket = io('http://localhost:8000');

            // 获取DOM元素
            const chatForm = document.getElementById('chat-form');
            const nameInput = document.getElementById('name');
            const textInput = document.getElementById('text');
            const messageList = document.getElementById('message-list');

            // 监听表单提交事件
            chatForm.addEventListener('submit', (e) => {
                e.preventDefault(); // 阻止页面刷新

                const userName = nameInput.value.trim();
                const messageContent = textInput.value.trim();

                if (userName && messageContent) {
                    // 发送消息到服务器
                    socket.emit("chatmsg", { name: userName, text: messageContent });
                    // 清空消息输入框
                    textInput.value = '';
                }
            });

            // 监听服务器广播的消息，渲染到页面
            socket.on("chatmsg", (chatBundle) => {
                const messageItem = document.createElement('div');
                messageItem.textContent = `${chatBundle.name}: ${chatBundle.text}`;
                messageList.appendChild(messageItem);
            });
        </script>
    </body>
</html>

额外说明 #

• 跨域配置：服务端添加的cors配置允许所有域名访问，适合本地开发测试，生产环境需指定具体允许的域名
• 消息广播：修复后的逻辑会把收到的消息同步给所有连接的客户端，实现多浏览器间的实时通信
• 静态文件托管：如果不想用CDN，可在服务端添加静态文件托管逻辑，直接返回客户端HTML文件

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