react +@excalidraw/excalidraw 实时协作

Question

react @excalidraw/excalidraw 实时协作

import React, { PureComponent, useRef } from 'react';
import { history, connect } from 'umi';
import { Modal, Collapse, Button, NavBar, Toast } from "antd-mobile";
import { LeftOutline } from 'antd-mobile-icons'
import styles from './index.less';
import { handlePath, userInfo } from '@/utils/globalcommon.js';
import * as excalidrawLib from "@excalidraw/excalidraw";
import { Excalidraw, defaultLang, languages, MainMenu, MobileFooter, Sidebar, Footer, exportToBlob, LiveCollaborationTrigger } from "@excalidraw/excalidraw";

@connect(({ whiteboard, loading }) => ({
  whiteboard,
  loading: loading.models.whiteboard,
}))
class Whiteboard extends PureComponent {
  state = {
    excalidrawAPI: null,
    exportEmbedScene: true,
    shareDialogState: {},
    scene: []
  }
  initialData = {}
  componentWillUnmount() {
  }
  onChange=(elements)=>{}

  render() {
    const renderMenu = () => {
      const that = this
      return (
        <MainMenu>
          {/* 协调合作 */}
          <MainMenu.DefaultItems.LiveCollaborationTrigger
            isCollaborating={false}
            onSelect={() =>
              that.setShareDialogState()
            }
          />
        </MainMenu>
      );
    };
    return (
      <div className={styles.whiteboardWarpper}>

        <div className={styles.contentBox}
          excalidrawLib={excalidrawLib}
        >
          <Excalidraw
            onChange={(elements, state) => {
              this.setState({
                scene: elements
              })
              this.onChange(elements)
            }}
            langCode={"zh-CN"} //简体中文
            excalidrawAPI={(api) => this.setState({ excalidrawAPI: api })}
            initialData={this.initialData}
            renderTopRightUI={() => (
              <LiveCollaborationTrigger
                isCollaborating={true}
                onSelect={() => {
                  window.alert("You clicked on collab button");
                  // setIsCollaborating(true);
                }}
              />
            )}
          >
            {renderMenu()}
          </Excalidraw>
        </div>
      </div >
    );
  }
}
export default Whiteboard;

实现实时协作；

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要在React中使用Excalidraw库实现实时协作功能，你需要使用Excalidraw提供的实时协作API。以下是一个简化的步骤说明，基于你提供的代码进行扩展：

步骤 1: 安装依赖

确保你已经安装了Excalidraw库和其他必要的依赖。

步骤 2: 设置实时协作API

在Excalidraw的<Excalidraw>组件中，使用excalidrawAPI属性来访问Excalidraw的API。通过这个API，你可以实现实时协作功能。

步骤 3: 实现实时协作逻辑

在你的组件中，你需要实现实时协作的逻辑。这通常涉及到与服务器通信，以同步用户的绘图操作到其他用户的浏览器。

步骤 4: 使用LiveCollaborationTrigger组件

在Excalidraw的<MainMenu>组件中，使用<LiveCollaborationTrigger>组件来显示实时协作的触发按钮。当用户点击这个按钮时，你可以启动实时协作功能。

步骤 5: 处理实时协作事件

在Excalidraw的onChange回调中，你需要处理绘图更改事件，并将这些更改发送到服务器，以便其他用户可以看到这些更改。同时，你还需要处理来自服务器的更新，并更新本地Excalidraw实例以反映这些更改。

代码示例（简化版）

以下是一个简化的代码示例，展示了如何在React中使用Excalidraw实现实时协作功能：

import React, { useRef } from 'react';
import { Excalidraw, LiveCollaborationTrigger } from "@excalidraw/excalidraw";

class RealTimeCollaborationWhiteboard extends React.Component {
  state = {
    excalidrawAPI: null,
    isCollaborating: false, // 控制是否处于实时协作模式
  };
  // 其他状态和函数...
  render() {
    return (
      <div className={styles.whiteboardWarpper}>
        <div className={styles.contentBox}>
          <Excalidraw 
            onChange={(elements, state) => { /* 处理绘图更改事件 */ }} 
            excalidrawAPI={(api) => this.setState({ excalidrawAPI: api })} 
            isCollaborating={this.state.isCollaborating} // 将实时协作状态传递给Excalidraw组件
          >
            <LiveCollaborationTrigger 
              isCollaborating={this.state.isCollaborating} 
              onClick={() => this.toggleCollaboration()} // 点击时切换实时协作状态
            />
            {/* 其他菜单项... */}
          </Excalidraw>
        </div>
      </div> 
    );
  }
  toggleCollaboration = () => {
    this.setState(prevState => ({ isCollaborating: !prevState.isCollaborating })); // 切换实时协作状态
    // 在此处添加启动或停止实时协作的代码逻辑，例如与服务器通信等。
  };
  // 其他函数和生命周期方法...
}
export default RealTimeCollaborationWhiteboard;

请注意，这只是一个简化的示例，你需要根据你的实际需求进行适当的修改和扩展。特别是实时协作的逻辑需要处理与服务器的通信，这通常涉及到后端开发和API设计。你可能还需要处理用户认证、权限控制以及数据同步等问题。