资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

开发者必备的 WebSocket 指南

创作时间:

作者:

@小白创作中心

开发者必备的 WebSocket 指南

引用

来源

https://www.cnblogs.com/xixin12/p/18781637

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它使得客户端和服务器之间的数据交换变得更加简单快捷。本文将详细介绍WebSocket的工作原理、关键特性、应用场景以及具体实现方法，帮助开发者掌握这项重要的Web开发技术。

什么是 WebSocket？

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

双向通信（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');