实时聊天应用是现代社交网络中不可或缺的一部分。随着互联网的普及和技术的进步，越来越多的人开始使用聊天应用来进行沟通和交流。在这篇文章中，我们将介绍如何使用 GraphQL 和 Prisma 构建一个实时聊天应用。
什么是 GraphQL？
GraphQL 是一种用于构建 API 的查询语言。它由 Facebook 在 2015 年开发，并于 2018 年开源。GraphQL 能够帮助我们更加高效地构建 API，并提供了强大的查询和类型系统。在 GraphQL 中，客户端可以指定需要的数据，并且只会返回它们所需的数据，这使得网络传输的数据量更小，并且可以提高应用的性能。
什么是 Prisma？
Prisma 是一个现代化的 ORM（Object-Relational Mapping）框架，它可以帮助我们更加高效地操作数据库。通过 Prisma，我们可以使用类型安全的 API 来查询和修改数据库中的数据。Prisma 支持多种数据库，包括 MySQL、PostgreSQL 和 MongoDB 等。
实时聊天应用的架构
在我们开始构建实时聊天应用之前，我们需要先了解一下它的架构。实时聊天应用通常由以下几个部分组成：
客户端：客户端是用户使用的应用程序。在实时聊天应用中，客户端通常是一个 Web 应用程序或移动应用程序。
服务器：服务器是处理客户端请求的应用程序。在实时聊天应用中，服务器通常使用 GraphQL 来实现 API。
数据库：数据库是存储聊天数据的地方。在实时聊天应用中，数据库通常使用 Prisma 来操作。
实时通信服务：实时通信服务是处理实时聊天的应用程序。在实时聊天应用中，实时通信服务通常使用 WebSocket 协议来实现实时通信。
下图展示了实时聊天应用的架构：
使用 GraphQL 和 Prisma 构建实时聊天应用
现在我们已经了解了实时聊天应用的架构，接下来我们将介绍如何使用 GraphQL 和 Prisma 构建一个实时聊天应用。
1. 安装 Prisma
首先，我们需要安装 Prisma。在终端中运行以下命令：
--- ------- ------ ------
2. 配置 Prisma
接下来，我们需要配置 Prisma。在项目根目录中创建一个名为 prisma 的文件夹，并在其中创建一个名为 schema.prisma 的文件。在 schema.prisma 文件中，我们可以定义数据模型和数据库连接。
以下是一个示例 schema.prisma 文件：
---------- -- - -------- - ------- --- - ------------------- - --------- ------ - -------- - ------------------ - ----- ---- - -- --- --- ------------------------- ---- ------ ----- ------ ------- -------- ------ --------- -------- --------------- --------- -------- ---------- - ----- ---- - -- --- --- ------------------------- --------- -------- --------------- --------- -------- ---------- - ----- ------- - -- --- --- ------------------------- ---- ------ --------- -------- --------------- --------- -------- ---------- ------ ---- ----------------- ----------- ----------- ----- -------- --- ---- ---- ----------------- --------- ----------- ----- ------ --- -
上述 schema.prisma 文件中定义了三个数据模型：User、Chat 和 Message。其中，User 模型表示聊天应用中的用户，Chat 模型表示聊天会话，Message 模型表示聊天消息。我们还定义了它们之间的关系，例如 Message 模型和 User 模型之间的 author 关系，以及 Message 模型和 Chat 模型之间的 chat 关系。
3. 生成 Prisma Client
接下来，我们需要生成 Prisma Client。在终端中运行以下命令：
--- ------ --------
这将生成一个名为 prisma-client-js 的文件夹，其中包含了我们定义的数据模型的类型安全的 API。
4. 实现 GraphQL API
现在我们已经准备好了 Prisma，接下来我们需要实现 GraphQL API。在项目中，我们可以使用 Apollo Server 来实现 GraphQL API。
首先，我们需要安装 Apollo Server。在终端中运行以下命令：
--- ------- ------------- ------- ------
接下来，在项目中创建一个名为 server.js 的文件，并添加以下代码：
----- - ------------- --- - - ------------------------
----- - ------------ - - -------------------------
----- ------ - --- --------------
----- -------- - ----
---- ----- -
------ --------
------ --------
--------- -----------
-
---- -------- -
---------------- -------- ------ -------- --------- --------- -----
----------- -----
------------------- -------- --------- ----- ------- ------ --------
-
---- ---- -
--- ----
----- -------
------ -------
--------- -------
---------- -------
---------- -------
-
---- ---- -
--- ----
---------- -------
---------- -------
-
---- ------- -
--- ----
----- -------
---------- -------
---------- -------
------- -----
----- -----
-
-
----- --------- - -
------ -
------ -- -- -----------------------
------ -- -- -----------------------
--------- -- -- --------------------------
--
--------- -
----------- -------- - ----- ------ -------- -- -- -
------ --------------------
----- -
-----
------
---------
--
--
--
----------- -- -- -
------ --------------------
--
-------------- -------- - ----- --------- ------ -- -- -
------ -----------------------
----- -
-----
---------
-------
--
--
--
--
-------- -
------- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
---------
--
----- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
-------
--
--
-
----- ------ - --- --------------
---------
----------
--
----------------------- --- -- -- -
--------------- ------ ----- -- --------
--上述代码中，我们定义了三个查询类型：users、chats 和 messages，以及三个变更类型：createUser、createChat 和 createMessage。我们还定义了数据模型的 GraphQL 类型，并实现了它们的解析器函数。
5. 实现实时通信服务
最后，我们需要实现实时通信服务。在项目中，我们可以使用 WebSocket 和 subscriptions-transport-ws 库来实现实时通信服务。
首先，我们需要安装 subscriptions-transport-ws 库。在终端中运行以下命令：
--- ------- -------------------------- ------
接下来，在 server.js 文件中添加以下代码：
----- - ------------- --- - - ------------------------
----- - ------------ - - -------------------------
----- - -------- --------- - - ------------------
----- - ------------------ - - -------------------------------------
----- ---- - ---------------
----- --------- - -------------
----- ------ - --- --------------
----- -------- - ----
---- ----- -
------ --------
------ --------
--------- -----------
-
---- -------- -
---------------- -------- ------ -------- --------- --------- -----
----------- -----
------------------- -------- --------- ----- ------- ------ --------
-
---- ------------ -
-------------------- ------ --------
-
---- ---- -
--- ----
----- -------
------ -------
--------- -------
---------- -------
---------- -------
-
---- ---- -
--- ----
---------- -------
---------- -------
-
---- ------- -
--- ----
----- -------
---------- -------
---------- -------
------- -----
----- -----
-
-
----- --------- - -
------ -
------ -- -- -----------------------
------ -- -- -----------------------
--------- -- -- --------------------------
--
--------- -
----------- -------- - ----- ------ -------- -- -- -
------ --------------------
----- -
-----
------
---------
--
--
--
----------- -- -- -
------ --------------------
--
-------------- ----- -------- - ----- --------- ------ -- -- -
----- ------- - ----- -----------------------
----- -
-----
---------
-------
--
--
----------------------------------------- - ------------- ------- --
------ -------
--
--
------------- -
------------- -
---------- -------- - ------ -- - ------ -- -- -
------ -----------------------------------------------
--
--
--
-------- -
------- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
---------
--
----- -------- -- -
------ --------------
-------------
------ -
--- ----------
--
--
-------
--
--
-
----- ------ - --- --------
----- ------ - --- --------------
---------
----------
-------------- -
----- -----------------
---------- ------------------ ---------- -------- -- -
------------------- -----------
--
------------- ----------- -------- -- -
------------------- --------------
--
--
--
----- ---------- - -------------------------
--------------------------- --- -- -- -
--------------- ------ ----- -- --------
--
----- -------- - --- ------------------
------- -----------
----- -----------------
--
--------------------------
-
--------
----------
------- --------------
--
-
------- ---------
----- -----------------
-
-上述代码中，我们定义了一个名为 messageAdded 的订阅类型，并实现了它的订阅器函数。我们还使用 pubsub 实现了消息添加时的实时推送功能。最后，我们使用 SubscriptionServer 创建了一个 WebSocket 服务器，并将其连接到 Apollo Server 中。
6. 使用实时聊天应用
现在，我们已经完成了实时聊天应用的构建。我们可以使用 GraphQL Playground 或其他客户端工具来测试我们的应用程序。
在 GraphQL Playground 中，我们可以使用以下查询来获取所有用户：
----- -
----- -
--
----
-----
-
-我们可以使用以下变更来创建一个新用户：
-------- -
---------------- -------- ------ -------------------- --------- ----------- -
--
----
-----
-
-我们可以使用以下查询来获取所有聊天：
----- -
----- -
--
---------
---------
-
-我们可以使用以下变更来创建一个新聊天：
-------- -
---------- -
--
---------
---------
-
-我们可以使用以下查询来获取所有消息：
----- -
-------- -
--
----
---------
---------
------ -
--
----
-----
-
---- -
--
---------
---------
-
-
-我们可以使用以下变更来创建一个新消息：
-------- -
------------------- ------- -------- --------- -- ------- -- -
--
----
---------
---------
------ -
--
----
-----
-
---- -
--
---------
---------
-
-
-最后，我们可以使用以下订阅来订阅 messageAdded 事件：
------------ -
-------------------- -- -
--
----
---------
---------
------ -
--
----
-----
-
---- -
--
---------
---------
-
-
-当有新的消息添加到聊天室时，我们将收到实时推送。
总结
在本文中，我们介绍了如何使用 GraphQL 和 Prisma 构建实时聊天应用。我们了解了实时聊天应用的架构，并学习了如何使用 Prisma、Apollo Server 和 WebSocket 来实现它。我们还提供了示例代码来帮助您更好地理解如何实现这些功能。希望这篇文章能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66301fb8d3423812e4e124b4