Skip to content

Node.js socket.io(WebSocket)

Socket.IO 是基于 WebSocket 的双向实时通信框架,适用于聊天室、实时协作等场景。支持自动降级到 HTTP 长轮询。

bash
npm install socket.io

HTTP vs WebSocket

HTTPWebSocket
通信方式请求 → 响应(单向)双向实时
连接每次请求新建连接一次握手,持久连接
场景REST API聊天 / 实时推送 / 协作

服务端代码

js
import http from 'http'
import { Server } from 'socket.io'
import express from 'express'

const app = express()
const server = http.createServer(app)
const io = new Server(server, { cors: true })

const groupList = {}

io.on('connection', (socket) => {
  // 加入房间
  socket.on('join', ({ name, room }) => {
    socket.join(room)
    if (!groupList[room]) groupList[room] = []
    groupList[room].push({ name, room, id: socket.id })

    socket.emit('message', { user: '管理员', text: `${name} 进入了房间` })  // 只发给自己
    socket.emit('groupList', groupList)
    socket.broadcast.emit('groupList', groupList)  // 广播给其他人
  })

  // 发送消息
  socket.on('message', ({ text, room, user }) => {
    socket.broadcast.to(room).emit('message', { text, user })  // 广播给同房间
  })

  // 断开连接
  socket.on('disconnect', () => {
    // 从 groupList 中移除该用户...
  })
})

server.listen(3000)

客户端

html
<script type="module">
import { io } from "https://cdn.socket.io/4.7.4/socket.io.esm.min.js";
const socket = io('ws://localhost:3000');

socket.emit('join', { name: '小明', room: '1008' })
socket.emit('message', { text: '大家好', room: '1008', user: '小明' })
socket.on('message', (data) => console.log(data))
socket.on('groupList', (list) => console.log(list))
</script>

核心方法

方法说明
socket.emit(e, data)只发给当前客户端
socket.broadcast.emit(e, data)广播给所有其他客户端
socket.broadcast.to(room).emit(e, data)广播给同房间其他客户端
socket.join(room)加入房间
io.on('connection', cb)客户端连接事件
socket.on('disconnect', cb)客户端断开事件