动作电缆(ActionCable)是Ruby on Rails框架中的一个功能,它允许开发者创建实时Web应用程序。它基于WebSockets协议,提供了双向通信的能力。自定义频道允许开发者创建特定主题的订阅,以便客户端可以接收相关的实时更新。
假设我们有一个简单的聊天应用,我们需要创建一个自定义频道来处理消息的发送和接收。
# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from "chat_#{params[:room]}"
end
def receive(data)
ActionCable.server.broadcast("chat_#{params[:room]}", data)
end
end
# config/routes.rb
Rails.application.routes.draw do
mount ActionCable.server => '/cable'
end
// app/javascript/channels/chat_channel.js
import { createConsumer } from "@rails/actioncable"
createConsumer().subscriptions.create({ channel: "ChatChannel", room: "1" }, {
received(data) {
console.log(data);
// 更新DOM或触发Stimulus Reflex
}
});
在Rails视图中,你可以使用Stimulus Reflex来响应数据变化并更新DOM。
<!-- app/views/chat/show.html.erb -->
<div data-controller="chat">
<div data-target="chat.messages">
<%= @messages.each do |message| %>
<div><%= message.content %></div>
<% end %>
</div>
<input type="text" data-action="keyup->chat#sendMessage">
</div>
// app/javascript/controllers/chat_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
this.socket = new WebSocket("ws://localhost:3000/cable");
this.socket.onmessage = (event) => {
const data = JSON.parse(event.data);
// 更新消息列表
};
}
sendMessage(event) {
const message = event.target.value;
this.socket.send(JSON.stringify({ message }));
}
}
通过以上步骤,你可以将动作电缆的自定义频道与刺激反射和查看组件一起使用,实现一个实时更新的聊天应用。
领取专属 10元无门槛券
手把手带您无忧上云