使用 GraphQL 和 AWS AppSync 实现实时协作绘图

要查看此代码并启动此项目，请点击此处前往 GitHub 仓库。

我正在为即将在挪威 React Day和印度 React Day上发表的演讲准备几个演示。

在这些演讲中，我将演示 GraphQL 和 GraphQL 订阅的一些有趣用例。我的许多想法都集中在 GraphQL 订阅的实时性方面，因为它使我们能够非常轻松地构建实时功能。

我偶然发现了一个名为react-canvas-draw 的库，看起来非常棒。我喜欢它的一点是，它不仅可以用于绘制，还能将笔触保存到一个数组中，然后允许你按照创建时的顺序重新绘制它们！

这似乎正是我应用程序的完美用例。用于在画布上绘制线条的数据结构大致如下：

{
  lines: [
    { points: [{ x: 132, y: 144 }, { x: 133, y: 145 }], "brushColor":"#FF6D00","brushRadius": 4 },
    { points: [{ x: 132, y: 144 }, { x: 133, y: 145 }], "brushColor":"#000","brushRadius": 4 }
  ],
  width: "400px",
  height: "400px"
}

我的基本思路是找到一种方法来提取这些数据，并在 GraphQL API 中更新它，然后在更新时触发订阅。React Canvas Draw 提供了一些方法，使这一切变得非常简单。事实上，它提供了相当多的方法，可以完全控制画布的绘制。让我们来看看我使用的一些方法：

• getSaveData - 此方法返回当前画布状态
• loadSaveData - 此方法允许我们将整个数据集写入画布。
• simulateDrawingLines - 此方法在画布上绘制一条线。

既然我们知道了如何与画布交互，那么我们将如何与 GraphQL API 交互呢？

首先，我创建了一个基本架构：

type Canvas {
  id: ID!
  clientId: String!
  data: String!
}

我们需要关注的主要内容是id画布的唯一标识以及存储在名为 的字段中的画布数据data。

@model使用 AWS AppSync，我们可以通过在与 Amplify CLI 和GraphQL Transform 库一起使用时添加指令来搭建其余的 Schema 以及数据源和解析器：

type Canvas @model {
  id: ID!
  clientId: String!
  data: String!
}

从零开始构建此程序的步骤

为了启动并运行这个项目，我创建了一个新的 React 应用程序：

npx create-react-app canvas-app

接下来，我初始化了一个新的 Amplify 项目，然后添加了 API 和 schema。

amplify init

amplify add api

# When prompted, I use the schema I referenced above

amplify push

最后，我创建了Canvas.js 文件来存放应用程序的所有主要代码，并将此文件用作应用程序的主文件。

然后我创建了一个名为RCD.js的新文件，其中包含了该react-canvas-draw库。我将其本地引用，以防需要更新，同时也方便我随时尝试各种可用的方法。

就是这样！使用 GraphQL 订阅可以非常轻松地启动并运行实时应用程序。如果您有任何疑问，欢迎随时联系我。

我叫纳德·达比特 (Nader Dabit)。我是亚马逊云服务 (AWS) 的一名开发者布道师，负责AWS AppSync和AWS Amplify等项目。我专注于跨平台和云应用开发。