ActionCable and ReactJS tie the knot

Transcript

1. ActionCable and ReactJS tie the knot
2. Yatish Mehta @yatish27
5. Ruby on Rails JavaScript Golang
8. models: 982+ controllers: 355+
9. We are hiring
10. ActionCable and ReactJS tie the knot
11. Real-time Updates
12. Refresh
13. “What is the reason for this? There is no need or reason to do this. It is just a silly habit, they simply need a break!!”.
14. Polling
15. $(document).ready(function() { setInterval(function() { $.ajax({ url: "/messages", type: "GET", success: function(data, textStatus, jqXHR) { //update div with new data } }); }, 5000); }); Polling
16. WebSockets
17. Colonel (Server) Soldiers (Clients)
18. Colonel (Server) Soldiers (Clients) Any orders ?
19. Colonel (Server) Soldiers (Clients) No
20. Colonel (Server) Soldiers (Clients) Any orders ?
21. Colonel (Server) Soldiers (Clients) No
22. After every X minutes
23. Colonel (Server) Soldiers (Clients) Any orders ?
24. Colonel (Server) Soldiers with radio connection (Clients)
25. Colonel (Server) Soldiers with radio connection (Clients) ‘broadcasts’ orders
26. Colonel (Server) Soldiers (Clients) with radio ‘connection’ listening (subscribed) to decided ‘channel’ ‘broadcasts’ orders YES SIR!!
27. WebSockets
28. ActionCable
29. “Action Cable seamlessly integrates WebSockets with the rest of your Rails application. It allows for real-time features to be written in Ruby in the same style and form as the rest of your Rails application”
30. Publisher-Subscriber Pattern
31. Client Rails Action Cable Redis
32. Client Rails Action Cable Redis
33. Client Rails Action Cable Redis
34. Client Rails Action Cable Redis
35. ActionCable (Server Side) - Connection - Channel - Broadcast
36. app/channels !"" application_cable # !"" channel.rb # %"" connection.rb %"" notification_channel.rb File Structure
37. connection
38. # app/channels/application_cable/connection.rb 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 if current_user = User.find_by(id: cookies.signed[:user_id]) current_user else reject_unauthorized_connection end end end end
39. channels
40. # app/channels/application_cable/channel.rb module ApplicationCable class Channel < ActionCable::Channel::Base end end
41. # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel def subscribed end def unsubscribed end def custom_notify(data) end end
42. # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel def subscribed current_user.appear end def unsubscribed # Remove the user end def custom_notify(data) end end
43. # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel def subscribed stream_from “notifications” end def unsubscribed # Remove the user end def custom_notify(data) end end
44. # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel def subscribed stream_from “user_#{current_user.id}” end def unsubscribed # Remove the user end def custom_notify(data) end end
45. broadcast
46. ActionCable.server.broadcast "notifications", { action: 'notification', body: ‘Event was created' }
47. class CommentRelayJob < ApplicationJob def perform(comment) ActionCable.server.broadcast "messages:#{comment.message_id}:comments", comment: CommentsController.render(partial: 'comments/comment', locals: { comment: comment }) end end
48. ActionCable (Client Side) - Cable - Subscriptions
49. cable
50. // Action Cable provides the framework to deal with WebSockets in Rails. // You can generate new channels where WebSocket features live using the rails generate channel command. // //= require action_cable //= require_self //= require_tree ./channels this.App = {}; App.cable = ActionCable.createConsumer();
51. subscription
52. App.messages = App.cable.subscriptions.create('NotificationChannel', { received(data) { // data sent from server is received here // { 'action': 'notification', 'body': ‘Event was created' } } })
53. combination
54. ActionCable.server.broadcast “notifications", data App.messages = App.cable.subscriptions.create("NotificationChannel",{ received(data) { //update div with data } }); Server Client
55. ActionCable.server.broadcast “notifications", data App.messages = App.cable.subscriptions.create("NotificationChannel",{ received(data) { //update div with data } }); Server Client
56. App.messages = App.cable.subscriptions.create('NotificationChannel', { received(data) { … customNotify(data) { this.perform('custom_notify', data); } }) App.messages.customNotify({ ‘action’ : ‘event' }) # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel … def custom_notify(data) end end Client Server
57. # app/channels/notification_channel.rb class NotificationChannel < ApplicationCable::Channel … def custom_notify(data) # data => { ‘action’: ‘event' } end end Client Server App.messages = App.cable.subscriptions.create('NotificationChannel', { received(data) { … customNotify(data) { this.perform('custom_notify', data); } }) App.messages.customNotify({ ‘action’ : ‘event' })
58. # config/routes.rb Rails.application.routes.draw do mount ActionCable.server => '/cable' end
59. <%= action_cable_meta_tag %>
60. # config/cable.yml production: &production adapter: redis url: redis://10.10.3.153:6381 development: &development adapter: async test: *development
61. # config/environments/production.rb config.action_cable.allowed_request_origins = [ 'https://glacial-hollows-64972.herokuapp.com', ‘http: //glacial-hollows-64972.herokuapp.com' ]
62. ReactJS
63. Javascript View Framework
64. MVC
65. components
67. Hello React
68. class HelloBox extends React.Component { render() { return ( <h1> Hello, Welcome to RubyNation </h1> ) } } ReactDOM.render(<HelloBox/>, document.getElementById('container'));
69. No Templates, JSX
70. class HelloBox extends React.Component { render() { return ( <h1> Hello, Welcome to RubyNation </h1> ) } } ReactDOM.render(<HelloBox/>, document.getElementById('container'));
71. data management
72. props
73. - comes from parent - immutable - external to component props
74. class HelloBox extends React.Component { render() { return ( <h1> Hello {this.props.name}, ({this.props.company}) Welcome to RubyNation </h1> ) } } let name = 'Yatish'; let company = 'Coupa'; ReactDOM.render(<HelloBox name={name} company={Coupa}/>, document.getElementById('container'));
75. class HelloBox extends React.Component { render() { return ( <h1> Hello {this.props.name}, ({this.props.company}) Welcome to RubyNation </h1> ) } } let name = 'Yatish'; let company = 'Coupa'; ReactDOM.render(<HelloBox name={name} company={Coupa}/>, document.getElementById('container'));
76. state
77. - component owns the state - data change via event handlers - re-render on state change (Virtual DOM) State
78. var Counter = React.createClass({ getInitialState: function () { return { count: 0 }; }, handleClick: function () { this.setState({ count: this.state.count + 1, }); }, render: function () { return ( <button onClick={this.handleClick}> Click me! Number of clicks: {this.state.count} </button> ); } }); ReactDOM.render(<Counter />,document.getElementById('container'));
79. var Counter = React.createClass({ getInitialState: function () { return { count: 0 }; }, handleClick: function () { this.setState({ count: this.state.count + 1, }); }, render: function () { return ( <button onClick={this.handleClick}> Click me! Number of clicks: {this.state.count} </button> ); } }); ReactDOM.render(<Counter />,document.getElementById('container'));
80. var Counter = React.createClass({ getInitialState: function () { return { count: 0 }; }, handleClick: function () { this.setState({ count: this.state.count + 1, }); }, render: function () { return ( <button onClick={this.handleClick}> Click me! Number of clicks: {this.state.count} </button> ); } }); ReactDOM.render(<Counter />,document.getElementById('container'));
81. lifecycle methods
82. getInitialState() componentWillMount() render() componentDidMount() componentWillUnmount()
83. Pointers
84. Props over State
85. Stateless components
86. gem ‘react_rails’
87. <%= react_component('HelloMessage', name: 'John') %>
88. <%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>
89. Demo
90. Tic Tac Toe
91. module ApplicationCable class Connection < ActionCable::Connection::Base identified_by :uuid def connect self.uuid = SecureRandom.uuid end end end
92. class GameChannel < ApplicationCable::Channel def subscribed stream_from "player_#{uuid}" puts "Player #{uuid} has just joined" Seek.create(uuid) end def unsubscribed Seek.remove(uuid) end def make_move(data) Game.make_move(uuid, data) end end
93. class Seek def self.create(uuid) opponent = REDIS.spop('players') if opponent Game.start(uuid, opponent) else REDIS.sadd('players', uuid) end end def self.remove(uuid) REDIS.srem('players', uuid) end end
94. class Game def self.start(player1, player2) cross, nought = [player1, player2].shuffle ActionCable.server.broadcast "player_#{cross}", {action: "game_start", player: "X", msg: "Play your move!!"} ActionCable.server.broadcast "player_#{nought}", {action: "game_start", player: "O", msg: "Waiting for opponent to Play!!"} REDIS.set("opponent_for:#{cross}", nought) REDIS.set("opponent_for:#{nought}", cross) end def self.make_move(uuid, data) # data => {position: 3, player: 'X'} opponent = REDIS.get("opponent_for:#{uuid}") ActionCable.server.broadcast "player_#{opponent}", {action: "move", position: data['position'], player: data['player'], msg: "Play your move!!"} end end
95. class Game def self.start(player1, player2) cross, nought = [player1, player2].shuffle ActionCable.server.broadcast "player_#{cross}", {action: "game_start", player: "X", msg: "Play your move!!"} ActionCable.server.broadcast "player_#{nought}", {action: "game_start", player: "O", msg: "Waiting for opponent to Play!!"} REDIS.set("opponent_for:#{cross}", nought) REDIS.set("opponent_for:#{nought}", cross) end def self.make_move(uuid, data) # data => {position: 3, player: 'X'} opponent = REDIS.get("opponent_for:#{uuid}") ActionCable.server.broadcast "player_#{opponent}", {action: "move", position: data['position'], player: data['player'], msg: "Play your move!!"} end end
97. #board.js,jsx componentDidMount() { this.setupSocket() } setupSocket() { App.messages = App.cable.subscriptions.create('GameChannel', { received(data) { switch (data.action) { case "game_start": console.log('The game has started. You have been assigned a player.') this.setPlayer(data.player) this.updateMsg(data.msg) break; case "move": console.log("A move from opponent is received.") this.updateBoard(data.position, data.player) this.updateMsg(data.msg) break; } },
98. render () { return ( <div> <p> You are player: {this.state.player} </p> <p> {this.state.msg} </p> <div id ='game'> { this.state.tiles.map(function(tile, index) { return ( <Tile state={tile} key={index} position={index} tileClickHandler={this.tileClickHandler.bind(this)} /> ) }, this) } </div> </div> ) }
99. class Tile extends React.Component { clickHandler() { console.log(this.props) this.props.tileClickHandler(this.props.position); } render () { return ( <div className='tile' onClick={this.clickHandler.bind(this)}> {this.props.state} </div> ) } } —————————————————————————————————————————— #board.js tileClickHandler(position) { this.updateBoard(position, this.state.player); App.messages.makeMove({position: position, player: this.state.player}); this.updateMsg('Waiting for opponent to Play!!') }
100. Happy Hacking
101. Thanks @joeyschoblaska http://jargon.io/joeyschoblaska/rails-5-chess-with-action-cable-websockets @brian3kb http://brianbar.net/2014/08/tic-tac-react-part-1/ Facebook https://github.com/facebook/react Actioncable https://github.com/rails/rails/tree/master/actioncable Clipart https://thecliparts.com/the-best-free-clipart-12222/ Gitlab https://gitlab.com