React Native应用集成Socket获取实时股票价格的稳定NPM包推荐

1. socket.io-client #

这是目前生态最稳定的WebSocket客户端库之一，完全满足你的需求，之前可能是用法没到位：

• 带JWT的连接方式：直接把JWT Token作为URL查询参数传入，部分服务支持通过请求头携带，也可配置extraHeaders实现
• 发送订阅事件：连接成功后调用emit方法发送指定格式的订阅数据
• 接收实时数据：监听服务端推送的对应事件，获取股票实时价格

示例代码：

import io from 'socket.io-client';
import { useEffect } from 'react';

const yourJwtToken = 'your-actual-jwt-token';
const socketUrl = `wss://your-stock-api-endpoint?token=${yourJwtToken}`;

// 初始化Socket连接
const socket = io(socketUrl, {
  transports: ['websocket'], // 强制使用WebSocket传输，避免降级为轮询
  reconnection: true, // 开启自动重连
  reconnectionDelay: 1000, // 重连间隔
});

useEffect(() => {
  // 连接成功后发送订阅请求
  socket.on('connect', () => {
    socket.emit('subscribe', {
      data: [8967426, 8967938] // Instrument Tokens
    });
  });

  // 接收实时股票数据
  socket.on('stock-update', (data) => {
    // 处理返回的实时价格数据
    console.log('实时股票数据:', data);
  });

  // 监听连接异常
  socket.on('connect_error', (error) => {
    console.error('Socket连接失败:', error);
  });

  // 组件卸载时断开连接
  return () => {
    socket.disconnect();
  };
}, []);

如果服务要求JWT放在请求头，可修改连接配置：

const socket = io(socketUrl, {
  transports: ['websocket'],
  extraHeaders: {
    Authorization: `Bearer ${yourJwtToken}`
  }
});

2. react-native-websocket（原生WebSocket封装） #

如果需要更轻量、自定义程度更高的方案，这个库基于React Native原生WebSocket实现，适合严格遵循自定义协议的场景：

• 带JWT的连接方式：将Token放在URL查询参数中
• 发送订阅消息：连接打开后发送JSON格式的订阅数据
• 接收实时数据：监听onMessage事件解析返回的JSON数据

示例代码：

import WebSocket from 'react-native-websocket';

const StockPriceMonitor = () => {
  const yourJwtToken = 'your-actual-jwt-token';
  const socketUrl = `wss://your-stock-api-endpoint?token=${yourJwtToken}`;

  const handleSocketOpen = (event) => {
    // 发送订阅请求
    const subscribePayload = JSON.stringify({
      event: "subscribe",
      data: [8967426, 8967938]
    });
    event.target.send(subscribePayload);
  };

  const handleSocketMessage = (event) => {
    const realtimeData = JSON.parse(event.data);
    // 处理实时股票价格
    console.log('实时更新:', realtimeData);
  };

  return (
    <WebSocket
      url={socketUrl}
      onOpen={handleSocketOpen}
      onMessage={handleSocketMessage}
      onError={(err) => console.error('连接错误:', err)}
      onClose={() => console.log('连接关闭')}
      reconnect // 开启自动重连
    />
  );
};

export default StockPriceMonitor;

关键注意事项 #

• 稳定性保障：开启自动重连机制，监听连接状态变化，在组件卸载时主动断开连接避免内存泄漏
• 数据格式校验：接收数据后务必解析为JSON格式，匹配服务端返回的数据结构
• Token过期处理：监听连接错误，若因Token过期导致失败，需重新获取Token并重建连接

内容的提问来源于stack exchange，提问作者Mayur Prajapati - MeProgrammer