ActionCable - For Not Another Chat App

1.

ActionCable - Not Another Chat App - by Jesse Wolgamott
| RailsConf 2016 ActionCable: No Chat 1

2.

| RailsConf 2016 ActionCable Not Another Chat App 2

3.

| RailsConf 2016 3 What are we going to do? The Agenda ⏳ History ƽ What is ActionCable? Building Blocks Patterns ǹ

4.

| RailsConf 2016 Jesse Wolgamott @jwo jesse@comal.io jesse@theironyard.com htttp://jessewolgamott.com 4

5.

ƽ HISTORY Web Sockets https://unsplash.com/photos/j_Ch0mwBNds

6.

| RailsConf 2016 ƽ F5 Refresh Or, Hotmail 6

7.

| RailsConf 2016 F5 Refresh Or, Hotmail 7

8.

| RailsConf 2016 ƽ MetaTag Refresh Or, the Drudge Report page-load-increasinator-2000 8

9.

| RailsConf 2016 MetaTag Refresh Or, the Drudge Report page-load-increasinator-2000 9 1 <meta http-equiv="refresh" content="5" />

10.

| RailsConf 2016 ƽ Polling Good Enough for Campﬁre and Basecamp for a Decade 10

11.

| RailsConf 2016 Polling Good Enough for Campﬁre and Basecamp for a Decade 11

12.

| RailsConf 2016 Polling Good Enough for Campﬁre and Basecamp for a Decade 12

13.

| RailsConf 2016 Polling Good Enough for Campﬁre and Basecamp for a Decade 13 1 $(window).ready(function(){ 2 setInterval(function(){ 3 $.ajax("/api/messages") 4 }, 3000) 5 })

14.

| RailsConf 2016 ƽ Web Sockets So Hot Right Now 14

15.

| RailsConf 2016 Web Sockets So Hot Right Now 15 The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. RFC 6455 (2011)

16.

| RailsConf 2016 Web Sockets So Hot Right Now 16 The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. RFC 6455 (2011)

17.

| RailsConf 2016 Web Sockets So Hot Right Now 17 socket.io

18.

| RailsConf 2016 Web Sockets So Hot Right Now 18 starﬁghter.io

19.

| RailsConf 2016 Web Sockets So Hot Right Now 19 elixir / phoenix - 2 million web socket connections

20.

| RailsConf 2016 Web Sockets So Hot Right Now 20 Is the future Real Time? Probably Not.

21.

| RailsConf 2016 Web Sockets So Hot Right Now 21 But for certain apps, that require / like very low latency, WebSockets is TreatSoYelf good.

22.

| RailsConf 2016 Web Sockets So Hot Right Now 22

23.

WHAT IT IS (& NOT) https://unsplash.com/photos/CoD2Q92UaEg

24.

| RailsConf 2016 What ActionCable is NOT (silver bullet) 24

25.

| RailsConf 2016 What ActionCable is NOT (silver bullet) 25 For non rails Apps

26.

| RailsConf 2016 What ActionCable is NOT (silver bullet) 26 Step forward for Rails into more JS integration

27.

| RailsConf 2016 What ActionCable is NOT (silver bullet) 27

28.

| RailsConf 2016 What ActionCable IS Solid. Productive. Fun. 28

29.

| RailsConf 2016 What ActionCable IS Solid. Productive. Fun. 29 Solid Feature for Rails Monoliths

30.

| RailsConf 2016 What ActionCable IS Solid. Productive. Fun. 30 Like Turbolinks and JS responses, a way to snapify rails

31.

| RailsConf 2016 What ActionCable IS Solid. Productive. Fun. 31 Easy and Fun

32.

| RailsConf 2016 Why “No Chat Apps” Hello World! 32

33.

| RailsConf 2016 Why “No Chat Apps” Hello World 33 Chat Apps are the hello world of websockets

34.

| RailsConf 2016 Why “No Chat Apps” Hello World 34 Most apps do not need chat between two users

35.

| RailsConf 2016 Why “No Chat Apps” Hello World 35 Some apps do need communication between server and client tho

36.

| RailsConf 2016 Why “No Chat Apps” Hello World 36 Use Case 1: Collaboration

37.

| RailsConf 2016 Why “No Chat Apps” Hello World 37 Use Case 2: Asynchronous tasks

38.

| RailsConf 2016 First ActionCable Beta a short, short history 38

39.

| RailsConf 2016 First ActionCable Beta a short, short history 39 ActionCable announced as vaporware at RailsConf 2015

40.


41.

| RailsConf 2016 First ActionCable Beta a short, short history 41 Released as preview beta in July 2015

42.

