使用 PartyKit 构建实时协作代码编辑器

在当今的数字世界中，实时协作变得更加重要。无论是远程工作、在线游戏还是共享创意项目，实时交互和协作都是许多现代应用程序的关键功能。

在本文中，我们将探讨 PartyKit，这是一个功能强大的 SDK，旨在简化实时协作应用程序的开发。我们还将演示如何使用 PartyKit 在 React 中构建具有协作功能的实时代码编辑器。

跳跃前进：

什么是 PartyKit？

PartyKit 是一款 SDK，旨在利用 WebSocket 构建实时协作应用程序，从而简化流程。它支持Y.js、automerge 和replicache 等多种流行的协作框架，使开发人员能够以最少的代码快速轻松地向现有应用程序添加实时协作功能。

PartyKit 还使开发人员能够构建多人应用程序并向现有项目添加实时体验，而无需担心实时基础设施的操作复杂性和成本。让我们看一下它的一些主要功能：

易于使用：仅需要很少的编码工作，使用简单的 npm 命令，即可使用服务器和客户端组件创建新应用程序
实时协作：通过 WebSocket 事件促进实时通信，从而能够向客户端发送、侦听和广播消息
边缘计算：利用边缘计算网络智能路由和优化全球用户的连接，支持可扩展性，无需开发人员干预
开发语言支持：支持现代 JavaScript、TypeScript、npm 模块和 WebAssembly 模块
开发者工具：包括本地开发工具、部署预览和秘密管理，实现与开发工作流程和堆栈的无缝集成
框架支持：支持Y.js、automerge、replicache等流行的协作框架，允许向现有应用程序快速添加实时协作功能

使用 PartyKit 构建多人游戏应用程序

为了演示如何利用 PartyKit 创建多人应用程序，让我们使用 React 和 PartyKit 构建一个具有协作功能的实时代码编辑器。

设置 PartyKit

首先，通过运行以下命令来安装所需的依赖项：

> yarn add react react-dom partykit partysocket
> yarn add -D parcel @types/react @types/react-dom

创建服务器

PartyKit 应用程序的核心元素由服务器和客户端组成。服务器是一个导出对象的 JavaScript 模块；该对象概述了服务器的行为，主要是响应 WebSocket 事件。PartyKit 客户端与该服务器建立连接并侦听事件。

这是服务器端代码；这是一个用 TypeScript 编写的简单脚本：

import type { PartyKitServer } from "partykit/server";

export default {
  async onConnect(ws, room) {
    const codeEditorValue = (await room.storage.get(
      "codeEditorValue"
    )) as string;

    if (codeEditorValue) ws.send(codeEditorValue);
  },
  onMessage(message, ws, room) {
    room.storage.put("codeEditorValue", message);
    room.broadcast(message as string, [ws.id]);
  },
} satisfies PartyKitServer;

上面的代码PartyKitServer从partykit/server模块导入类型。然后它导出一个满足该PartyKitServer接口的对象，这意味着它包含 PartyKit 期望处理服务器端操作的方法。

导出的对象包含两个方法：

onConnect(ws, room)：每当有新的 client( ws) 连接到room. 它从存储中检索代码编辑器的当前值room。如果存储了值，则会将该值发送到新连接的客户端。这确保新客户端在连接时接收到代码编辑器的当前状态
onMessage(message, ws, room)：每当从客户端收到消息时就会触发此方法。它用中收到的room新内容更新存储。接下来，它将将此消息广播到连接到的所有客户端，但发送该消息的客户端除外codeEditorValuemessagemessageroommessage

部署应用程序

现在，让我们使用以下命令将应用程序部署到云：

npx partykit deploy server/index.ts --name vijit-ail-demo

请务必记下已部署代码的生产 URL。稍后您将需要它来从前端代码建立到服务器的连接。

配置前端

接下来，让我们继续配置前端。以下代码片段将有助于创建基本的 React 应用程序：

<!-- app/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>PartyKit App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.tsx"></script>
  </body>
</html>

// app/index.tsx

import { createRoot } from "react-dom/client";
import React from "react";
import { App } from "./App";

const container = document.getElementById("app") as HTMLElement;
const root = createRoot(container);
root.render(<App />);

运行以下命令来安装该monaco-editor软件包uuid：

yarn add @monaco-editor/react monaco-editor uuid

这monaco-editor是一个强大且功能丰富的代码编辑器，为 VS Code 提供支持。它将其集成到我们的应用程序中将提供复杂的编辑界面，从而实现无缝的代码编辑和协作。

该uuid包对于生成唯一标识符是必需的。这些标识符将有助于区分我们的协作代码编辑器应用程序中的不同会话。

设置协作代码编辑器

以下代码使用 React 应用程序中的PartySocket 客户端 API和Monaco Editor设置了一个简单的实时协作代码编辑器。当用户在编辑器中键入时，该值将发送到服务器并广播到所有其他连接的客户端，确保所有用户实时看到相同的内容：

