React-Admin 实时数据功能深度解析与实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00290/article/details/148361011

React-Admin 实时数据功能深度解析与实战指南

react-admin react-admin: 是一个基于 React 和 RESTful API 的开源前端框架，用于快速构建具有完整权限管理功能的 Web 应用程序。适合开发者创建企业级的数据管理和呈现系统。项目地址: https://gitcode.com/gh_mirrors/re/react-admin

前言

在现代Web应用开发中，实时数据功能已成为提升用户体验的关键要素。React-Admin作为优秀的前端管理框架，通过ra-realtime模块提供了强大的实时数据支持。本文将全面解析React-Admin的实时数据功能实现原理，并通过具体示例展示如何在实际项目中应用这些功能。

实时数据基础概念

核心方法签名

要实现实时数据功能，数据提供者(dataProvider)需要扩展三个核心方法：

// 订阅主题
subscribe(topic, callback): Promise

// 取消订阅
unsubscribe(topic, callback): Promise

// 发布事件（可选，通常由服务端完成）
publish(topic, event): Promise

锁机制方法

对于需要防止并发编辑的场景，还需要实现以下锁相关方法：

lock(resource, { id, identity, meta })
unlock(resource, { id, identity, meta })
getLock(resource, { id, meta })
getLocks(resource, { meta })

主流后端集成方案

Supabase实时集成

Supabase基于PostgreSQL的变更捕获功能提供实时能力。集成步骤如下：

启用实时功能：在Supabase控制台或通过SQL命令启用表变更捕获

-- 示例：为sales表启用实时更新
ALTER PUBLICATION supabase_realtime ADD TABLE sales;

前端集成代码

import { createClient } from '@supabase/supabase-js';
import { supabaseDataProvider } from 'ra-supabase';
import { addRealTimeMethodsBasedOnSupabase } from '@react-admin/ra-realtime';

const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

const dataProvider = supabaseDataProvider({
    instanceUrl: SUPABASE_URL,
    apiKey: SUPABASE_KEY,
    supabaseClient
});

// 增强数据提供者
const realTimeDataProvider = addRealTimeMethodsBasedOnSupabase({
    dataProvider,
    supabaseClient,
});

API Platform集成

API Platform使用Mercure协议实现实时通信：

import { addRealTimeMethodsBasedOnApiPlatform } from '@react-admin/ra-realtime';

const dataProviderWithRealtime = addRealTimeMethodsBasedOnApiPlatform(
    dataProvider,
    MERCURE_HUB_URL,
    JWT_TOKEN,
    API_PLATFORM_TOPIC_URL
);

纯Mercure集成

对于使用Mercure协议的后端：

import { addRealTimeMethodsBasedOnMercure } from '@react-admin/ra-realtime';

const dataProviderWithRealtime = addRealTimeMethodsBasedOnMercure(
    dataProvider,
    MERCURE_HUB_URL,
    JWT_TOKEN
);

自定义适配器开发

当使用WebSocket、长轮询等非标准协议时，需要自定义适配器。下面是一个基于内存的简单实现示例：

let subscriptions = [];

const customDataProvider = {
    // ...标准CRUD方法
    
    subscribe: async (topic, callback) => {
        subscriptions.push({ topic, callback });
        return { data: null };
    },

    unsubscribe: async (topic, callback) => {
        subscriptions = subscriptions.filter(
            sub => sub.topic !== topic || sub.callback !== callback
        );
        return { data: null };
    },

    publish: (topic, event) => {
        subscriptions.forEach(sub => {
            if (sub.topic === topic) {
                sub.callback(event);
            }
        });
        return { data: null };
    }
};

主题与事件规范

主题命名约定

资源级别主题：resource/[资源名]（如resource/posts）
记录级别主题：resource/[资源名]/[ID]（如resource/posts/123）

事件格式要求

interface RealtimeEvent {
    type: string;  // 'created' | 'updated' | 'deleted' | 自定义类型
    payload: any;  // 事件负载数据
}

CRUD事件规范

创建事件示例：

{
    topic: `resource/${resource}`,
    event: {
        type: 'created',
        payload: { ids: [id] },
    }
}

更新事件示例：

{
    topic: `resource/${resource}/${id}`,
    event: {
        type: 'updated',
        payload: { ids: [id] },
    }
}

锁机制详解

锁数据结构

interface ResourceLock {
    resource: string;     // 资源名称
    recordId: string|number; // 记录ID
    identity: string;     // 锁定者标识
    createdAt: string;    // ISO8601时间戳
}

基于资源的锁实现

ra-realtime提供了基于专用lock资源的实现方案：

import { addLocksMethodsBasedOnALockResource } from '@react-admin/ra-realtime';

const dataProviderWithLocks = addLocksMethodsBasedOnALockResource(
    dataProvider // 基础数据提供者
);

后端需要提供包含以下字段的lock资源：

{
    "id": 123,
    "identity": "user123",
    "resource": "posts",
    "recordId": 456,
    "createdAt": "2023-01-01T12:00:00Z"
}

实战应用示例

实时消息列表组件

import React, { useState, useEffect } from 'react';
import { useDataProvider, useNotify } from 'react-admin';

const RealTimeMessageList = () => {
    const [messages, setMessages] = useState([]);
    const dataProvider = useDataProvider();
    const notify = useNotify();

    useEffect(() => {
        const handleNewMessage = (event) => {
            setMessages(prev => [...prev, event.payload]);
            notify('收到新消息');
        };

        // 订阅消息主题
        dataProvider.subscribe('messages', handleNewMessage);
        
        // 组件卸载时取消订阅
        return () => {
            dataProvider.unsubscribe('messages', handleNewMessage);
        };
    }, [dataProvider, notify]);

    return (
        <div>
            <h3>实时消息</h3>
            <ul>
                {messages.map((msg, index) => (
                    <li key={index}>{msg.content}</li>
                ))}
            </ul>
        </div>
    );
};

实时数据列表视图

import { List, Datagrid, TextField } from 'react-admin';
import { ListLiveUpdate } from '@react-admin/ra-realtime';

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="body" />
        </Datagrid>
        <ListLiveUpdate />  {/* 自动处理实时更新 */}
    </List>
);