ActionCable使用流程

简介: 视频地址:http://railscasts-china.com/episodes/action-cable-rails-5rails命令创建新app$ rails new actioncable_app1.

视频地址:http://railscasts-china.com/episodes/action-cable-rails-5

  1. rails命令创建新app
$ rails new actioncable_app

1.1 在Gemfile文件中加入gem ‘jquery-rails’

1.2在app/assets/javascripts/application.js文件中加入启用jquery的注释

//= require jquery
//= require rails-ujs
  1. rails命令创建controller
$ rails generate controller rooms show
  1. 修改config/routes.rb
root to : 'rooms#show'
  1. rails命令创建model message
$ rails generate model message content:string
  1. rails命令db迁移
$ rails db:migrate
  1. 修改app/controllers/rooms_controller.rb
def show
    @messages = Message.all
end
  1. 创建并修改app/views/messages/_message.html.erb
<div class = "message">
    <p><%= message.content %></p>
</div>
  1. rails命令进入console创建新message
$ rails console
> Message.create! content: "Hello world!"
  1. 修改app/views/rooms/show.html.erb
<h1>Chat room</h1>
<div id = "messages">
    <%= render @messages %>
</div>
  1. rails命令创建新channel
$ rails generate channel room speak
  1. 在config/routes.rb中添加actioncable服务端路径
mount ActionCable.server => '/cable'
  1. 打开app/assets/javascripts/cable.coffee中的@App
@App ||={}
App.cable = ActionCable.createConsumer()
  1. 修改app/asserts/javascripts/channels/room.coffee
speak: (message) ->
@perform 'speak', message: message
  1. 修改app/channels/room_channel.rb中的subscribed函数及speak函数
class RoomChannel < ApplicationCable::Channel
    def subscribed
        stream_from "room_channel"
    end

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">unsubscribed</span></span>
<span class="hljs-keyword">end</span>

<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">speak</span><span class="hljs-params">(data)</span></span>
    ActionCable.server.broadcast <span class="hljs-string">'room_channel'</span>, <span class="hljs-symbol">message:</span> data[<span class="hljs-string">'message'</span>]
<span class="hljs-keyword">end</span>

end


  1. 修改app/asserts/javascripts/channels/room.coffee中的received方法

received: (data) -> 
alert data['message']

这时打开调试服务器测试,会跳出js的alert动作

  1. 在app/views/rooms/show.html.erb中添加输入框,对应的数据传给room_speaker

<h1>Chat room</h1>

<div id=“messages”>
<%= render @messages %>
</div>

<form>
<lable>Say something:</lable><br>
<input type=“text” data-behavior=“room_speaker”>
</form>


  1. 在app/assets/javascripts/channels/room.coffee中添加js获取客户端输入,写在speak后面

App.room = App.cable.subscriptions.create “RoomChannel”, 
connected: ->
# Called when the subscription is ready for use on the server

disconnected: ->
# Called when the subscription has been terminated by the server

received: (data) ->
alert data[‘message’]

speak: (message) ->
@perform ‘speak’, message: message

$(document).on ‘keypress’, ‘[data-behavior~=room_speaker]’, (event) ->
if event.keyCode is 13 # return = send
App.room.speak event.target.value
event.target.value =
event.preventDefault()


  1. 修改app/channels/room_channel.rb中的speak函数,把获取的message存到数据库,把广播的功能移出到后续的job

def speak(data) 
Message.create! content: data['message']
end

  1. 修改app/models/message.rb,添加after_create_commit方法,让消息入库后传给job广播

class Message < ApplicationRecord 
after_create_commit { MessageBroadcastJob.perform_later self }
end

  1. rails命令创建新的job文件用来广播收到的消息

$ rails generate job MessageBroadcast

  1. 修改app/jobs/message_broadcast_job.rb文件

class MessageBroadcastJob < ApplicationJob 
queue_as :default

def perform(message)
ActionCable.server.broadcast ‘room_channel’, message: render_message(message)
end

private
def render_message(message)
ApplicationController.renderer.render(partial: ‘messages/message’, locals: { message: message })
end

end


  1. 修改app/assets/javascripts/channels/room.coffee中的received方法

received: (data) -> 
$('#messages').append data['message']

  1. 修改app/views/messages/_message.html.erb 添加cache

<% cache message do %> 
<div class="message">
<p><%=
message.content %></p>
</div>
<%
end %>

目录
相关文章
|
测试技术 开发工具 UED
|
6月前
|
存储 Kubernetes 监控
在K8S中,发布应用流程是什么?
在K8S中,发布应用流程是什么?
|
4月前
|
小程序 前端开发 数据库
上门服务的开发基本逻辑流程。
在数字化时代,上门服务小程序成为连接消费者与服务提供者的桥梁。本文深入探讨其前后端设计、开发与维护:前端注重响应式布局、清晰导航及丰富交互,提升用户体验;后端则通过微服务架构、数据库设计及业务逻辑实现,确保系统高效稳定。团队协作与持续优化贯穿整个流程,旨在打造优质服务体验。
|
6月前
|
算法 测试技术 API
测试使用 SenseVoice 的流程
8月更文挑战第10天
530 8
|
JSON 前端开发 数据库
基于jsplumb构建的流程设计器
最近在准备开发工作流引擎相关模块,完成表结构设计后开始着手流程设计器的技术选型,调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发,保证定制化的便捷性,相关效果图及项目地址如下
154 0
基于jsplumb构建的流程设计器
|
9月前
|
监控 机器人 数据安全/隐私保护
|
9月前
|
监控 安全 数据处理
了解阿里云 RPA:如何实现流程自动化
机器人流程自动化(RPA)是一种快速发展的技术,它可以帮助企业实现重复性任务的自动化,提高工作效率和准确性。阿里云 RPA 作为一款强大的 RPA 解决方案,为用户提供了一种简单而高效的方式来实现流程自动化。本文将介绍阿里云 RPA 的功能和特点,以及如何使用它来实现流程自动化。
|
测试技术
测试一个项目的流程
测试一个项目的流程
|
JavaScript 前端开发 Java
本地项目上线流程
本地项目上线流程
206 0
本地项目上线流程
项目上线 - 流程篇
项目上线 - 流程篇
178 0

热门文章

最新文章