在现代 Web 应用程序中，实时性已成为必需品。实时聊天应用程序是此类应用程序的一个常见示例。构建实时聊天 App 的一种方法是使用 Server-sent 事件和 Action Cable。
在本文中，我们将学习如何在 Ruby on Rails 中使用这两个技术来构建实时聊天 App。我们将深入了解 Server-sent 事件和 Action Cable 的工作原理，并提供示例代码来帮助您开始构建自己的实时聊天应用程序。
Server-sent 事件
Server-sent 事件是一种用于提供服务器到客户端的事件的技术。使用 Server-sent 事件，服务器可以发送任意数量的事件到客户端，每个事件都可以包含任意数量的信息。
在 Ruby on Rails 中，您可以使用 ActionController::Live 模块来实现 Server-sent 事件。这是通过使用一些特殊方法来完成的。
让我们来看一个示例。假设我们正在构建一个实时聊天应用程序，并要将用户连接到聊天室。我们可以使用以下代码在服务器端发送“欢迎”事件：
-- -------------------- ---- -------
----- -------------- - ---------------------
------- ----------------------
--- -----
-------------------------------- - -------------------
--------- -
--------------------- ------- ----------
--------------------- ------ -- -----------
----- -
-
------
---------------------
---
---让我们深入了解上述代码。首先，我们在控制器中包含了 ActionController::Live 模块。接下来，我们在 index 动作的开头设置了响应的 Content-Type，以便浏览器可以正确解析我们发送的事件流。
然后，我们通过 response.stream.write 方法发送一个包含 event 和 data 字段的事件。在这个例子中，我们发送了一个名为“欢迎”的事件，其中的数据是“Hi there！”。我们在每个事件之间等待 1 秒，以模拟用户加入聊天室时发送的欢迎消息。
最后，我们通过 response.stream.close 方法关闭响应流。
这个简单的例子展示了如何使用 Server-sent 事件将信息从服务器发送到客户端。在实际应用程序中，您通常会使用 JavaScript 将 Server-sent 事件与其他客户端事件相关联，例如用户加入或离开聊天室。
Action Cable
Action Cable 是 Ruby on Rails 中的一种 WebSocket 实现，它允许实时通信。使用 Action Cable，服务器可以推送事件到客户端，而不是客户端不断地轮询服务器以获取更新。
让我们来看一个使用 Action Cable 的示例。我们将构建一个简单的聊天应用程序，其中用户可以在聊天室中发送消息。以下是我们的聊天控制器：
-- -------------------- ---- -------
----- ----------- - -------------------------
--- ----------
----------- -----------
---
--- -------------
---------------------------- ------------ -------- ---------------
---
--- ------------
---
---在这个控制器中，我们定义了一个名为 ChatChannel 的 WebSocket 渠道。在 subscribed 方法中，我们将自己订阅到“chat_room”流中。在 receive 方法中，我们使用 ActionCable.server.broadcast 方法将客户端发送的消息广播到“chat_room”流中。在 unsubscribed 方法中，我们可以清除任何有关用户的信息。
接下来，我们需要实现客户端 JavaScript 代码来处理 WebSocket 连接。以下是我们的 chat.js 文件：
-- -------------------- ---- -------
-------- - --------------------------------------------- -
---------- ---------- -
-------------------------
--
------------- ---------- -
----------------------------
--
--------- -------------- -
--------------------------- - ------------ - --------
--
------------ ----------------- -
----------------------- - -------- ------- ---
-
---
------------ -
----------------------------------- -
--- ------- - --------------------
----------------------
------------------------------
---
---这个 JavaScript 代码片段使用 Action Cable 连接到 ChatChannel WebSocket 渠道，并处理连接和断开连接事件。在 received 回调函数中，我们将广播消息显示到聊天室中。在 sendMessage 函数中，我们使用 perform 方法发送消息到服务器。
最后，我们需要创建一个简单的视图来呈现聊天室。以下是我们的视图文件：
<div id="messages"></div> <div> <input type="text" id="message" /> <button id="send-message">Send</button> </div> <script src="/assets/chat.js"></script>
这个视图文件使用 #messages 元素显示所有连接到聊天室的消息。在底部，我们有一个文本框，用户可以输入新消息。单击 Send 按钮时，我们调用 sendMessage 函数来将消息发送到服务器。
结论
在本文中，我们学习了如何使用 Server-sent 事件和 Action Cable 在 Ruby on Rails 中构建实时聊天应用程序。我们深入了解了 Server-sent 事件和 Action Cable 的工作原理，并提供了示例代码来帮助您开始构建自己的实时聊天应用程序。
实时聊天应用程序是现代 Web 应用程序不可或缺的一部分。使用 Server-sent 事件和 Action Cable，我们可以轻松地构建出具有实时功能的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bd4fdd657e1f70dc0bb54