| RailsConf 2016 First ActionCable Beta a short, short history 42 Was a Non-Rails Experience

43.

| RailsConf 2016 First ActionCable Beta a short, short history 43 Was a Non-Rails Experience No Generators

44.

| RailsConf 2016 First ActionCable Beta a short, short history 44 Was a Non-Rails Experience No Deployment Story

45.

| RailsConf 2016 First ActionCable Beta a short, short history 45 Was a Non-Rails Experience No Standalone

46.

| RailsConf 2016 Current Beta Version a short, short history 46

47.

| RailsConf 2016 First ActionCable Beta a short, short history 47 5.0.0.beta3 released Feb 2016

48.


49.

BUILDING BLOCKS https://unsplash.com/photos/osSryggkso4

50.

| RailsConf 2016 The Modules Quick Overview 50

51.

| RailsConf 2016 51 The Modules Quick Overview Ɇ Channel Streaming channels clients can subscribe to. Channels have a name, which can be dynamic `cart_#{user_id}` Ʊ Cable The upgraded connection between browser and server. There’s one connection, many channels. Subscription JS Side, you subscribe to a channel, and handle when you `received` data and broadcast back to server. Broadcast From Rails, you broadcast messages to a channel ActionCable

52.

| RailsConf 2016 Ʊ Cable Connection from Client to Rails 52

53.

| RailsConf 2016 Cable Connection from Client to Rails 53 1 //= require action_cable 2 //= require_self 3 //= require_tree ./channels 4 5 this.App || (this.App = {}); 6 7 App.cable = ActionCable.createConsumer(); 8

54.

| RailsConf 2016 Cable Connection from Client to Rails 54 1 Rails.application.routes.draw do 2 3 # Serve websocket cable requests in-process 4 mount ActionCable.server => '/cable' 5 end

55.

| RailsConf 2016 Ɇ Channel Rooms. Many Many Rooms. 55

56.

| RailsConf 2016 Channel Rooms. Many Many Rooms. 56 1 #app/channels/product_channel.rb 2 class ProductChannel < ApplicationCable::Channel 3 def subscribed 4 stream_from "products" 5 end 6 7 def unsubscribed 8 # Any cleanup needed when channel is unsubscribed 9 end 10 11 end

57.

| RailsConf 2016 Channel Rooms. Many Many Rooms. 57 1 # app/channels/application_cable/connection.rb 2 module ApplicationCable 3 class Connection < ActionCable::Connection::Base 4 5 identified_by :current_user 6 7 def connect 8 self.current_user = User.find_by(id: cookies.signed[:user_id]) 9 # reject_unauthorized_connection unless self.current_user 10 end 11 12 end 13 end

58.

| RailsConf 2016 Channel Rooms. Many Many Rooms. 58 1 # app/controllers/application_controller.rb 2 class ApplicationController < ActionController::Base 3 # ... 4 before_action do 5 @current_user = User.find_by id: cookies.signed[:user_id] 6 end 7 8 def sign_in(user) 9 cookies.signed[:user_id] = user.id 10 end 11 # ... 12 end

59.

| RailsConf 2016 Broadcast From Rails, you broadcast messages to a channel 59

60.

| RailsConf 2016 Broadcast Connection from Client to Rails 60 1 # app/jobs/inventory_syncer_job.rb 2 class InventorySyncerJob < ApplicationJob 3 queue_as :default 4 5 def perform(product) 6 ActionCable.server.broadcast "products", { 7 product: product, 8 template: draw(product) 9 } 10 11 end 12 13 def draw(product) 14 ApplicationController.render(partial: 'products/product', 15 locals: { product: product }) 16 end 17 end

61.

| RailsConf 2016 Subscription That which your JS can subscribe to 61

62.

| RailsConf 2016 Subscription That which your JS can subscribe to 62 1 // app/assets/javascripts/channels/product.js 2 App.product = App.cable.subscriptions.create("ProductChannel", { 3 connected: function() {}, 4 disconnected: function() {}, 5 received: function(data) { 6 var id = data.product.id; 7 $(".product[data-product-id=" + id + "]") 8 .replaceWith(data.template); 9 } 10 });

63.

| RailsConf 2016 Flow How the Magic Magics 63

64.

| RailsConf 2016 Cable Connection from Client to Rails 64 By requiring actioncable, the cable cables to the rails cable

65.

| RailsConf 2016 Cable Connection from Client to Rails 65 The browser upgrades the “/cable” connection to a web sockets connection.

66.

| RailsConf 2016 Cable Connection from Client to Rails 66 When a Subscription Subscribed, A Connection Connects

67.

| RailsConf 2016 Cable Connection from Client to Rails 67 To start listening for updates, you create a subscription with a received function

