在Redux中集成Liveblocks Presence实现实时协作状态管理-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00573/article/details/148550295

在Redux中集成Liveblocks Presence实现实时协作状态管理

liveblocks Liveblocks is a real-time collaboration infrastructure for developers. 项目地址: https://gitcode.com/gh_mirrors/li/liveblocks

前言

在现代Web应用中，实时协作功能变得越来越重要。Liveblocks作为一个强大的实时协作平台，提供了Presence（在线状态）功能，可以轻松实现用户状态的实时同步。本文将详细介绍如何在Redux应用中集成Liveblocks Presence功能，实现用户状态的实时共享与同步。

环境准备

在开始之前，请确保已经完成以下准备工作：

已经安装了Liveblocks相关依赖包
已经在Redux store中配置了Liveblocks增强器
已经建立了与Liveblocks服务器的连接

如果尚未完成这些基础配置，建议先完成基础集成再进行后续操作。

获取房间内其他用户信息

在协作应用中，了解当前房间内的其他用户是基本需求。通过Liveblocks与Redux的集成，可以轻松获取这些信息：

import { useSelector } from "react-redux";

function UserList() {
  // 获取当前房间内的其他用户
  const others = useSelector((state) => state.liveblocks.others);
  
  return (
    <div>
      <h3>当前在线用户</h3>
      <ul>
        {others.map((user, index) => (
          <li key={index}>{user.id}</li>
        ))}
      </ul>
    </div>
  );
}

others数组包含了当前房间内除自己外的所有用户信息，每个用户对象都包含基本的连接信息和可选的Presence数据。

配置Presence映射

Presence是Liveblocks的核心概念之一，它允许用户实时共享自己的状态。在Redux中，我们需要明确哪些状态需要被共享：

import { configureStore } from "@reduxjs/toolkit";
import { enhancer } from "@liveblocks/redux";
import slice from "./slice";

const initialState = {
  cursor: { x: 0, y: 0 },  // 光标位置
  selectedItem: null        // 当前选中的项目
};

const store = configureStore({
  reducer: slice.reducer,
  enhancers: [
    enhancer({
      client,  // Liveblocks客户端实例
      presenceMapping: {
        cursor: true,      // 共享光标位置
        selectedItem: true // 共享选中项
      },
    }),
  ],
});

在这个配置中，我们通过presenceMapping指定了需要共享的状态字段。当这些字段发生变化时，Liveblocks会自动将更新广播给房间内的其他用户。

更新用户Presence

更新Presence与常规Redux操作无异，只需正常dispatch action即可：

import { useDispatch } from "react-redux";
import { setCursor } from "./store";

function Canvas() {
  const dispatch = useDispatch();

  // 当鼠标移动时更新光标位置
  const handlePointerMove = (e) => {
    dispatch(setCursor({
      x: e.clientX,
      y: e.clientY
    }));
  };

  return (
    <div 
      className="canvas"
      onPointerMove={handlePointerMove}
    />
  );
}

这种设计保持了Redux的开发模式，开发者无需学习新的API即可实现实时协作功能。

获取其他用户的Presence

获取其他用户的Presence数据同样简单：

import { useSelector } from "react-redux";

function OtherCursors() {
  const others = useSelector((state) => state.liveblocks.others);
  
  // 提取所有用户的光标位置
  const cursors = others.map(user => user.presence?.cursor).filter(Boolean);

  return (
    <>
      {cursors.map((cursor, index) => (
        <div 
          key={index}
          className="cursor"
          style={{
            left: cursor.x,
            top: cursor.y
          }}
        />
      ))}
    </>
  );
}

需要注意的是，用户的Presence数据可能为undefined，因此在实际使用时需要进行适当的空值检查。