node.js+socket.io开发实时聊天站点报io未定义错误求助

你的报错ReferenceError: io is not defined核心原因是socket.io客户端脚本未成功加载，导致全局io对象未初始化，具体问题和修改步骤如下： #

1. 核心问题定位 #

你在index.html中写死了socket.io客户端脚本的带端口域名地址，而Replit等托管平台不会直接暴露自定义端口，会自动将服务端口映射到站点默认的80/443端口，导致https://Lime.restivetoo.repl.co:8080/socket.io/socket.io.js资源404无法加载。 #

2. 分步修改代码 #

（1）修改index.html的脚本引入 #

将head中的两个script标签移除，移到body闭合标签的前面，同时修改socket.io客户端的引入路径：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Lime</title>
  <style>
    /* 原有样式保持不变 */
    body {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
    }
    #message-container {
      width: 80%;
      max-width: 1200px;
    }
    #message-container div {
      background-color: #CCC;
      padding: 5px;
    }
    #message-container div:nth-child(2n) {
      background-color: #FFF;
    }
    #send-container {
      position: fixed;
      padding-bottom: 30px;
      bottom: 0;
      background-color: white;
      max-width: 1200px;
      width: 80%;
      display: flex;
    }
    #message-input {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <div id="message-container"></div>
  <form id="send-container">
    <input type="text" id="message-input">
    <button type="submit" id="send-button">Send</button>
  </form>
  <!-- 把脚本放在body末尾，确保DOM加载完成后执行，也避免资源加载顺序问题 -->
  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

（2）修改script.js的连接逻辑，补全缺失的功能函数 #

你原有代码缺了appendMessage实现和表单提交事件监听，同时无需写死完整连接地址，socket.io会自动适配当前站点域名：

// 无需写死完整地址，自动连接当前站点
const socket = io()
const messageContainer = document.getElementById('message-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')

// 补全追加消息的函数
function appendMessage(text) {
  const messageElement = document.createElement('div')
  messageElement.innerText = text
  messageContainer.appendChild(messageElement)
}

const name = prompt('What is your name?')
appendMessage('You joined')
socket.emit('new-user', name)

socket.on('chat-message', data => {
  appendMessage(`${data.name}: ${data.message}`)
})

socket.on('user-connected', name => {
  appendMessage(`${name} connected`)
})

socket.on('user-disconnected', name => {
  appendMessage(`${name} disconnected`)
})

// 补全表单提交发消息的逻辑
messageForm.addEventListener('submit', e => {
  e.preventDefault()
  const message = messageInput.value.trim()
  if (!message) return
  appendMessage(`You: ${message}`)
  socket.emit('send-chat-message', message)
  messageInput.value = ''
})

（3）server.js无需修改，保持原有逻辑即可 #

3. 验证方法 #

修改后重启服务，打开浏览器控制台看Network标签，确认socket.io.js资源加载状态为200，即可解决io is not defined的报错。

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