本文将介绍如何使用 GraphQL 构建实时聊天应用。GraphQL 是一种新型的 API 查询语言，可以使前端应用可以更高效、更灵活地获取到所需的数据。实时聊天应用是一种典型的实时应用，通过 GraphQL 可以轻松实现。
技术概述
在本教程中，我们将使用以下技术来构建实时聊天应用：
- GraphQL
- Apollo Server
- Apollo Client
- React
准备工作
在开始构建前，请确保您已经安装好以下软件：
- Node.js
- npm
创建 GraphQL 服务器
我们将使用 Apollo Server 来创建一个 GraphQL 服务器。首先，创建一个新的项目并安装以下依赖项：
npm init -y npm install apollo-server graphql nodemon
接下来，在项目根目录下创建一个 index.js 文件，在其中创建一个 ApolloServer 实例并定义一个 GraphQL schema。在 schema 中，我们定义了一个名为 Message 的类型，它包含 text 和 timestamp 两个字段：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ------- -
----- -------
---------- -------
-
---- ----- -
--------- -----------
-
--
----- --------- - -
------ -
--------- -- -- -
- ----- --------- ---------- --- -------------------- --
- ----- ---- --- ------ ---------- --- -------------------- -
-
-
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---在 resolvers 中，我们实现了一个名为 messages 的查询，它返回了两个硬编码的消息。现在启动服务器并访问 http://localhost:4000/graphql，您应该可以看到 GraphQL Playground 工具界面。
在 GraphQL Playground 中，您可以使用 messages 查询获取消息列表：
创建 React 应用
为了展示我们的实时聊天应用，我们将使用 React 创建一个简单的聊天界面。请在终端中输入以下命令：
npx create-react-app client cd client npm install apollo-boost graphql react-apollo subscriptions-transport-ws
现在我们将使用 create-react-app 创建了一个名为 client 的新项目，并在其中安装了必需的依赖项。接下来，我们将更新 src/index.js ，并在其中创建一个 ApolloClient 实例和一个用于显示消息和输入新消息的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
------ - -------------- - ---- ---------------
------ --- ---- --------
----- ------ - --- --------------
---- --------------------------------
------------ -
--------- -
--------- --
--
---------- ---
--------- -
---- ------- -
----- -------
---------- -------
-
---- ----- -
--------- -----------
-
---- -------- -
----------------- -------- ---------- --------- -------
-
---- ------------ -
------------ -------
-
-
--
-------------- ---------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在这里，我们使用 ApolloClient 类创建了一个 Apollo 客户端实例，并指定了 GraphQL 服务器的 URL。我们还将 Apollo Client 配置为包含一个名为 messages 的本地状态。
我们还向客户端添加了一个用于显示和输入消息的 React 组件，并将其包装在 ApolloProvider 中，以确保所有组件都可以访问客户端实例。
现在我们将在 src/App.js 文件中创建 Messages 组件。该组件将使用 GraphQL，从服务器获取消息并显示它们。此外，它还将包含一个输入字段，以便用户可以输入新消息并将其发送到服务器：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ------ --------- ------------ - ---- ---------------
------ --- ---- --------------
----- ------------ - ----
-
-------- -
----
---------
-
-
--
----- ------------ - ----
-------- ------------------ -------- ----------- -------- -
----------------- ------ ---------- ----------- -
----
---------
-
-
--
----- ------------ - ----
------------ -
----------- -
----
---------
-
-
--
-------- ---------- -
----- ----------- ------------- - -------------
----- ---------- ------------ - -------------
----- ----------------- - ----- -- -
---------------------------------
--
----- ------------ - ----------- -- -
------------- ---------- - ----- ---------- ---------- --- -------------------- - ---
-----------------
--
------------ -- -
-------------------- -- ---------- -- ----- --- ---- ------- ------- ----
-- ----
------ -
--
------ ---------------------
--- ----- -------- ----- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -------------------- ----- --------- -- ------ -- -
---- ------------
------ -------------
------
---
--
--------
--------- ----------------------- ----------------------
-------------- - ---- -- -- -
--
------ ----------- ----------------- ---------------------------- --
------- ----------- -- ----------------------------------------
---
--
-----------
------------- --------------------------- ----------------------------------------
--- ---- -- -- -
-- ------- ------ -----
------ -
-----
--- -------- ----------------------- ------------------------------
------
--
--
---------------
---
--
-------- ------------------- - ----- - ----------- - -- -
----- - -------- - - ----------------- ------ ------------ ---
------------------
------ -------------
----- - --------- ------------------------------ -
---
-------------------- -- ------------- --------------
-
-------- -------------------- ----------------- - ----- - ----------- - - -- -
-------------------- -- ------------- --------------
-
-
------ ------- ---------在 Messages 组件中，我们使用 Query 组件来从服务器获取消息。如果正在加载或发生错误，我们将显示相应的消息。否则，我们使用 map 方法遍历数据并将每个消息显示为一项列表，并附上时间戳。
为了让用户能够输入新消息，我们使用 Mutation 组件创建了一个名为 SEND_MESSAGE 的 GraphQL mutation。该组件接受一个名为 sendMessage 的回调函数，并在向服务器发送消息后将输入框重置为默认值。
我们还使用 Subscription 组件创建名为 MESSAGE_SENT 的 GraphQL 订阅，以便在服务器推送新消息时得到通知。这个组件使用回调函数处理新消息的显示逻辑。
实现实时聊天
现在，我们已经拥有了查询、修改和订阅 GraphQL API。我们可以在客户端和服务器之间通过 WebSockets 实现双向通信，从而创建实时聊天应用。我们将使用 subscriptions-transport-ws 让客户端连接到服务器的 WebSocket 端点。
打开 index.js 文件，在客户端实例中添加以下代码：
const wsLink = new WebSocketLink({
uri: `ws://localhost:4000/graphql`,
options: {
reconnect: true
}
});
client.link = from([wsLink, httpLink]);现在我们可以重新启动服务器和客户端，并启动多个客户端实例。每个客户端实例现在都可以向服务器发送消息并得到它们的实时更新。您可以通过 http://localhost:4000/graphql 查看服务器日志来验证这一点。
总结
我们已经学习了如何使用 GraphQL 和 Apollo 构建实时聊天应用。我们成功地使用了客户端和服务器之间的 WebSockets 通信，创建了一个实时的聊天应用。我们还介绍了许多 GraphQL 的概念，如查询、变异和订阅。希望这篇文章让您深入了解 GraphQL 并启发您在自己的项目中使用它的想法。
完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645efaa5968c7c53b011b454