其他分享
首页 > 其他分享> > 在带有 React 的 Rails 中使用 ActionCable

在带有 React 的 Rails 中使用 ActionCable

作者:互联网

在带有 React 的 Rails 中使用 ActionCable

在 Rails 应用程序中加入实时交互的能力是通过 行动电缆 ,这是几年前在 Rails 5 中引入的。虽然 任何电缆 现在提供了一个更快的替代方案,我决定使用 ActionCable 作为我第一次涉足 WebSockets。

以下是我将 ActionCable 与 react 结合到我的 rails 应用程序中所采取的基本步骤。

安装 npm 包 对于可操作的:

 npm i 可操作

取消注释 gemfile 中的 redis gem,然后运行 ​​bundle install

 # 使用 Redis 适配器在生产环境中运行 Action Cable 宝石“返回”,“〜> 4.0”

在您的 routes.rb 文件中,挂载 ActionCable:

 mount ActionCable.server => '/cable'

接下来,使用 rails g channel 生成一个通道,在这个例子中,我使用了消息。与 rails 中的其他生成器一样,有几个文件将作为此通道的一部分自动生成。

 rails g 频道消息

为了在前端引入 ActionCable,请将 actioncable npm 包导入 index.js 文件:

 从“actioncable”导入 actionCable

然后通过声明一个变量将其带入应用程序。

 常量 cableApp = {} cableApp.cable = actionCable.createConsumer("ws://localhost:3000/cable")

有几种方法可以通过您的应用程序将其传递,但​​我采用以下路线,将其作为道具传递(同时还将 App 包装在其他全局变量的上下文中,在这种情况下我没有将其用于 ActionCable):

 返回 ( <div> <UserContext.Provider value={value}> <App cableApp={cableApp}/> </UserContext.Provider> </div> )

然后我在 props 中将它传递给一个组件,该组件将在用户导航到聊天室时挂载(在我的应用程序中,我创建了一个名为 Conversation 的模型,因此 /conversations/:id)。在该组件中,将挂载一个子组件,该子组件将作为 websocket 组件服务。这背后的想法是进入对话室会初始化 websocket 连接。

这是 ConvoWebSocket 组件,它正在做几件事:

  1. 接收道具(其中之一是从 index.js 穿过的电缆对象)

  2. 挂载时运行 useEffect,并将对话 ID 声明为依赖项。

  3. 使用 ActionCable 方法为 MessagesChannel 通道和对话 ID 创建使用者。

  4. 然后利用 ActionCable 中接收到的方法(这是一个重要的步骤,我很快就会回来)将数据发送到我称为 tellMe() 的函数。

    从“反应”导入反应,{useEffect} const ConvoWebSocket = (props) => { 使用效果(()=> { const conversationId = window.location.href.match(/\d+$/)[0] props.cableApp.room = props.cableApp.cable.subscriptions.create( { 频道:“消息频道”, 房间:conversationId }, { 收到:(数据)=> { if (parseInt(props.conversationId) === data.message.conversation_id) { props.tellMe(数据) }}, })}, [props.conversationId]) 返回 (

    ) } 导出默认 ConvoWebSocket

下面是(可能命名不准确)tellMe() 函数是从父级 ConversationRoom 组件向下传递的:

 常量告诉我=(数据)=> { setConvoMessages((convoMessages) => [...convoMessages, data.message]) }

该函数接收从received方法传入的数据(前面提到过),然后更新消息的状态变量,然后显示在聊天中。

生成消息通道时,创建的文件之一是 MessagesChannel.rb 文件,您可以在通道文件夹中找到该文件。

在此文件中为您创建了三种默认方法 - 订阅、接收和取消订阅。必须在您的应用程序中调用此接收到的方法才能与通过 WebSocket 连接传递的数据进行交互。

 类 MessagesChannel < ApplicationCable::Channel 默认订阅 stop_all_streams @conversation = Conversation.find(params[:room]) stream_for @conversation 结尾 def 收到(数据) 结尾 默认取消订阅 stop_all_streams 结尾 结尾

ActionCable 方法也可以在控制器中调用,这是我在我的应用程序中选择的。我的理由是,当发送一条新消息时,它既需要保存到模型中(提交给数据库),又需要广播到对话中(发送给消费者)

 定义创建 @message = current_user.messages.build(message_params) @conversation = Conversation.find(message_params["conversation_id"]) 如果@message.save MessagesChannel.broadcast_to(@conversation, {message: @message.serializable_hash(include: :user) } ) 结尾 结尾

我希望这对其他开始使用 Action Cable 的人有所帮助。我建议检查 动作电缆文档 ,尤其是在底部提供了一些全栈(尽管是导轨)示例的地方。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/27344/17431110

标签:ActionCable,Rails,React,conversation,应用程序,props,组件,message
来源: https://www.cnblogs.com/amboke/p/16683626.html