基于NodeJS与Socket.io开发聊天应用时两类报错的解决求助

Hey there! Let's break down and fix those two errors you're facing—they're super common when getting started with Socket.io, so we'll get this sorted quickly.

Error 2: Uncaught Reference Error: io is not defined #

This is the simpler one to fix. The io function your client-side code is trying to use doesn't exist in the browser because you haven't loaded the Socket.io client library yet.

Solution: #

Add the Socket.io client script to your HTML file before your client.js script. You have two easy options:

• Use the auto-served client from your Socket.io server (works if your server is running):

  <script src="/socket.io/socket.io.js"></script>
  <script src="client.js"></script>
  

• Or use a CDN for the client library (great for testing without server-side setup):

  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script src="client.js"></script>
  

Make sure this script tag comes first—this way, when client.js runs, the io global variable will already be available.

Error 1: Failed to load resource: net::ERR_CONNECTION_REFUSED #

This error means your browser can't connect to the Socket.io server at http://localhost:8000. Let's cover the most likely fixes:

1. Ensure your server is running #

First, open your terminal, navigate to your project folder, and run:

node index.js

If you see a "port already in use" error, skip to the next fix. Otherwise, leave the terminal open to keep the server running.

2. Resolve port conflicts #

If port 8000 is being used by another app, change the port in both your server and client code:

• In index.js, replace 8000 with a different port (like 9000):

  const io = require('socket.io')(9000)
  

• In client.js, update the connection URL to match:

  const socket = io('http://localhost:9000');
  

3. Fix CORS issues (for cross-port frontends) #

If you're running your frontend on a different port (like Live Server's default 5500), modern Socket.io versions block cross-origin requests by default. Update your index.js to explicitly allow CORS:

const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:5500", // Replace with your frontend's URL/port
    methods: ["GET", "POST"]
  }
});

const users = {};

io.on('connection', socket =>{
 socket.on('new-user-joined', name =>{
 users[socket.id] = name;
 socket.broadcast.emit('user-joined', name);
 });
 socket.on('send', message =>{
 socket.broadcast.emit('receive', {message: message, name: users[socket.id]})
 });
 socket.on('disconnect', () =>{ // Removed unused 'message' parameter here
 socket.broadcast.emit('left', users[socket.id]);
 delete users[socket.id];
 });
});

server.listen(8000);

I also cleaned up the unused message parameter in the disconnect handler—disconnect doesn't pass a message, so that was unnecessary.

Final Checks #

After making these changes:

1. Restart your server with node index.js
2. Refresh your browser
3. Test joining the chat with multiple tabs to confirm everything works

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