解决 Socket.IO 客户端模块加载失败问题：专业教程

const app = require('express')();
const server = require('http').createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: ["https://example.com", "https://dev.example.com"], // 允许的来源
    allowedHeaders: ["my-custom-header"], // 允许的请求头
    credentials: true // 允许携带凭证
  }
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

io.on('connection', socket => {
  console.log("connection to server", socket);

  socket.on('new-user-joined', name => {
    // 这里users需要提前声明，例如： let users = {};
    users[socket.id] = name;
    socket.broadcast.emit('user-joined', name);
  });

  socket.on('send', message => {
    socket.broadcast.emit('receive', { message: message, name: users[socket.id] }); // 注意这里的事件名拼写
  });
});

<script src="https://cdn.socket.io/4.7.2/socket.io.min.js" integrity="sha384-mZLF4UVwWknsKruFVyH9vrGeqS0acZBhvXJVRUj+jggEqKZ6vekwtvLCcKojnsNj" crossorigin="anonymous"></script>

npm install socket.io-client
# 或者
yarn add socket.io-client

import { io } from "socket.io-client";
const socket = io("http://localhost:3000"); // 替换为你的服务器地址

<script src="js/client.js" type="module"></script>

import { io } from "socket.io-client";

const socket = io("http://localhost:3000"); // 替换为你的服务器地址

const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector(".container");

const name = prompt("Enter your name to join:");

const append = (message, position) => {
  const messageElement = document.createElement('div');
  messageElement.innerText = message;
  messageElement.classList.add('message');
  messageElement.classList.add(position);
  messageContainer.append(messageElement);
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const message = messageInput.value;
  append(`you: ${message}`, 'right');
  socket.emit('send', message);
  messageInput.value = '';
});

socket.emit('new-user-joined', name);

socket.on('user-joined', name => {
  append(`${name} joined the chat`, 'right');
});

socket.on('receive', data => { // 注意这里的事件名拼写
  append(`${data.name}:${data.message}`, 'left');
});