当前位置：首页 > article >正文

WebSocket 入门详解

article 2025/1/4 15:54:18

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、Three.js、WebGL、Go
经验经验：6年+ 前端开发经验，专注于图形渲染和AI技术
开源项目：智简未来晓智元宇宙、数字孪生引擎
大家好！我是 [晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议。它由 IETF 于 2011 年标准化，被广泛应用于实时应用程序中，例如在线聊天、游戏、股票行情更新等。

相比于传统的 HTTP 请求-响应模式，WebSocket 具有以下特点：

全双工通信：客户端和服务器可以随时互相发送消息。
低延迟：由于协议头部较小且无需频繁建立连接，通信效率更高。
状态保持：WebSocket 连接一旦建立，可以长期保持，避免了 HTTP 的无状态性问题。

WebSocket 的工作原理

握手阶段：
- WebSocket 连接始于客户端通过 HTTP 向服务器发起的 WebSocket 握手请求。
- 请求包含 Upgrade 和 Connection 头部，用于标识升级协议。
- 服务器接受请求后，会返回 101 Switching Protocols 响应码，完成协议切换。
通信阶段：
- 握手成功后，客户端和服务器之间建立一个持续的双向通信通道。
- 数据通过帧（frames）的形式传输，帧头部较小，效率高。

WebSocket 与 HTTP 的区别

特性	WebSocket	HTTP
协议类型	全双工	半双工
连接保持	长连接	每次请求需要新连接
消息方向	双向通信	单向通信（请求-响应）
头部大小	小（适合频繁通信）	大（适合偶发性通信）
应用场景	实时应用（聊天、游戏等）	静态资源获取

如何使用 WebSocket？

以下是一个简单的 WebSocket 示例：

安装 websocket 包

pnpm i websocket

客户端代码

// 0 链接还没有建立
// 1 链接建立
// 2 链接正在关闭
// 3 链接已关闭
const websocket = new WebSocket('ws://localhost:8080/');

websocket.onopen = function () {
  console.log(websocket.readyState);
};

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  const value = document.getElementById('text').value;
  websocket.send(value);
});

websocket.onmessage = function (msg) {
  console.log(msg.data);
};

服务端代码（Node.js 示例）

const WebSocketServer = require('websocket').server;
const http = require('http');

const server = http.createServer(function (request, response) {
  response.writeHead(404);
  response.end();
});

server.listen(8080, function () {
  console.log('server run in 8080');
});

const wsServer = new WebSocketServer({
  httpServer: server,
  autoAcceptConnections: false,
});

wsServer.on('request', function (request) {
  const connection = request.accept();
  connection.on('message', function (msg) {
    connection.send(msg.utf8Data + 'world');
  });
});