我正在设计一个类似 google-doc 的协作工具,使用最新的 React + Slate 作为前端,后端使用 Flask。我在 React 中使用 socket-io 和在 Python 中使用 flask_socketio 来发出和收听来自其他合作者的内容。反应应用程序代码:
const RichTextExample = props => {
const [value, setValue] = useState(props.currentEditor);
const editor = useMemo(() => withHistory(withReact(createEditor())), []);
const id = useRef(`${Date.now()}`);
const remote = useRef(false);
const socketchange = useRef(false);
useEffect(() => {
socket.on("new-remote-operations", ({ editorId, ops, doc_id }) => {
if (id.current !== editorId && doc_id === props.document.doc_id) {
remote.current = true;
JSON.parse(ops).forEach(op => {
console.log("LISTEN: applying op", op);
editor.apply(op);
});
remote.current = …Run Code Online (Sandbox Code Playgroud)