68.

| RailsConf 2016 Cable Connection from Client to Rails 68 You can have many subscriptions in many ways in many places

69.

| RailsConf 2016 Cable Connection from Client to Rails 69 Access the `App.cable.channel` inside JS: page loads, React, etc

70.

| RailsConf 2016 Cable Connection from Client to Rails 70 The subscription calls `received(data)` when subscription receives data

71.

| RailsConf 2016 Cable Connection from Client to Rails 71

72.

ǹ PATTERNS https://unsplash.com/photos/bk22E-Sp65k

73.

| RailsConf 2016 ǹ Data Updates Data is the Data 73

74.

| RailsConf 2016 Data Updates Data is the Data 74 Keep Data In Sync Across Tabs and Users ǹ

75.

| RailsConf 2016 Data Updates Data is the Data 75 In-Sync ǹ

76.

| RailsConf 2016 Data Updates Data is the Data 76 ǹ Add To Cart Tab Two WHAT ABOUT TAB TWO Cart on Tab One Updates

77.

| RailsConf 2016 Data Updates Data is the Data 77 After Update, Controller (or Job) Broadcasts Message ǹ

78.

| RailsConf 2016 Data Updates Data is the Data 78 Message can either be data ǹ

79.

| RailsConf 2016 Data Updates Data is the Data 79 or a Rails rendered template partial for you to update with ǹ

80.

| RailsConf 2016 Data Updates Data is the Data 80 ǹ 1 ApplicationController.render(partial: 'products/product', 2 locals: { product: @product })

81.

| RailsConf 2016 Data Updates Data is the Data 81 ǹ 1 ActionCable.server.broadcast "cart_#{current_user.id}", { 2 template: ApplicationController.render(partial: 'carts/cart', 3 locals: { cart: @cart }) 4 }

82.

| RailsConf 2016 Data Updates Data is the Data 82 ǹ 1 # app/channels/cart_channel.rb 2 class CartChannel < ApplicationCable::Channel 3 def subscribed 4 stream_from "cart_#{current_user.id}" 5 end 6 end

83.

| RailsConf 2016 Data Updates Data is the Data 83 ǹ 1 // app/assets/javascripts/channels/cart.js 2 App.cart = App.cable.subscriptions.create(“cart_", + current_user.id, { 3 received: function(data) { 4 $("#cart").replaceWith(data.template); 5 } 6 }); 7

84.

| RailsConf 2016 ǹ JavaScript Hooks JS to the rescue 84

85.

| RailsConf 2016 JavaScript Hooks JS to the rescue 85 Sending Messages to Server, and out to other clients ǹ

86.

| RailsConf 2016 JavaScript Hooks JS to the rescue 86 Example: HTML5 Slides Presenter Mode ǹ

87.

| RailsConf 2016 JavaScript Hooks You + Me = We 87 ǹ 1 Reveal.addEventListener( 'slidechanged', function( event ) { 2 3 var slide = { 4 "indexh": event.indexh, 5 "indexv": event.indexv, 6 "indexf": event.indexf 7 } 8 App.slidesNotification.advanceSlide(slide); 9 } ); JS Object Becomes Ruby Hash Channel Method Calls method on Rails Channel Channel Name Name of Rails Channel

88.

