React+GraphQL 实现真实时间聊天功能详解
在前端开发中，实现实时聊天功能是极具挑战的一项任务。今天我们将探讨如何使用React和GraphQL来实现这一功能。我们将一步一步地讲解如何使用这两个技术来搭建一个实时聊天应用程序，并提供示例代码。
何时使用GraphQL？
在搭建聊天应用程序时，我们经常需要从服务器获得大量的数据，包括消息、用户和其他元数据。通常情况下，我们使用RESTful API来完成这些任务。但是RESTful API存在一些问题，例如，它们需要多次请求来获取完整的数据。这不仅浪费了时间和带宽，而且还会让我们的服务器负担过重。
GraphQL是一种新型的API查询语言，它的核心思想是按需获取数据。使用GraphQL，我们可以通过一次API调用获得我们所需的所有数据，而不需要发送多个请求。这样，我们可以大大减轻服务器的负担，并提高我们的应用程序的性能。
- 创建GraphQL服务器
首先，我们需要创建一个GraphQL服务器，用于处理客户端的请求。我们将使用Apollo Server来完成这项任务。这是一个用于搭建GraphQL服务器的强大工具，它包括一些非常方便的特性，例如数据缓存、错误处理和性能分析。此外，它还集成了Node.js，因此我们可以很容易地使用它。
在开始之前，您需要先安装Node.js和npm工具。接下来，请按照以下步骤创建GraphQL服务器：
- 在项目文件夹中，使用以下命令安装Apollo Server和GraphQL：
npm install apollo-server graphql
- 创建一个新文件server.js，我们将在其中搭建GraphQL服务器，并写一些简单的查询来测试它：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -------- - ----
---- ------- -
--- ---
----- -------
----- -----
-
---- ---- -
--- ---
----- -------
-
---- ----- -
--------- -----------
------ --------
-
--
----- --------- - -
------ -
--------- -- -- ---
------ -- -- ---
--
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---- 打开终端并运行以下命令来启动服务器：
node server.js
现在您的GraphQL服务器已经启动了。如果您打开浏览器并浏览到http://localhost:4000，您将看到GraphQL Playground，它可以帮助我们测试API。
- 添加MongoDB数据库支持
我们需要使用一个数据库来存储聊天数据，MongoDB是一个开源的文档数据库，它非常适合于这个任务。我们将使用Mongoose来连接MongoDB，并实现我们的数据模型。
- 使用以下命令安装mongose
npm install mongoose
- 您需要在MongoDB Atlas上创建一个账户，并创建一个新的集合。创建一个.env文件，并添加数据库连接的URI。
MONGO_URI=<your uri>
- 修改server.js文件，并添加以下代码
const mongoose = require('mongoose')
require('dotenv').config()
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true })
.then(() => console.log('DB Connected!'))
.catch(err => {
console.log(`DB Connection Error: ${err.message}`);
});现在我们成功连接了 MongoDB 数据库，接下来我们需要为消息和用户创建模型。
- 创建数据模型和查询
我们现在需要定义我们的数据模型，以便在数据库中存储消息和用户数据。我们将创建一个 Message 模型，它将有一个文本字段，一个用户字段，以及一个 createdAt 时间字段。我们还将创建一个 User 模型，每个用户拥有一个名称。
- 创建 models/message.js 文件，添加以下代码
-- -------------------- ---- -------
----- -------- - -------------------
----- ------------- - --- -----------------
----- -
----- -------
--------- -----
--
----- -
----- -------------------------------
---- -------
--
---------- -
----- -----
-------- ---------
--
--
-------------- - ------------------------- --------------- 创建 models/user.js 文件，添加以下代码
-- -------------------- ---- -------
----- -------- - -------------------
----- ---------- - --- -----------------
----- -
----- -------
--------- -----
--
--------- -
-
----- -------------------------------
---- ----------
--
--
--
-------------- - ---------------------- ------------ 在 server.js 文件中添加以下代码，我们需要更新我们的类型定义和解决方案，以便它们与新的数据模型一起工作。
-- -------------------- ---- -------
----- ------- - ---------------------------
----- ---- - ------------------------
----- -------- - ----
---- ------- -
--- ---
----- -------
----- -----
---------- -------
-
---- ---- -
--- ---
----- -------
--------- -----------
-
---- ----- -
--------- -----------
------ --------
-
----- ------------ -
----- -------
------- ---
-
---- -------- -
----------------- --------------- --------
-
--
----- --------- - -
------ -
--------- ----- -- -- -
------ ----- --------------------- ---------- -- --
--
------ ----- -- -- -
------ ----- -----------
--
--
--------- -
----------- ----- --- - ----- -- -- -
----- ------- - --- ---------
----- -----------
----- -------------
--
----- --------------
----- ------ - ----- ----------------------------------------------
----- ---- - ----- ---------------------------
---------------------------
----- -----------
------ ------
--
--
-------- -
----- ----- --------- -- -
------ ----- ---------------------------
--
--
----- -
--------- ----- ------ -- -
------ ----- -------------- ----- ------- --------- ---------- -- --
--
--
--现在，我们已经完成了我们的类型定义和解决方案，它们用于在服务器上定义我们要使用的查询和变异。现在，我们可以使用 GraphQL Playground 来测试我们的 API。在控制台中输入以下查询，以获取所有消息：
-- -------------------- ---- -------
----- -
-------- -
--
----
---- -
--
----
-
---------
-
-如果一切正常，服务器将返回一个消息数组。接下来，我们将创建一个React前端应用程序，并将其连接到GraphQL服务器。
- 创建React前端应用程序
现在我们已经设置好我们的GraphQL服务器，并配置了我们的模型和解决方案。是时候使用React为我们的聊天应用程序创建一个简单而漂亮的用户界面了。我们将使用React、Apollo Client以及Material UI组件库。接下来，请跟随以下步骤来创建前端应用程序。
- 创建 React 应用程序
使用以下命令创建新的React应用程序：
npx create-react-app chat-app
- 添加Apollo client支持
在本地安装以下包：
npm install apollo-boost @apollo/react-hooks graphql
接下来，在src/index.js文件中添加以下代码来创建一个Apollo client：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------------- - ---- ---------------------
------ ------------ ---- --------------
------ --- ---- -------
----- ------ - --- -------------- ---- ----------------------- --
----------------
--------------- ----------------
---- --
------------------
-------------------------------
-- 创建聊天页面组件
我们将创建一个简单的聊天页面，其中包含一个输入框和一个发送按钮。我们还将使用Material UI组件来使我们的应用程序更加美观。
首先，我们需要在项目中安装 Material-UI 和 MomentJS ，可以在终端中运行以下命令：
npm install @material-ui/core @material-ui/icons moment
然后，在src/App.js文件中添加以下代码，创建聊天窗口：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - --------- ----------- - ---- ---------------------
------ --- ---- -------------
------ ------ ---- --------
------ - ---------- ------- ----- --------- ------------ - ---- -------------------
------ -------- ---- -------------------------
----- -------------- - ----
-
-------- -
--
----
---- -
----
-
---------
-
-
-
----- -------------------- - ----
-------- ------------------ -------------- -
----------------- ------- -
--
----
---- -
----
-
---------
-
-
-
-------- ----- -
----- ------ -------- - ------------
----- - -------- ------ ---- - - ------------------------
----- ------------ - --------------------------------- -
------------- - ----- - ---------- - -- -
----- - -------- - - ----------------- ------ -------------- ---
------------------
------ ---------------
----- - --------- ------------ ------------ -
---
-
--
----- ----------- - -- -- -
------------ ---------- - ------ - ----- ------- -------------------------- - - --
-----------
-
-- --------- ------ ---------- -------
-- ------- ------ ------------
------ -
-----
------
-------------------------- -- -
--------- -----------------
-------------
---------------------------
--------------------------- - ----------------------------------------
--
-----------
---
-------
---- -------- -------- ------- ----------- -------- ---
----------
---------------
------------
----------- -- ------------------------
-------- ----- -- ------------ -- --
--
-------
-------------------
---------------
---------------------
-----------------------
-
--------- --
---------
------
------
-
-
------ ------- ---接下来，我们需要更新App.js文件，使其在聊天数据有更新时自动滚动到底部。我们将使用Ref和useEffect Hook来完成这个问题。
-- -------------------- ---- -------
------ ------ - --------- ---------- ------ - ---- -------
-------- ----- -
----- ------ -------- - ------------
----- - -------- ------ ----- --------------- - - ------------------------
----- ------------ - --------------------------------- -
------------- - ----- - ---------- - -- -
----- - -------- - - ----------------- ------ -------------- ---
------------------
------ ---------------
----- - --------- ------------ ------------ -
---
-
--
----- ----------- - -- -- -
------------ ---------- - ------ - ----- ------- -------------------------- - - --
-----------
-
----- ------- - ------------
------------ -- -
-----------------
--------- ----------------------
------------ ------ - ---------------- -- -- -
-- ------------------------ ------ ----
----- ---------- - ----------------------------------
------ ----------------- ----- -
--------- ------------ -----------------
--
-
--
-- ------------------
------------ -- -
--------------------------- -----------------------------
-- ----------------
-- --------- ------ ---------- -------
-- ------- ------ ------------
------ -
-----
----- --------------
-------------------------- -- -
--------- -----------------
-------------
---------------------------
--------------------------- - ----------------------------------------
--
-----------
---
-------
---- -------- -------- ------- ----------- -------- ---
----------
---------------
------------
----------- -- ------------------------
-------- ----- -- ------------ -- --
--
-------
-------------------
---------------
---------------------
-----------------------
-
--------- --
---------
------
------
-
-- 添加真实时间聊天
现在我们已经可以向服务器发送消息并在聊天窗口中查看它们。但是，我们的聊天应用程序还缺少一个重要功能：即实时聊天。我们需要实现的方案是使用Subscription订阅新的消息，这样我们的应用程序将实时显示新消息。
- 运行以下命令安装graphql-subscriptions
npm install graphql-subscriptions
- 在server.js文件中添加以下代码，创建新的Subscription类型和相关解决方案
-- -------------------- ---- -------
----- - ------ - - --------------------------------
----- ------ - --- --------
----- ------------- - ---------------
----- -------- - ----
---- ------------ -
------------- -------
-
-
----- --------- - -
------------- -
------------- -
---------- -- -- ------------------------------------
--
--
-
----- ------ - --- -------------- --------- --------- ---
----- - ------------ - - ----------------
----- ---------- - ------------------
-----------------------------------------------
--------------------------- ---- ---------------- -- -- -
------------------- ----- -- ---------
-------------------------- ----- -- ----------------------
---- 在ADD_MESSAGE_MUTATION后添加以下代码，将新的订阅消息添加到该解决方案中
-- -------------------- ---- -------
----- -------------------- - ----
-------- ------------------ -------------- -
----------------- ------- -
--
----
---- -
----
-
---------
-
-
-
----- --------------------- - ----
------------ -
------------ -
--
----
---- -
----
-
---------
-
-
-现在，我们只需要在App.js中添加 SUBSCRIPTION代码，监听新消息的创建。接下来，在App.js文件末尾添加以下代码：
-- -------------------- ---- -------
------------ -- -
-----------------
--------- ----------------------
------------ ------ - ---------------- -- -- -
-- ------------------------ ------ ----
----- ---------- - ----------------------------------
------ ----------------- ----- -
--------- ------------ -----------------
--
-
--
-- ------------------运行我们的React应用程序，现在我们的聊天应用程序已经可以实时聊天了。
这里是我们的React应用程序的完整代码戳这里。
结论
通过本文，我们已经利用GraphQL与Mongoose搭建了简单而高效的实时聊天系统，同时，我们还说明了如何使用React和Apollo Client来创建漂亮而直观的用户界面。
React 是一个强大的库，它已被广泛用于构建各种应用程序。如果您想更深入地了解React，请访问React官方网站，并开始可交互的React教程。
GraphQL 是一种强大的API查询语言，它已被许多大型公司采用，并取代了传统的RESTful API。如果您想更深入地了解GraphQL，请访问GraphQL官方网站并开始学习GraphQL教程。
本文提供了示例代码，您可以在GitHub上找到完整的代码。我希望这篇文章对您有所帮助，并激发您的热情来探索更多有关React和GraphQL的知识。谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff9e391b0bf82c71cd04d5