开发者必备的 WebSocket 指南

了解 WebSocket 对于希望构建实时交互应用的开发者至关重要。该协议不仅可以实现用户与服务器之间的无缝交互，还支持当今动态 Web 环境所需的实时数据交换。

什么是 WebSocket？

WebSocket 是一种通信协议，提供双向、全双工的通信通道，并在单个、长期保持的连接上运行。它最初是为 Web 浏览器和 Web 服务器设计的，但实际上任何客户端或服务器应用程序都可以使用 WebSocket。通过 WebSocket 协议，Web 应用能够以更低的开销实现高度互动的体验。

WebSocket 的关键特性

双向通信（Bi-directional）：与传统的请求/响应模式不同，WebSocket 提供了客户端与服务器之间的双向数据传输能力。
全双工（Full Duplex）：允许客户端和服务器同时发送和接收消息。
低开销（Low Overhead）：WebSocket 连接是持久的，减少了客户端与服务器之间的数据交换，降低了延迟和网络开销。
兼容性（Backward Compatibility）：它设计为可以在 HTTP 端口 80 和 443 上运行，并支持 HTTP 代理和中间件。

WebSocket 的常见应用场景

WebSocket 主要用于需要实时数据流的应用，例如：

在线游戏：
WebSocket 在多人在线游戏（如 MMORPG 和实时策略游戏）中起着关键作用。它允许玩家的操作即时同步到其他玩家的设备上，确保游戏的公平性和流畅体验。例如，当玩家移动或攻击时，WebSocket 可即时将此操作广播给所有参与者。
聊天应用：
在聊天应用中，WebSocket 使用户能够实时收发消息，极大地减少了延迟。WhatsApp、Facebook Messenger 等知名应用都依赖 WebSocket 技术来实现即时消息传输。此外，WebSocket 还支持“正在输入”提示、已读回执等交互体验。
体育赛事实时更新：
WebSocket 可用于向用户推送实时比分、球员数据和比赛事件。例如，用户可以在应用或网站上实时获取比赛最新进展，而无需刷新页面。
实时通知：
许多应用（如金融交易平台和监控工具）依赖 WebSocket 实现实时警报推送。例如，在股票交易系统中，几秒钟的延迟可能会影响投资决策，因此 WebSocket 能确保用户能及时收到市场信息。
金融交易平台：
在股票或外汇交易平台中，市场数据变化可能发生在毫秒级别。WebSocket 通过低延迟、高吞吐量的连接，确保交易者可以迅速接收价格更新和执行交易操作，从而做出及时决策。

每个应用场景都体现了 WebSocket 在实时双向通信中的优势，使其成为现代软件开发中不可或缺的技术。

WebSocket 与其他协议对比

特性 WebSocket HTTP 长轮询（Long Polling）

连接	持久	非持久	非持久
延迟	低	高	中等
吞吐量	高	中等	低
复杂度	中等	低	高
实时性	是	否	部分支持

在实时数据传输至关重要的场景中，WebSocket 提供了更优化的解决方案。

详细示例：实时股票行情与交易应用

业务场景

构建一个在线股票交易平台，用户可以实时查看股票报价，并即时执行交易。

WebSocket 的优势

实时数据传输：用户无需刷新页面即可查看最新的股票价格。
降低资源消耗：相比轮询，WebSocket 可减少服务器资源和带宽消耗。
增强交互性：即时更新用户界面，提高用户体验。

技术实现

服务器端代码（Node.js + `ws` 库）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const stocks = {
  AAPL: { price: 150 },
  GOOGL: { price: 1200 },
  MSFT: { price: 200 }
};

setInterval(() => {
  for (let stock in stocks) {
    stocks[stock].price += Math.floor(Math.random() * 10) - 5;
  }
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(stocks));
    }
  });
}, 1000);

wss.on('connection', ws => {
  ws.on('message', message => {
    const { action, stock, amount } = JSON.parse(message);
    if (action === 'BUY' || action === 'SELL') {
      console.log(`订单：${action} ${amount} 股 ${stock}`);
      ws.send(`订单确认：${action} ${amount} 股 ${stock}`);
    }
  });

  ws.send(JSON.stringify(stocks));
});

客户端代码

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

socket.onmessage = function(event) {
  console.log('股票价格更新:', JSON.parse(event.data));
};

function placeOrder(stock, amount, action) {
  socket.send(JSON.stringify({ stock, amount, action }));
}

// 购买 100 股 Apple 股票
placeOrder('AAPL', 100, 'BUY');

WebSocket 调试步骤

创建新请求：打开 Apipost，点击左侧菜单的“+”按钮，选择 WebSocket。
配置 WebSocket 连接：在 URL 框中输入 WebSocket 服务器地址，如 wss://echo.websocket.org，然后点击“连接”。
发送消息：输入 JSON 格式的 WebSocket 消息，并点击“发送”。
接收消息：服务器返回的消息将显示在“响应”面板中。