使用 React 和 Django Channels 构建聊天应用程序

使用 Django 开发用于 HTTP 连接和应用程序请求的服务器很常见。 但是，在开发需要始终打开连接以进行双向连接的应用程序（如会议和聊天程序）时，使用 HTTP 连接效率低下。 在这种情况下，使用 WebSockets 是必不可少的。

通过使用 WebSockets，连接到该开放网络的所有用户都可以实时接收相关数据，这提供了一种在客户端和服务器之间建立双向连接的方法。 这是一个有状态的协议，这意味着在初始连接身份验证之后，客户端凭据被保存，并且在连接被破坏之前不需要进一步的身份验证。

在本教程中，我们将学习如何使用 Django 和 React 构建聊天应用程序。 在本教程之后，您应该更熟悉 WebSockets 在 Django 和 React 中的工作方式。 要继续阅读本文，您需要：

• 对Django的基本了解

• 已安装 Django v3.2

• 对 React 的基本了解

您可以在 GitHub 上 找到完整的应用程序。 让我们开始吧！

目录

• WebSocket 功能

• 如何在 Django 中使用 WebSocket

• 构建前端

• 测试应用程序

WebSocket 功能

WebSocket 是一种双向协议，这意味着数据可以在客户端和服务器之间即时交换而不会中断。 同理，WebSockets 也被视为全双工通信。

WebSockets 不需要任何特定的浏览器即可工作； 所有浏览器都兼容。 WebSocket 是一个有状态的协议。 由于客户端凭据是在主连接验证后保存的，因此在连接丢失之前不需要再次进行额外的身份验证。

如何在 Django 中使用 WebSocket

当你想用 WebSockets 做任何事情时， Django Channels 是必不可少的，所以继续使用以下命令安装它：

pip install channels

在本节中，我们将设置 Django 以使用 WebSockets，并将其与构建普通的 Django 应用程序进行比较。

感谢 Django Channels，在 Django 中使用 WebSockets 很简单。 您可以使用 Django Channels 构建一个 ASGI （异步服务器网关接口）服务器，之后您可以构建一个组，成员可以在其中即时互相发短信。 交流不是与特定用户，而是与一个组，任何数量的用户都可以加入。

创建一个包含项目所有代码的文件夹。 导航到您刚刚在终端上创建的文件夹并运行 startproject命令来创建一个新的 Django 项目：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

$ django-admin startproject chat .

现在，运行 $ python3 manage.py startapp app创建一个新的应用程序。

您需要让您的 Django 项目知道已经添加了一个新应用程序并且您安装了 Channels 插件。 您可以通过更新 chat/settings.py文件并添加 'app'到 INSTALLED_APPS列表。 它看起来像下面的代码：

# project/settings.py
INSTALLED_APPS = [
   ...
   'channels',
   'app',
]

在里面 settings.py文件，您应该设置配置以允许 Django 和 Django 通道通过消息代理相互连接。 为此，我们可以使用 Redis 之类的工具，但在此示例中，我们将坚持使用本地后端。 将以下代码行添加到您的 settings.py文件：

ASGI_APPLICATION = "chat.routing.application" #routing.py will handle the ASGI
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': "channels.layers.InMemoryChannelLayer"
        }
    }

在上面的代码中， ASGI_APPLICATION需要运行 ASGI 服务器并告诉 Django 在事件发生时该做什么。 我们将把这个配置放在一个名为 routing.py. 路由 Django Channels 类似于 Django URL 配置； 它选择将 WebSocket 请求发送到服务器时要运行的代码。

在您创建路由之前，我们将首先开发 消费者 。 在 Django Channels 中，消费者使您能够在代码中创建一组函数