如何在Rails 7中设置ActionCable？

huangapple
go评论95阅读模式
英文:

How to setup actioncable in rails 7?

问题

我已经尝试了几天，但一直无法获得Rails 7应用程序。我尝试了许多教程，其中许多已经过时，没有得到有用的结果。我也尝试了很长时间的ChatGPT，但也没有成功。我已经采取的步骤如下：

  1. rails generate channel chat_room

  2. 在app/channels/chatroom_channel.rb文件中添加以下内容：

  1. # app/channels/chatroom_channel.rb
  2. class ChatroomChannel < ApplicationCable::Channel
  3.   def connected
  4.     console.log("Connected to Actioncable")
  5.   end
  7.   def disconnected
  8.     # 当客户端断开连接时的逻辑
  9.   end
  11.   def received(data)
  12.     # 当客户端从通道接收数据时的逻辑
  13.   end
  14. end
  1. 在路由文件中添加以下内容：
  1. mount ActionCable.server => "/cable"

  1. 启动Rails服务器。

  2. 查看JavaScript控制台是否显示消息 "connected to actioncable"。

  3. 我没有看到消息。

英文:

I have been trying to get Rails 7 application for days to no avail. I have tried many tutorials, many of which have been outdated, and gotten no useful results. I tried ChatGPT for quite a while to no avail as well. steps I have taken:

  1. rails generate channel chat_room
  2. have this in the app/channels/chatroom_channel.rb file §
  1. # app/channels/chatroom_channel.rb
  2. class ChatroomChannel &lt; ApplicationCable::Channel
  3.   def connected
  4.     console.log(&quot;Connected to Actioncable&quot;)
  5.   end
  7.   def disconnected
  8.     # Logic when a client disconnects from the channel
  9.   end
  11.   def received(data)
  12.     # Logic when a client receives data from the channel
  13.   end
  14. end
  1. added this in the routes file :
  1.   mount ActionCable.server =&gt; &quot;/cable&quot;

  1. started rails server.

  2. looked at the javascript console to the message "connected to
    actioncable"

6.I don't see a message

答案1

得分: 1

  1. # Rails 7.0.6
  2. rails new hello_cable -c tailwind
  3. cd hello_cable
  4. bin/rails g channel chat
  5. bin/rails g scaffold Message content
  6. bin/rails db:migrate
  7. open http://localhost:3000/messages
  8. bin/dev
  1. # app/channels/chat_channel.rb
  3. class ChatChannel < ApplicationCable::Channel
  4.   def subscribed
  5.     stream_from "the_chat"
  6.   end
  7. end
  1. # app/controllers/messages_controller.rb
  3. def create
  4.   @message = Message.create(message_params)
  5.   ActionCable.server.broadcast("the_chat", @message)
  6.   head :ok
  7. end
  1. // app/javascript/channels/chat_channel.js
  3. import consumer from "channels/consumer";
  5. consumer.subscriptions.create("ChatChannel", {
  6.   connected() {
  7.     console.log("connected")
  8.   },
  9.   received(data) {
  10.     const messages = document.querySelector("#messages")
  11.     messages.insertAdjacentHTML("beforeend", `<p>${data.content}</p>`)
  12.     messages.lastElementChild.scrollIntoView({behavior: "smooth"})
  13.   }
  14. })
  1. # app/views/messages/index.html.erb
  3. <%= tag.div do %>
  4.   <%= tag.div id: "messages", class: "h-96 overflow-auto" do %>
  5.     <% Message.last(10).each do |message| %>
  6.       <%= tag.p message.content %>
  7.     <% end %>
  8.   <% end %>
  10.   <%= form_with model: Message.new do |f| %>
  11.     <%= f.text_field :content, placeholder: "message..." %>
  12.     <%= f.submit "send", class: "p-2 font-bold" %>
  13.   <% end %>
  14. <% end  %>

Also, like that:

https://stackoverflow.com/a/75728527/207090

https://stackoverflow.com/a/75808949/207090

  2. <details>
  3. <summary>英文:</summary>
  5. Like this:

Rails 7.0.6

rails new hello_cable -c tailwind
cd hello_cable
bin/rails g channel chat
bin/rails g scaffold Message content
bin/rails db:migrate
open http://localhost:3000/messages
bin/dev

  2. ```rb
  3. # app/channels/chat_channel.rb
  5. class ChatChannel &lt; ApplicationCable::Channel
  6.   def subscribed
  7.     stream_from &quot;the_chat&quot;
  8.   end
  9. end
  1. # app/controllers/messages_controller.rb
  3. def create
  4.   @message = Message.create(message_params)
  5.   ActionCable.server.broadcast(&quot;the_chat&quot;, @message)
  6.   head :ok
  7. end
  1. // app/javascript/channels/chat_channel.js
  3. import consumer from &quot;channels/consumer&quot;
  5. consumer.subscriptions.create(&quot;ChatChannel&quot;, {
  6.   connected() {
  7.     console.log(&quot;connected&quot;)
  8.   },
  9.   received(data) {
  10.     const messages = document.querySelector(&quot;#messages&quot;)
  11.     messages.insertAdjacentHTML(&quot;beforeend&quot;, `&lt;p&gt;${data.content}&lt;/p&gt;`)
  12.     messages.lastElementChild.scrollIntoView({behavior: &quot;smooth&quot;})
  13.   }
  14. })
  1. # app/views/messages/index.html.erb
  3. &lt;%= tag.div do %&gt;
  4.   &lt;%= tag.div id: &quot;messages&quot;, class: &quot;h-96 overflow-auto&quot; do %&gt;
  5.     &lt;% Message.last(10).each do |message| %&gt;
  6.       &lt;%= tag.p message.content %&gt;
  7.     &lt;% end %&gt;
  8.   &lt;% end %&gt;
  10.   &lt;%= form_with model: Message.new do |f| %&gt;
  11.     &lt;%= f.text_field :content, placeholder: &quot;message...&quot; %&gt;
  12.     &lt;%= f.submit &quot;send&quot;, class: &quot;p-2 font-bold&quot; %&gt;
  13.   &lt;% end %&gt;
  14. &lt;% end %&gt;

Also, like that:

https://stackoverflow.com/a/75728527/207090

https://stackoverflow.com/a/75808949/207090

huangapple
  • 本文由 发表于 2023年7月27日 21:45:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76780389.html
  • actioncable
  • ruby-on-rails
  • ruby-on-rails-7
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定