React+React Query实现跨账号队列管理实时同步方案咨询

问题根源 #

React Query的queryClient.invalidateQueries()是客户端本地操作，仅对当前浏览器实例/账号生效，无法触发其他客户端的查询刷新——因为不同客户端之间没有直接通信机制，服务器也不会主动通知数据变更。

可行解决方案 #

1. WebSocket 实时推送（推荐） #

通过WebSocket建立客户端与服务器的双向连接，当令牌变更时，服务器主动推送更新事件给所有在线的目标客户端，客户端收到事件后触发React Query的查询失效。

客户端实现

import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';

function QueueSyncListener() {
  const queryClient = useQueryClient();

  useEffect(() => {
    // 建立WebSocket连接
    const socket = new WebSocket('ws://your-server-domain/queue-updates');
    
    // 监听服务器推送的更新事件
    socket.onmessage = (event) => {
      const updateData = JSON.parse(event.data);
      if (updateData.eventType === 'TOKEN_CHANGED') {
        // 失效队列相关查询，触发重新获取
        queryClient.invalidateQueries(['hospital-queue']);
      }
    };

    // 断开连接清理
    return () => {
      socket.close();
    };
  }, [queryClient]);

  return null; // 无需渲染UI
}

服务器端配合

在令牌变更的业务接口（比如更新令牌状态、叫号接口）中，当操作完成后，向所有连接的WebSocket客户端（需过滤同一医院/权限组的客户端）发送TOKEN_CHANGED事件。

2. Server-Sent Events (SSE) 单向推送 #

SSE是轻量的单向推送方案，适合仅服务器向客户端发消息的场景，比WebSocket更简单（无需处理双向通信）。

客户端实现

import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';

function QueueSSEListener() {
  const queryClient = useQueryClient();

  useEffect(() => {
    const eventSource = new EventSource('/api/queue-stream');
    
    eventSource.onmessage = (event) => {
      const updateData = JSON.parse(event.data);
      if (updateData.type === 'TOKEN_UPDATED') {
        queryClient.invalidateQueries(['hospital-queue']);
      }
    };

    // 处理连接错误
    eventSource.onerror = () => {
      eventSource.close();
      // 可添加重连逻辑
    };

    return () => {
      eventSource.close();
    };
  }, [queryClient]);

  return null;
}

服务器端配合

实现SSE接口，保持HTTP连接长开，当令牌变更时，向订阅的客户端发送事件流。

3. 轮询（临时替代方案） #

如果暂时无法实现推送机制，可以用React Query的refetchInterval配置定时刷新查询，缺点是实时性差、服务器压力大，仅适合小流量场景。

import { useQuery } from '@tanstack/react-query';
import fetchQueueData from './api/fetchQueueData';

function QueueComponent() {
  const { data: queueList } = useQuery({
    queryKey: ['hospital-queue'],
    queryFn: fetchQueueData,
    refetchInterval: 30000, // 每30秒刷新一次
  });

  // 渲染队列UI...
}

关键注意事项 #

• 权限控制：推送事件时需过滤客户端，仅发送给同一医院/科室的授权账号，避免数据泄露。
• 查询Key统一：确保所有队列相关查询使用相同的queryKey，保证invalidateQueries能命中所有需要刷新的查询。
• 重连机制：WebSocket/SSE连接断开后，需实现自动重连逻辑，避免丢失更新事件。

内容的提问来源于stack exchange，提问作者Muhammad Abbas Khan