8. actioncable 进阶
最后更新于：2022-04-02 01:43:04
# 8. actioncable 进阶
#### 1. 介绍
上一篇讲了actioncable的基本使用，也搭建了一个简易的聊天室。但是只是照着代码敲那是不行的，要知其然并知其所以然，这节来讲讲actioncable进阶方面的内容，对actioncable有一个更高的理解。
#### 2. 使用
下面会分别从几个方面来讲解actioncable，首先从安全领域来说说。
##### 2.1 跨域
之前在本地测试环境，应用都是跑在3000端口上的，现在把它跑在4000端口上，看会是怎样的。
后台会不断地提示下面这行信息。
```
Request origin not allowed: http://localhost:4000
```
其实跑在4000端口的时候，websocket是连不上的。
因为actioncable默认只在3000端口上开放websocket服务，这个可以查看其源码得到：
```
#https://github.com/rails/rails/blob/master/actioncable/lib/action_cable/engine.rb#L25
options.allowed_request_origins ||= "http://localhost:3000" if ::Rails.env.development?
```
actioncable也提供了机制来解决这个问题。
比如在配置文件(比如: application.rb)中添加一行：
```
config.action_cable.allowed_request_origins = ['http://rubyonrails.com', /http:\/\/ruby.*/]
```
或者干脆关闭了跨域的检查
```
config.action_cable.disable_request_forgery_protection = true
```
源码可见于此处：
```
#https://github.com/rails/rails/blob/71657146374595b6b9b04916649922fa4f5f512d/actioncable/lib/action_cable/connection/base.rb#L195
def allow_request_origin?
return true if server.config.disable_request_forgery_protection
if Array(server.config.allowed_request_origins).any? { |allowed_origin| allowed_origin === env['HTTP_ORIGIN'] }
true
else
logger.error("Request origin not allowed: #{env['HTTP_ORIGIN']}")
false
end
end
```
##### 2.2 用户系统
刚才从整个网站的安全出发讲解了websocket的安全问题，现在要从刚细颗粒的地方讲解安全，那就是用户系统，意思就是说，不是每个使用网站的用户都能使用websocket，比如登录的用户才能使用，不登录的用户就过滤掉。
做一切的关键的文件在于`app/channels/application_cable/connection.rb`这个文件。
现在我们把其改写一下：
```
# Be sure to restart your server when you modify this file. Action Cable runs in a loop that does not support auto reloading.
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
end
protected
def find_verified_user
cookies.signed[:username] || reject_unauthorized_connection
end
end
end
```
意思就是说，带有`cookies.signed[:username]`的用户才是被允许的，不然就是拒绝连接`reject_unauthorized_connection`。
现在我们先创建一个登录界面：
```
# app/views/sessions/new.html.erb
<%= form_for :session, url: sessions_path do |f| %>
<%= f.label :username, 'Enter a username' %>
<%= f.text_field :username %>
<%= f.submit 'Start chatting' %> <% end %> ``` ``` # app/controllers/sessions_controller.rb class SessionsController < ApplicationController def create cookies.signed[:username] = params[:session][:username] redirect_to "/rooms/show" end end ``` ``` # config/routes.rb root 'sessions#new' ``` 登录界面是这样的：  登录之后，后台的日志信息就会多了这行： ``` Registered connection (随风) ``` 如果把cookies信息清掉，也就是没有登录的情况，后台就会提示下面的信息： ``` An unauthorized connection attempt was rejected Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket) ``` 表示无法连接到websocket服务。 这个就解决了用户系统登录的问题的。 ##### 2.3 适配器 在actioncable源码里定义了好几种适配器，比如redis的pub/sub，还有postgresql的notify。 源码可见于：[https://github.com/rails/rails/tree/master/actioncable/lib/action\_cable/subscription\_adapter。](https://github.com/rails/rails/tree/master/actioncable/lib/action_cable/subscription_adapter%E3%80%82) 先不管什么是适配器，我们先用redis来试试。 改变`config/cable.yml`文件，内容如下： ``` # Action Cable uses Redis by default to administer connections, channels, and sending/receiving messages over the WebSocket. production: adapter: redis url: redis://localhost:6379/1 development: adapter: redis url: redis://localhost:6379/1 # adapter: async test: adapter: async ``` 在`Gemfile`文件里添加下面这行： ``` gem 'redis' ``` 执行`bundle`并重启服务器。 再用`redis-cli monitor`命令进入redis的终端界面，并监控redis的运行情况。 当我登录聊天室的时候，`monitor`监控界面会出现下面一行： ``` 1461656197.311821 [1 127.0.0.1:58177] "subscribe" "room_channel" ``` 表示在订阅`room_channel`这个通道。 因为我们之前`app/channels/room_channel.rb`文件的内容是这样的： ``` class RoomChannel < ApplicationCable::Channel def subscribed stream_from "room_channel" end ... end ``` 我们也定义了一个叫`room_channel`的通道，所以跟之前redis的数据对应起来。 现在我们键入聊天信息，并回车。 `monitor`界面会出现类似下面的信息： ``` 1461656387.284232 [1 127.0.0.1:58179] "publish" "room_channel" "{\"message\":\"\\u003cdiv class=\xe2\x80\x9cmessage\xe2\x80\x9d\\u003e\\n \\u003cp\\u003e11111\\u003c/p\\u003e\\n\\u003c/div\\u003e\\n\"}" ``` 表示正在`room_channel`通道上广播消息。 redis的pub/sub机制就是一种广播机制，它能够把一个消息向多个客户端传递，我们实现聊天室正是需要这样的功能，所以actioncable就可以利用它来当适配器，类似的机制也可以使用postgresql的notify机制，也是一样的道理，就是多个客户端订阅一个通道，能够同时接收通道的信息。 不像actioncable自己封装了redis的pub/sub机制，在[websocket之用tubesock在rails实现聊天室(五)](http://www.rails365.net/articles/websocket-zhi-yong-tubesock-zai-rails-shi-xian-liao-tian-shi-wu)这篇文章有介绍过直接用redis的pub/sub机制。 比如下面的代码： ``` def chat hijack do |tubesock| redis_thread = Thread.new do Redis.new.subscribe "chat" do |on| on.message do |channel, message| tubesock.send_data message end end end tubesock.onmessage do |m| Redis.new.publish "chat", m end tubesock.onclose do redis_thread.kill end end end ``` 也可以自己实现最简单的适配器，其实就是用一个数组。比如默认的async适配器，就是用类似的方法实现的。原理是这样的，比如一个websocket连接进到服务器来了，就把这个socket存进数组中，每个数组的内容都是socket的连接，比如要广播消息的话，就是直接循环这个数据，分别往里面发送信息即可，比如，socket.write("hello")。 ##### 2.4 服务器运行 可以有两种方式来运行actioncable提供的websocket服务。第一种是以`Rack socket hijacking API`的方式来运行，这个跟之前[tubesock](http://www.rails365.net/articles/websocket-zhi-yong-tubesock-zai-rails-shi-xian-liao-tian-shi-wu)这个gem是一样的，它跟web进程集成在一起，以挂载的方式挂载到一个路径中。 正如上文所说的，可以在路由中挂载，比如： ``` # config/routes.rb Rails.application.routes.draw do mount ActionCable.server => '/cable' end ``` 还有另外一种是在配置文件中修改。 ``` # config/application.rb class Application < Rails::Application config.action_cable.mount_path = '/websocket' end ``` 另一种运行websocket的方式是`Standalone`。它的意思是把websocket服务运行在另一个进程中，因为它仍然是一个rack应用程序，只要支持`Rack socket hijacking API`的应用程序都可以运行，比如puma，unicorn等。 新建`cable/config.ru`文件，内容如下： ``` require ::File.expand_path('../../config/environment', __FILE__) Rails.application.eager_load! run ActionCable.server ``` 然后再新建`bin/cable`可执行文件，内容如下： ``` #!/bin/bash bundle exec puma -p 28080 cable/config.ru ``` 使用`bin/cable`命令可运行。 关于websocket的服务器部署后续有另外的章节介绍。 ##### 2.5 js客户端 浏览器要与客户端保持链接，必须像之前那样主动发送websocket请求。 `rails 5`中默认生成了一个文件，叫`app/assets/javascripts/cable.coffee`，把下面两行注释拿掉： ``` @App ||= {} App.cable = ActionCable.createConsumer() ``` 默认情况下，websocket服务器的地址是`/cable`。 可以从源码上看到这个实现。 ``` # https://github.com/rails/rails/blob/52ce6ece8c8f74064bb64e0a0b1ddd83092718e1/actioncable/app/assets/javascripts/action_cable.coffee.erb#L8 @ActionCable = INTERNAL: <%= ActionCable::INTERNAL.to_json %> createConsumer: (url) -> url ?= @getConfig("url") ? @INTERNAL.default_mount_path new ActionCable.Consumer @createWebSocketURL(url) ``` 其中，`@INTERNAL.default_mount_path`就是`/cable`。 ``` # https://github.com/rails/rails/blob/7f043ffb427c1beda16cc97a991599be808fffc3/actioncable/lib/action_cable.rb#L38 INTERNAL = { message_types: { welcome: 'welcome'.freeze, ping: 'ping'.freeze, confirmation: 'confirm_subscription'.freeze, rejection: 'reject_subscription'.freeze }, default_mount_path: '/cable'.freeze, protocols: ["actioncable-v1-json".freeze, "actioncable-unsupported".freeze].freeze } ``` 按照前文所说，可以把服务器部署到另外一台主机上，或者说，我不想用默认的`/cable`路径，有时候，开发环境和生产环境的情况根本就是两码事，本地可以随意，但线上也许是另外的服务器，或者说，本地可以是ws协议，线上是wss协议。 actioncable也提供了一个简单的配置参数。 ``` config.action_cable.url = "ws://example.com:28080" ``` 不过，这个需要在layout上加上这行： ``` <%= action_cable_meta_tag %> ``` 它的源码是这样的： ``` def action_cable_meta_tag tag "meta", name: "action-cable-url", content: ( ActionCable.server.config.url || ActionCable.server.config.mount_path || raise("No Action Cable URL configured -- please configure this at config.action_cable.url") ) end ``` 就只是生成一个html的标签，被js的`createConsumer`利用，具体可以看`createConsumer`的方法。 本篇完结。 下一篇：[websocket之actioncable实现重新连接功能(九)](http://www.rails365.net/articles/websocket-zhi-actioncable-shi-xian-chong-xin-lian-jie-gong-neng-jiu)
';
<%= f.text_field :username %>
<%= f.submit 'Start chatting' %> <% end %> ``` ``` # app/controllers/sessions_controller.rb class SessionsController < ApplicationController def create cookies.signed[:username] = params[:session][:username] redirect_to "/rooms/show" end end ``` ``` # config/routes.rb root 'sessions#new' ``` 登录界面是这样的：  登录之后，后台的日志信息就会多了这行： ``` Registered connection (随风) ``` 如果把cookies信息清掉，也就是没有登录的情况，后台就会提示下面的信息： ``` An unauthorized connection attempt was rejected Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket) ``` 表示无法连接到websocket服务。 这个就解决了用户系统登录的问题的。 ##### 2.3 适配器 在actioncable源码里定义了好几种适配器，比如redis的pub/sub，还有postgresql的notify。 源码可见于：[https://github.com/rails/rails/tree/master/actioncable/lib/action\_cable/subscription\_adapter。](https://github.com/rails/rails/tree/master/actioncable/lib/action_cable/subscription_adapter%E3%80%82) 先不管什么是适配器，我们先用redis来试试。 改变`config/cable.yml`文件，内容如下： ``` # Action Cable uses Redis by default to administer connections, channels, and sending/receiving messages over the WebSocket. production: adapter: redis url: redis://localhost:6379/1 development: adapter: redis url: redis://localhost:6379/1 # adapter: async test: adapter: async ``` 在`Gemfile`文件里添加下面这行： ``` gem 'redis' ``` 执行`bundle`并重启服务器。 再用`redis-cli monitor`命令进入redis的终端界面，并监控redis的运行情况。 当我登录聊天室的时候，`monitor`监控界面会出现下面一行： ``` 1461656197.311821 [1 127.0.0.1:58177] "subscribe" "room_channel" ``` 表示在订阅`room_channel`这个通道。 因为我们之前`app/channels/room_channel.rb`文件的内容是这样的： ``` class RoomChannel < ApplicationCable::Channel def subscribed stream_from "room_channel" end ... end ``` 我们也定义了一个叫`room_channel`的通道，所以跟之前redis的数据对应起来。 现在我们键入聊天信息，并回车。 `monitor`界面会出现类似下面的信息： ``` 1461656387.284232 [1 127.0.0.1:58179] "publish" "room_channel" "{\"message\":\"\\u003cdiv class=\xe2\x80\x9cmessage\xe2\x80\x9d\\u003e\\n \\u003cp\\u003e11111\\u003c/p\\u003e\\n\\u003c/div\\u003e\\n\"}" ``` 表示正在`room_channel`通道上广播消息。 redis的pub/sub机制就是一种广播机制，它能够把一个消息向多个客户端传递，我们实现聊天室正是需要这样的功能，所以actioncable就可以利用它来当适配器，类似的机制也可以使用postgresql的notify机制，也是一样的道理，就是多个客户端订阅一个通道，能够同时接收通道的信息。 不像actioncable自己封装了redis的pub/sub机制，在[websocket之用tubesock在rails实现聊天室(五)](http://www.rails365.net/articles/websocket-zhi-yong-tubesock-zai-rails-shi-xian-liao-tian-shi-wu)这篇文章有介绍过直接用redis的pub/sub机制。 比如下面的代码： ``` def chat hijack do |tubesock| redis_thread = Thread.new do Redis.new.subscribe "chat" do |on| on.message do |channel, message| tubesock.send_data message end end end tubesock.onmessage do |m| Redis.new.publish "chat", m end tubesock.onclose do redis_thread.kill end end end ``` 也可以自己实现最简单的适配器，其实就是用一个数组。比如默认的async适配器，就是用类似的方法实现的。原理是这样的，比如一个websocket连接进到服务器来了，就把这个socket存进数组中，每个数组的内容都是socket的连接，比如要广播消息的话，就是直接循环这个数据，分别往里面发送信息即可，比如，socket.write("hello")。 ##### 2.4 服务器运行 可以有两种方式来运行actioncable提供的websocket服务。第一种是以`Rack socket hijacking API`的方式来运行，这个跟之前[tubesock](http://www.rails365.net/articles/websocket-zhi-yong-tubesock-zai-rails-shi-xian-liao-tian-shi-wu)这个gem是一样的，它跟web进程集成在一起，以挂载的方式挂载到一个路径中。 正如上文所说的，可以在路由中挂载，比如： ``` # config/routes.rb Rails.application.routes.draw do mount ActionCable.server => '/cable' end ``` 还有另外一种是在配置文件中修改。 ``` # config/application.rb class Application < Rails::Application config.action_cable.mount_path = '/websocket' end ``` 另一种运行websocket的方式是`Standalone`。它的意思是把websocket服务运行在另一个进程中，因为它仍然是一个rack应用程序，只要支持`Rack socket hijacking API`的应用程序都可以运行，比如puma，unicorn等。 新建`cable/config.ru`文件，内容如下： ``` require ::File.expand_path('../../config/environment', __FILE__) Rails.application.eager_load! run ActionCable.server ``` 然后再新建`bin/cable`可执行文件，内容如下： ``` #!/bin/bash bundle exec puma -p 28080 cable/config.ru ``` 使用`bin/cable`命令可运行。 关于websocket的服务器部署后续有另外的章节介绍。 ##### 2.5 js客户端 浏览器要与客户端保持链接，必须像之前那样主动发送websocket请求。 `rails 5`中默认生成了一个文件，叫`app/assets/javascripts/cable.coffee`，把下面两行注释拿掉： ``` @App ||= {} App.cable = ActionCable.createConsumer() ``` 默认情况下，websocket服务器的地址是`/cable`。 可以从源码上看到这个实现。 ``` # https://github.com/rails/rails/blob/52ce6ece8c8f74064bb64e0a0b1ddd83092718e1/actioncable/app/assets/javascripts/action_cable.coffee.erb#L8 @ActionCable = INTERNAL: <%= ActionCable::INTERNAL.to_json %> createConsumer: (url) -> url ?= @getConfig("url") ? @INTERNAL.default_mount_path new ActionCable.Consumer @createWebSocketURL(url) ``` 其中，`@INTERNAL.default_mount_path`就是`/cable`。 ``` # https://github.com/rails/rails/blob/7f043ffb427c1beda16cc97a991599be808fffc3/actioncable/lib/action_cable.rb#L38 INTERNAL = { message_types: { welcome: 'welcome'.freeze, ping: 'ping'.freeze, confirmation: 'confirm_subscription'.freeze, rejection: 'reject_subscription'.freeze }, default_mount_path: '/cable'.freeze, protocols: ["actioncable-v1-json".freeze, "actioncable-unsupported".freeze].freeze } ``` 按照前文所说，可以把服务器部署到另外一台主机上，或者说，我不想用默认的`/cable`路径，有时候，开发环境和生产环境的情况根本就是两码事，本地可以随意，但线上也许是另外的服务器，或者说，本地可以是ws协议，线上是wss协议。 actioncable也提供了一个简单的配置参数。 ``` config.action_cable.url = "ws://example.com:28080" ``` 不过，这个需要在layout上加上这行： ``` <%= action_cable_meta_tag %> ``` 它的源码是这样的： ``` def action_cable_meta_tag tag "meta", name: "action-cable-url", content: ( ActionCable.server.config.url || ActionCable.server.config.mount_path || raise("No Action Cable URL configured -- please configure this at config.action_cable.url") ) end ``` 就只是生成一个html的标签，被js的`createConsumer`利用，具体可以看`createConsumer`的方法。 本篇完结。 下一篇：[websocket之actioncable实现重新连接功能(九)](http://www.rails365.net/articles/websocket-zhi-actioncable-shi-xian-chong-xin-lian-jie-gong-neng-jiu)