ActionCable 和 React 初学者

介绍

每个人都熟悉HTTP，无论他们是否知道。作为Web开发人员，我们知道它是一种用于从客户端向服务器发送和接收请求的互联网协议。典型的交换看起来像这样：

但有时，我们希望与他人进行实时互动。例如，Discord或Slack上的用户不会手动刷新他们的应用程序来获取新消息，它们只是被接收。为了满足这种实时更新的需求，我们可以使用WebSockets。

简而言之，WebSocket是一种替代互联网协议，允许在客户端和服务器之间进行动态双向通信。用户不会请求新信息（如刷新页面以加载新帖子），而是在广播时接收数据。

在这篇文章中，我将向您介绍如何使用RailsActionCable和React前端设置一个基本的聊天室。

配置

首先，我们将运行基本的应用程序配置。

在目录中创建一个新的RailsAPI。railsnewchat_app--api

导航到新创建的目录并创建ReactClient

#/chat_appnpxcreate-react-appclient

安装@rails/actioncable到你的React客户端

#/chat_appnpmi@rails/actioncable--prefixclient

在Gemfile中，取消注释“rack-cors”

这篇文章不会进入部署阶段，但如果您打算这样做，请取消注释“redis”并添加“pg”PostgreSQLgem并根据需要更改您的数据库适配器。此示例不会进行部署，因此您可以保留“sqlite3”gem和默认设置。

取消注释此中间件并将origins更改为“*”以用于开发目的。请注意，如果您正在部署，则必须将来源更改为您的应用程序域。

最后，安装您的gem和客户端依赖项。

#/chat_appbundleinstallnpminstall--prefixclient

导航

要设置WebSocket连接，我们需要配置前端和后端以创建“握手”或连接。我们将从建立后端开始。

在Rails中，让我们为消息模型生成一个脚手架。我们将使事情保持简单，并且我们的模型只有一个内容属性。

railsgscaffoldMessagecontent#Don'tforgettomigraterailsdb:migrate

转到/app/config/routes.rb，我们可以看到Rails已经为我们的消息生成了资源。但我们还需要为我们的ActionCableWebSocket服务器声明端点。

我们有一个模型，它是控制器和一个服务器端点“localhost:3000/cable”。接下来我们需要一些东西来管理我们的连接和请求：一个Channel。

与MVC中的控制器一样，通道充当接收请求并根据其接收到的定义操作处理这些请求的单元。

railsgchannelChat

在中app/channels/chat_channel.rb，您将看到我们的ChatChannel具有两个默认操作：订阅和取消订阅。当用户尝试与我们的服务器建立WebSocket连接时，它会说明请求的类型和通道。我们可以做不同的事情来处理请求，例如添加身份验证令牌，但我们将专注于通道的主要功能：流式传输。

您可以从特定字符串、动态内插字符串甚至模型实例声明流。在所有情况下，用户请求订阅ChatChannel，而ChatChannel将作为回报建立连接并从指定源流式传输。

该项目将继续使用stream_from"chat"配置，因此我们将注释掉其他示例。

现在我们已经为用户建立了一种连接到我们的WebSocket服务器的方法，我们需要定义我们的服务器何时实际向我们的用户广播信息。

通常，当用户创建新消息时，我们希望向我们的频道广播数据。

ActionCable.server.broadcast("chat",@message)告诉我们的服务器将我们广播@message到流“聊天”。如果您从模型广播，则需要使用不同的语法，请参阅https://guides.rubyonrails.org/action_cable_overview.html。

react

为简洁起见，我将只介绍在前端设置WebSockets。

在/app/client/src创建一个新文件cable.js。这将管理我们客户端“消费者”的创建。

请注意，我们的协议URL现在是“ws”而不是“http”。这将告诉我们的服务器用户正在尝试建立WebSocket。

在中App.js，我们希望客户端向我们的ChatChannel发出订阅请求。感谢@rails/actioncable我们还可以描述当我们连接时我们想要发生什么，以及当我们接收数据时（如果我们的连接已建立）。

从我们的后端，我们可以通过查看我们的终端来查看请求是否成功。

当我们向后端发出发布请求时，我们的消息控制器将我们的消息广播到“聊天”流。

当它广播时，我们的客户被设置为setMessages使用接收到的信息。

您可以通过在隐身窗口中打开应用程序来查看实时更新。您会注意到，每当对方发送消息时，两者都会更新。

结论

WebSocket是允许用户进行交互式通信的好工具。一开始我很难真正掌握其中的一些示例，所以我希望这提供了一个非常基本的说明，说明如何使用ReactFrontend应用程序设置ActionCable。我没有涉及连接请求的管理或说明多流的使用，但我认为这展示了如何让聊天室运行的基础知识。让我知道是否有任何我遗漏的内容或任何您希望我介绍的内容！

举报/反馈