| RailsConf 2016 JavaScript Hooks You + Me = We 88 ǹ 1 App.slidesNotification = App.cable.subscriptions.create("SlidesChannel", 2 { 3 4 advanceSlide: function(data) { 5 // tell action-cable rails to execute something 6 return this.perform('slides', data); 7 }, 8 9 received: function(data) { 10 return Reveal.slide(data.indexh, data.indexv, data.indexf); 11 } 12 });

89.

| RailsConf 2016 JavaScript Hooks You + Me = We 89 ǹ 1 class SlidesChannel < ApplicationCable::Channel 2 def subscribed 3 stream_from "slides" 4 end 5 6 def slides(data) 7 # We only want to let the admin (current_user) advance slides 8 if current_user.admin? 9 ActionCable.server.broadcast "slides", data.slice("indexh", 10 "indexv", 11 "indexf") 12 end 13 end 14 end

90.

| RailsConf 2016 JavaScript Hooks JS to the rescue 90 Messages go from Client to Server, not P2P ǹ

91.

| RailsConf 2016 ǹ Collaboration You + Me = We 91

92.

| RailsConf 2016 Collaboration You + Me = We 92 ǹ Trello

93.

| RailsConf 2016 Collaboration You + Me = We 93 ǹ Pivotal Tracker

94.

| RailsConf 2016 Collaboration You + Me = We 94 ǹ GitHub Updates on CI Testing

95.

| RailsConf 2016 ǹ Asynchronous Tasks Tell Me Later 95

96.

| RailsConf 2016 Asynchronous Tasks Tell me later 96 ǹ 1 class MechanizeChannel < ApplicationCable::Channel 2 def subscribed 3 stream_from "search_#{params[:uuid]}" 4 end 5 6 end

97.

| RailsConf 2016 Asynchronous Tasks Tell me later 97 ǹ 1 var uuid = guid(); 2 3 $.ajax({ 4 url: '/api/search', 5 method: 'POST', 6 data: { 7 search: term, 8 uuid: uuid 9 } 10 })

98.

| RailsConf 2016 Asynchronous Tasks Tell me later 98 ǹ 1 class SiteSearchJob < ApplicationJob 2 3 def perform(search, uuid) 4 stream = "search_#{search_uuid}" 5 6 ActionCable.server.broadcast(stream, status: START) 7 8 # ... 9 10 ActionCable.server.broadcast( 11 stream, 12 status: COMPLETE, 13 template: action_template 14 ) 15 16 end 17 end

99.

| RailsConf 2016 ǹ And Yes, Chatting (…) 99

100.

| RailsConf 2016 And Yes, Chatting … 100 ǹ

101.

| RailsConf 2016 ǹ Deployment - In-App (…) 101

102.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 102 ǹ Can be done with only 1 server and no resque / sidekiq

103.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 103 ǹ 1 # config/environments/production.rb 2 config.active_job.queue_adapter = :async 3 4 # config/cable.yml 5 production: 6 adapter: async 7 development: 8 adapter: async 9 test: 10 adapter: async 11

104.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 104 ǹ Everything is done async (threaded)

105.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 105 ǹ ActionCable connects to `/cable` on Rails Server

106.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 106 ǹ If more than 1 server/ dyno, use Redis

107.

| RailsConf 2016 ǹ Deployment - Standalone (…) 107

108.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 108 ǹ Slightly more involved

109.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 109 ǹ (same scale as moving from async to Sidekiq)

110.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 110 ǹ Connect via Redis

111.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 111 ǹ sockets.domain.io

112.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 112 ǹ Conﬁgure conﬁg.action_cable.url

113.

| RailsConf 2016 Deployment - Standalone > 1,000 concurrent 113 ǹ

114.


115.


116.


117.

| RailsConf 2016 ǹ Gotchas WATCH OUT 117

118.

| RailsConf 2016 Gotchas WATCH OUT 118 Missed Messages ǹ

119.

| RailsConf 2016 Gotchas WATCH OUT 119 Best to always use ActionJob to broadcast ǹ

120.

| RailsConf 2016 Gotchas WATCH OUT 120 No Session Only Cookies ǹ

121.

| RailsConf 2016 Gotchas WATCH OUT 121 Devise ǹ 1 # app/config/initializers/warden_hooks.rb 2 Warden::Manager.after_set_user do |resource,auth,opts| 3 scope = opts[:scope] 4 auth.cookies.signed[“#{scope}_id"] = resource.id 5 end http://www.rubytutorial.io/actioncable-devise-authentication/

122.

| RailsConf 2016 Gotchas WATCH OUT 122 Request Origins ǹ 1 # config/environments/production.rb 2 config.action_cable.allowed_request_origins = [ 3 'http://example.com', # DON'T TRAIL a '/' 4 ] 5

123.

| RailsConf 2016 Gotchas WATCH OUT 123 Production ǹ 1 # config/cable.yml 2 production: 3 adapter: redis 4 url: redis://localhost:6379/1 5 6 development: 7 adapter: async 8 9 test: 10 adapter: async

124.

| RailsConf 2016 Where to go from here? Now What? 124

125.

| RailsConf 2016 Where to go from here? Now What? 125 Simple Example: https://github.com/ jwo/inventory-cable ǹ

126.

| RailsConf 2016 Where to go from here? Now What? 126 https://github.com/ rails/actioncable- examples ǹ

127.

| RailsConf 2016 Where to go from here? Now What? 127 Documentation: https://github.com/ rails/rails/tree/ master/actioncable ǹ

128.

| RailsConf 2016 ! Many Thanks !!!!! 128

129.

| RailsConf 2016 Many Thanks !!!!!! 129 DHH

130.

| RailsConf 2016 Many Thanks !!!!!! 130 42+ Contributors

131.

| RailsConf 2016 Many Thanks !!!!!! 131 Hiring Educators

132.

| RailsConf 2016 Many Thanks !!!!!! 132 I’m @JWo Thanks!!!!11!!!!

ActionCable - For Not Another Chat App

ActionCable - For Not Another Chat App

Want more?

Transcript