英文:
How to setup actioncable in rails 7?
问题
我已经尝试了几天，但一直无法获得Rails 7应用程序。我尝试了许多教程，其中许多已经过时，没有得到有用的结果。我也尝试了很长时间的ChatGPT，但也没有成功。我已经采取的步骤如下：
-
rails generate channel chat_room -
在app/channels/chatroom_channel.rb文件中添加以下内容：
# app/channels/chatroom_channel.rb
class ChatroomChannel < ApplicationCable::Channel
def connected
console.log("Connected to Actioncable")
end
def disconnected
# 当客户端断开连接时的逻辑
end
def received(data)
# 当客户端从通道接收数据时的逻辑
end
end
- 在路由文件中添加以下内容：
mount ActionCable.server => "/cable"
-
启动Rails服务器。
-
查看JavaScript控制台是否显示消息 "connected to actioncable"。
-
我没有看到消息。
英文:
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:
rails generate channel chat_room- have this in the app/channels/chatroom_channel.rb file §
# app/channels/chatroom_channel.rb
class ChatroomChannel < ApplicationCable::Channel
def connected
console.log("Connected to Actioncable")
end
def disconnected
# Logic when a client disconnects from the channel
end
def received(data)
# Logic when a client receives data from the channel
end
end
- added this in the routes file :
mount ActionCable.server => "/cable"
-
started rails server.
-
looked at the javascript console to the message "connected to
actioncable"
6.I don't see a message
答案1
得分: 1
# 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
# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from "the_chat"
end
end
# app/controllers/messages_controller.rb
def create
@message = Message.create(message_params)
ActionCable.server.broadcast("the_chat", @message)
head :ok
end
// app/javascript/channels/chat_channel.js
import consumer from "channels/consumer";
consumer.subscriptions.create("ChatChannel", {
connected() {
console.log("connected")
},
received(data) {
const messages = document.querySelector("#messages")
messages.insertAdjacentHTML("beforeend", `<p>${data.content}</p>`)
messages.lastElementChild.scrollIntoView({behavior: "smooth"})
}
})
# app/views/messages/index.html.erb
<%= tag.div do %>
<%= tag.div id: "messages", class: "h-96 overflow-auto" do %>
<% Message.last(10).each do |message| %>
<%= tag.p message.content %>
<% end %>
<% end %>
<%= form_with model: Message.new do |f| %>
<%= f.text_field :content, placeholder: "message..." %>
<%= f.submit "send", class: "p-2 font-bold" %>
<% end %>
<% end %>
Also, like that:
https://stackoverflow.com/a/75728527/207090
https://stackoverflow.com/a/75808949/207090
<details>
<summary>英文:</summary>
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
```rb
# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from "the_chat"
end
end
# app/controllers/messages_controller.rb
def create
@message = Message.create(message_params)
ActionCable.server.broadcast("the_chat", @message)
head :ok
end
// app/javascript/channels/chat_channel.js
import consumer from "channels/consumer"
consumer.subscriptions.create("ChatChannel", {
connected() {
console.log("connected")
},
received(data) {
const messages = document.querySelector("#messages")
messages.insertAdjacentHTML("beforeend", `<p>${data.content}</p>`)
messages.lastElementChild.scrollIntoView({behavior: "smooth"})
}
})
# app/views/messages/index.html.erb
<%= tag.div do %>
<%= tag.div id: "messages", class: "h-96 overflow-auto" do %>
<% Message.last(10).each do |message| %>
<%= tag.p message.content %>
<% end %>
<% end %>
<%= form_with model: Message.new do |f| %>
<%= f.text_field :content, placeholder: "message..." %>
<%= f.submit "send", class: "p-2 font-bold" %>
<% end %>
<% end %>
Also, like that:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论