使用 WebSocket 构建实时仪表板：加密货币实时交易示例

# Web 开发 # React # Typescript

实时更新是现代应用程序的基本功能。无论是实时股票价格、加密货币交易还是协作工具，对即时数据的需求都改变了我们构建软件的方式。这场革命的核心是 **WebSockets**，这是一种专为实时双向通信而设计的协议。

在本博客中，我们将探讨 WebSockets、其优势以及它们如何为**加密货币实时交易仪表板**提供支持。最后，您将了解 WebSockets 如何使实时应用程序变得高效且可扩展。

直播链接：https://crypto-tracker-jet-one.vercel.app/

什么是 WebSocket？

WebSockets 是一种通信协议，允许客户端（例如浏览器）与服务器之间进行**持久、全双工通信**。与需要请求-响应周期的 HTTP 不同，WebSockets 保持开放连接，使客户端和服务器能够同时发送和接收数据。

为什么使用 WebSocket？

低延迟：非常适合实时仪表板或游戏等时间敏感的应用程序。

高效：无需重复建立连接，减少开销。

双向通信：服务器和客户端都可以发起消息。

常见用例

实时动态：加密货币价格、股票市场更新、体育比分。

消息应用程序：即时聊天和通知系统。

游戏：需要实时同步的多人游戏。

物联网：设备与中央枢纽之间的通信。

构建加密货币实时交易仪表板

让我们深入研究一个示例：由 Binance WebSocket API 提供支持的 **Crypto Live Trades Dashboard**。此应用程序使用 **React**、**TypeScript** 和 **TailwindCSS** 作为前端，提供简洁且响应迅速的用户体验。

步骤 1：设置 WebSocket 通信

Binance API 提供用于实时加密货币交易数据的 WebSocket 流。以下是用于管理 WebSocket 连接的自定义 React 钩子：

import { useEffect, useState } from 'react';

interface Trade {
  price: string;
  quantity: string;
  symbol: string;
  time: number;
}

export const useCryptoTrades = (symbol: string) => {
  const [trades, setTrades] = useState([]);

  useEffect(() => {
    const ws = new WebSocket(`wss://stream.binance.com:9443/ws/${symbol.toLowerCase()}@trade`);

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const trade: Trade = {
        price: data.p,
        quantity: data.q,
        symbol: data.s,
        time: data.T,
      };
      setTrades((prevTrades) => [...prevTrades.slice(-9), trade]); // Keep the last 10 trades
    };

    return () => ws.close(); // Cleanup on component unmount
  }, [symbol]);

  return trades;
};

步骤 2：创建仪表板

下面展示了如何在 React 组件中使用 `useCryptoTrades` 钩子来呈现实时交易网格：

import React from 'react';
import { useCryptoTrades } from './hooks/useCryptoTrades';

const CryptoTradeCard = ({ symbol }: { symbol: string }) => {
  const trades = useCryptoTrades(symbol);

  return (
    
      {symbol}
      
        {trades.map((trade, index) => (
          
            {new Date(trade.time).toLocaleTimeString()} - Price: {trade.price}, Quantity: {trade.quantity}
          
        ))}
      
    
  );
};

const App = () => {
  const symbols = ['BTCUSDT', 'ETHUSDT', 'ADAUSDT', 'XRPUSDT', 'SOLUSDT'];

  return (
    
      Crypto Live Trades
      
        {symbols.map((symbol) => (
          
        ))}
      
    
  );
};

export default App;

步骤 3：使用 TailwindCSS 进行样式设置

以下是仪表板样式的基本设置：

/* Tailwind example */
.trade-card {
  @apply bg-white shadow-md rounded-lg p-4 text-center;
}

.grid {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4;
}

.dashboard {
  @apply max-w-7xl mx-auto p-6;
}

调试 WebSocket

Web 浏览器可以轻松调试 WebSocket 连接：

打开开发人员工具（F12）。

转到“网络”选项卡并按 WS 进行过滤。

观察握手、数据帧和任何错误。

在我们的示例中，与币安的 WebSocket 握手由“101 切换协议”状态确认，从而实现无缝实时交易数据流。

WebSocket 应用程序的最佳实践

重新连接逻辑：通过重试和指数退避处理连接断开。

心跳消息：发送定期的 ping/pong 消息以保持连接。

优化数据处理：仅发送或存储必要的数据以减少内存使用量。

安全连接：始终使用 wss:// 进行加密通信。

结论

WebSockets 是构建实时应用程序的重要工具，可提供低延迟和双向通信。无论您是在开发加密货币仪表板还是多人游戏，WebSockets 都是实现动态且引人入胜的用户体验的基础。

立即开始尝试使用 WebSockets，为您的应用程序带来实时交互。未来是实时的，现在您拥有构建它的工具！

CLIS.CC