import PartySocket from "partysocket";
import React, { useEffect, useState } from "react";
import Editor from "@monaco-editor/react";

import * as uuid from "uuid";

let roomId = window.location.hash?.substring(1);

if (!roomId) {
  roomId = uuid.v4();
  window.location.hash = roomId;
}

const socket = new PartySocket({
  host: "vijit-ail-demo.vijit-ail.partykit.dev",
  room: roomId,
});

export function App() {
  const [editorValue, setEditorValue] = useState("");

  const handleChange = (value: string | undefined) => {
    if (value === undefined) return;

    socket.send(value);
  };

  const onIncomingMessage = (message: MessageEvent) => {
    setEditorValue(message.data);
  };

  useEffect(() => {
    socket.addEventListener("message", onIncomingMessage);

    return () => socket.removeEventListener("message", onIncomingMessage);
  }, []);

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      theme="vs-dark"
      onChange={handleChange}
      value={editorValue}
    />
  );
}

在上面的代码中，我们roomId从 URL 中提取。如果它不存在，我们会使用roomId该uuid包生成一个新的包并更新 URL。

接下来，我们创建一个新PartySocket实例，并在其配置中指定host和room。在App组件中，我们定义了一个状态editorValue来保存编辑器的当前值。

每当编辑器的当前值发生变化时，该handleChange函数都会将其发送到服务器。每当从服务器收到新消息时，该onIncomingMessage函数都会更新状态。editorValue

在Hook中useEffect，我们为. 最后，我们从渲染组件，传递必要的属性（包括）和函数作为回调。messagesocketEditor@monaco-editor/reacteditorValuehandleChangeonChange

这是代码的最终结果，两个用户之间的实时协作：动图

PartyKit 与 Socket.IO

Socket.IO长期以来因在应用程序中实现基于事件的实时双向通信而闻名。它是一个可靠的库，使用 WebSockets 作为传输协议，并在不支持 WebSockets 的环境中使用 HTTP 长轮询进行回退。

另一方面，PartyKit 是一个相对较新的进入者，但具有许多功能，使其成为一个有吸引力的替代方案。以下是 PartyKit 和 Socket.IO 之间的一些主要区别：

内置协作框架支持：PartyKit 的显着优势之一是其对 Y.js、automerge 和 replicache 等流行协作框架的内置支持。这对于开发需要实时协作功能的应用程序的开发人员特别有利，因为它消除了手动集成这些框架的需要，从而节省了时间并降低了复杂性。Socket.IO 不提供这种内置支持，需要开发人员手动合并他们希望使用的任何协作框架
边缘计算：PartyKit 利用边缘计算的力量来优化连接并支持全球用户群，无需开发人员手动干预。对于用户分散在全球的应用程序来说，这是一个显着的优势，因为无论用户位于何处，它都可以确保低延迟和无缝的用户体验。相比之下，Socket.IO 没有对边缘计算的内置支持，并且优化全球用户群的连接需要额外的手动设置和基础设施
开发人员友好的工具：PartyKit 有一套开发人员友好的工具，包括本地开发工具、部署预览和秘密管理。这些工具简化了开发过程，并与现有的开发工作流程无缝集成。Socket.IO 虽然提供了强大的功能集，但不包含这些附加工具，这意味着开发人员可能需要花费额外的时间来设置他们的开发环境
简化开发流程：PartyKit 旨在尽可能简化开发流程。使用服务器和客户端组件创建新应用程序需要最少的编码工作，并且可以通过简单的 npm 命令来实现。Socket.IO 虽然易于管理，但通常需要更多设置并对其 API 和功能有更深入的了解
语言支持：PartyKit 支持现代 JavaScript、TypeScript、npm 模块和 WebAssembly 模块。这为开发人员提供了灵活性，并允许使用他们最熟悉的工具和语言。Socket.IO 主要支持 JavaScript，虽然它可以与 TypeScript 和其他编译为 JavaScript 的语言一起使用，但它没有对 WebAssembly 模块的内置支持

虽然 Socket.IO 仍然是一个功能强大且广泛使用的实时应用程序库，但 PartyKit 提供了一些独特的优势，使其成为一个有吸引力的替代方案，特别是对于构建实时协作应用程序的开发人员或寻求内置边缘计算支持和开发人员的开发人员来说友好的工具。

结论

PartyKit 是一款功能强大且用户友好的 SDK，可简化实时协作应用程序的开发。本文演示了如何使用 React 和 PartyKit 构建具有协作功能的实时代码编辑器。我们研究了 PartyKit 相对于 Socket.IO 提供的优势和改进。凭借其易用性、对流行协作框架的支持以及内置的开发人员工具，PartyKit 是希望构建实时协作应用程序的开发人员的绝佳选择。

{{userData.name}}已认证