如何通过WebSocket实现FastAPI与react-admin的对接？

核心思路 #

React-Admin的dataProvider是数据层核心，默认的jsonServerProvider基于HTTP协议，必须自定义支持WebSocket的dataProvider，将WebSocket接收的数据映射到React-Admin的list、show等CRUD操作上。

实现步骤 #

1. 封装WebSocket连接工具 #

先写一个复用的WebSocket模块，负责连接管理、消息收发和重连逻辑：

// src/utils/websocket.js
class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.connection = null;
    this.messageHandlers = new Map();
    this.connect();
  }

  connect() {
    this.connection = new WebSocket(this.url);
    
    this.connection.onopen = () => console.log('WebSocket连接已建立');

    this.connection.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const handler = this.messageHandlers.get(data.type);
      handler && handler(data.payload);
    };

    this.connection.onerror = (error) => console.error('WebSocket错误:', error);

    this.connection.onclose = () => {
      console.log('WebSocket连接断开，5秒后重连');
      setTimeout(() => this.connect(), 5000);
    };
  }

  onMessage(type, handler) {
    this.messageHandlers.set(type, handler);
  }

  sendMessage(type, payload) {
    if (this.connection.readyState === WebSocket.OPEN) {
      this.connection.send(JSON.stringify({ type, payload }));
    } else {
      console.warn('WebSocket未连接，无法发送消息');
    }
  }
}

const wsClient = new WebSocketClient('ws://你的FastAPI服务器地址/ws/send-data/');
export default wsClient;

2. 自定义WebSocket DataProvider #

按照React-Admin的dataProvider规范，实现getList和getOne方法，关联WebSocket消息：

// src/dataProvider/websocketDataProvider.js
import wsClient from '../utils/websocket';

const websocketDataProvider = {
  // 处理列表请求（对应React-Admin的list页面）
  getList: (resource, params) => {
    return new Promise((resolve) => {
      wsClient.onMessage('user_list', (data) => {
        resolve({
          data: data.map(item => ({ ...item, id: item.user_inner })), // 确保id字段匹配React-Admin要求
          total: data.length
        });
      });
      wsClient.sendMessage('request_user_list', params);
    });
  },

  // 处理单条数据请求（对应React-Admin的show页面）
  getOne: (resource, params) => {
    return new Promise((resolve) => {
      const detailType = `user_detail_${params.id}`;
      wsClient.onMessage(detailType, (data) => {
        resolve({ data: { ...data, id: data.user_inner } });
        // 用完移除处理器，避免重复监听
        wsClient.messageHandlers.delete(detailType);
      });
      wsClient.sendMessage('request_user_detail', { user_inner: params.id });
    });
  },

  // 未用到的CRUD方法可暂时返回拒绝状态
  create: () => Promise.reject('Not implemented'),
  update: () => Promise.reject('Not implemented'),
  delete: () => Promise.reject('Not implemented'),
  getMany: () => Promise.reject('Not implemented'),
  getManyReference: () => Promise.reject('Not implemented'),
};

export default websocketDataProvider;

3. 调整FastAPI的WebSocket消息格式 #

让FastAPI返回的消息带类型标识，方便前端区分消息用途：

• 返回用户列表时的消息格式：

{
  "type": "user_list",
  "payload": [{"user_inner": "1", "name": "张三"}, {"user_inner": "2", "name": "李四"}]
}

• 返回单个用户时的消息格式：

{
  "type": "user_detail_1",
  "payload": {"user_inner": "1", "name": "张三", "email": "zhangsan@example.com"}
}

4. 在React-Admin中使用自定义DataProvider #

在入口文件替换默认的dataProvider：

// src/App.js
import { Admin, Resource } from 'react-admin';
import websocketDataProvider from './dataProvider/websocketDataProvider';
import { UserList, UserShow } from './components/users';

const App = () => (
  <Admin dataProvider={websocketDataProvider}>
    <Resource name="users" list={UserList} show={UserShow} />
  </Admin>
);

export default App;

关键注意事项 #

• React-Admin的dataProvider方法必须返回Promise，因此用Promise包裹WebSocket的消息接收逻辑。
• 单用户消息用user_detail_${user_inner}作为类型，避免不同请求的消息混淆。
• 处理单条数据后移除对应消息处理器，防止重复触发。
• 若需实时更新数据，可在WebSocket收到新消息时调用React-Admin的useRefresh钩子刷新页面。

内容的提问来源于stack exchange，提问作者Matthew Williams