yarn add ws

import { WebSocketServer } from "ws";

// 創(chuàng)建一個(gè) ws 服務(wù)
const wsSever = new WebSocketServer({
  port: 6060,
});

// 每當(dāng)一個(gè)客戶端進(jìn)行了 ws 連接，就會創(chuàng)建一個(gè) ws 對象
wsSever.on("connection", (ws) => {
  // 新客戶端連接時(shí)，廣播
  wsSever.clients.forEach((client) => {
    client.send(`有人進(jìn)入聊天室，當(dāng)前聊天室人數(shù)：${wsSever.clients.size}`);
  });

  // 廣播任何客戶端發(fā)送的消息
  ws.on("message", (data) => {
    const msg = data.toString();
    wsSever.clients.forEach((client) => {
      client.send(msg);
    });
  });

  // 當(dāng)有客戶端退出時(shí)，廣播
  ws.on("close", () => {
    wsSever.clients.forEach((client) => {
      client.send(`有人退出了聊天室，當(dāng)前聊天室人數(shù)：${wsSever.clients.size}`);
    });
  });
});

const ws = new WebSocket('ws://localhost:6060');

ws.addEventListener('message', (event) => {
  const div = document.createElement('div');
  div.innerText = event.data;
  document.body.append(div);
})

// 點(diǎn)擊發(fā)送按鈕，將輸入框中的內(nèi)容發(fā)送給服務(wù)器
const input = document.querySelector('input');
const btn = document.querySelector('button');
btn.onclick = () => {
  ws.send(input.value);
  input.value = '';
}

import { Server } from "socket.io";

// socket.io v3.x 開始默認(rèn)不允許跨域，需要在配置顯式設(shè)置為允許跨域
const io = new Server(6060, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  // 新客戶端連接時(shí)，廣播
  io.emit("chat", `有人進(jìn)入聊天室，當(dāng)前聊天室人數(shù)：${io.engine.clientsCount}`);

  // 廣播任何客戶端發(fā)送的消息
  socket.on("chat", (data) => {
    io.emit("chat", data);
  });

  // 當(dāng)有客戶端退出時(shí)，廣播
  socket.on("disconnect", () => {
    io.emit("chat", `有人退出了聊天室，當(dāng)前聊天室人數(shù)：${io.engine.clientsCount}`);
  });
});

const socket = io('ws://localhost:6060');

socket.on('chat', (data) => {
  const div = document.createElement('div');
  div.innerText = data;
  document.body.append(div);
})

// 點(diǎn)擊發(fā)送按鈕，將輸入框中的內(nèi)容發(fā)送給服務(wù)器
const input = document.querySelector('input');
const btn = document.querySelector('button');
btn.onclick = () => {
  console.log('發(fā)送');
  socket.emit('chat', input.value);
  input.value = '';
}