When I was thinking about creating something to showcase using ActionCable (websockets) in a Rails app with React, I first thought of building a chat. But everybody builds a chat. So next, I thought about a realtime dashboard. But then I realized I had no data in this demo app with all but one user (me). So I decided to build a realtime map application that allows you to broadcast your location to anyone you wish.<\/p>\n
In this article, we\u2019ll explore how to use Rails, React (via react_on_rails gem), MobX, and websockets (via ActionCable). The demo app<\/a> can be found here. The full repository can be found here<\/a>.<\/p>\n We\u2019ll start by generating a new Rails app using the command In a previous article, I was asked why I chose For this application, we\u2019ll be working with just two models: The trips migration looks like:<\/p>\n The Trip model looks like:<\/p>\n The checkins migration looks like:<\/p>\n The Checkin model is pretty small:<\/p>\n Now that we have our models and initial setup done, we\u2019ll work on organizing our React folder structure. What I\u2019ve chosen to do is to create a new \u201cbundle\u201d called Just remember to update the We\u2019ll start in the MobX is a state-management tool for React. It\u2019s an alternative to using Redux and one that I find a lot simpler to set up and use. It has an \u201cobject-oriented\u201d feel as opposed to the purely functional feel of Redux.<\/p>\n We need to install the Inside of the It\u2019s important to note how the store was exported at the bottom of the file: as an instance of the store rather than the class itself. We want a single instance of this store across the whole application.<\/p>\n We\u2019ll next take a look at the If we look at the We render this in our !Sign up for a free Codeship Account<\/p>\n When the page loads, we\u2019ll ask the user to enter their name, which we then post to our Rails app. In Rails, we\u2019ll insert a new Trip into the database and respond with the model details as JSON. This part does not use websockets. If we start from the Rails perspective, our action looks like:<\/p>\n If you\u2019re wondering what The Inside of our TripStore, we can add the action called above. It will use the API service we set up and, following successful creation, will subscribe to realtime updates (in this case, about our own location) and at the same time will start sending realtime location info to the server.<\/p>\n Inside of our API service, our POST to the Rails server looks like:<\/p>\n When working with ActionCable in Rails, I had to add the We are going to create a file called Let\u2019s talk terminology first:<\/p>\n To be able to send data over websockets, we\u2019ll first need to connect to the socket and then subscribe to a Channel + Room. If you look back to where the Next we\u2019ll look at the This function was called inside of the In our case, the only things the server will be sending to us are \u201ccheckin\u201d details, which is why the arrow function receives a variable called We talked about how realtime data was received, but how did it get to the server in the first place? After subscribing to the Channel + Room, we have a What We\u2019ve looked at how to both send data to the server via websockets and how to receive realtime updates back. But what are we going to do with this stream of location details? We\u2019ll show them on a map! For this, we are using the Although it was a fair amount of code, we built something pretty darn cool: a realtime location-tracking map you can share with your friends and family! We used a lot of new technologies to make it happen, including React, MobX, ActionCable, and MapBox.<\/p>\n Using ActionCable in React is really no different from using it in standard JavaScript. The key is that once you make your websocket connection, you can then subscribe to a Channel + Room. From there, you are free to both send and receive information. How you decide to display that information is up to you!<\/p>\nGetting Started with a New Rails App<\/h2>\n
rails new tag_along --database=postgresql --webpack<\/code>. Next we\u2019ll add the react_on_rails<\/a> gem and run the following command after committing our changes: rails generate react_on_rails:install<\/code>. Remember to add <%= javascript_pack_tag 'webpack-bundle' %><\/code> to your application layout file.<\/p>\nreact_on_rails<\/code> rather than just relying on the webpacker gem that ships in the latest version of Rails. I posed that question to Justin Gordon<\/a>, the creator of react_on_rails, and he said that it also uses webpacker but provides view helpers and built-in support for server-rendered React components.<\/p>\nCreating Our Models<\/h2>\n
Trip<\/code>, which keeps track of a single tracking session, and Checkin<\/code>, which are all of the location updates and what time they occurred.<\/p>\nclass CreateTrips < ActiveRecord::Migration[5.1]\r\n def change\r\n create_table :trips do |t|\r\n t.string :viewer_uuid, null: false\r\n t.string :owner_uuid, null: false\r\n t.string :name, null: false\r\n\r\n t.timestamps\r\n end\r\n\r\n add_index :trips, :viewer_uuid\r\n add_index :trips, :owner_uuid\r\n end\r\nend<\/pre>\n
class Trip < ApplicationRecord\r\n has_many :checkins\r\n\r\n validates :viewer_uuid, :owner_uuid, :name, presence: true\r\n\r\n before_validation :set_uuids, on: :create\r\n\r\n def set_uuids\r\n self.viewer_uuid = SecureRandom.uuid\r\n self.owner_uuid = SecureRandom.uuid\r\n end\r\nend<\/pre>\n
class CreateCheckins < ActiveRecord::Migration[5.1]\r\n def change\r\n create_table :checkins do |t|\r\n t.integer :trip_id, null: false\r\n t.decimal :lat, null: false, precision: 10, scale: 6\r\n t.decimal :lon, null: false, precision: 10, scale: 6\r\n t.datetime :captured_at, null: false\r\n\r\n t.timestamps\r\n end\r\n\r\n add_index :checkins, :trip_id\r\n end\r\nend<\/pre>\n
class Checkin < ApplicationRecord\r\n belongs_to :trip\r\n validates :trip_id, :lat, :lon, :captured_at, presence: true\r\nend<\/pre>\n
Organizing React<\/h2>\n
Trip<\/code> in the client<\/code> folder with the following subfolders:<\/p>\n\n
client\/webpack.config.js<\/code> file in the entry<\/code> section to make it aware of our new bundle: '.\/app\/bundles\/Trip\/startup\/registration'<\/code>.<\/p>\nstartup<\/code> folder, where there\u2019s a single file called registration.jsx<\/code>. The job of this file is to \u201cregister\u201d any component we wish to render from within a Rails view.<\/p>\n\/\/ client\/app\/bundles\/Trip\/startup\/registration.jsx\r\nimport ReactOnRails from 'react-on-rails';\r\n\r\nimport NewTripContainer from '..\/containers\/NewTripContainer';\r\nimport ViewTripContainer from '..\/containers\/ViewTripContainer';\r\n\r\nReactOnRails.register({\r\n NewTripContainer,\r\n ViewTripContainer\r\n});<\/pre>\nSetting Up MobX<\/h2>\n
mobx<\/code> and mobx-react<\/code> packages. In addition to these, we\u2019ll need to install babel-plugin-transform-decorators-legacy<\/code> and follow that up with adding this plugin to our .babelrc<\/code> file: \"plugins\": [\"transform-decorators-legacy\"]<\/code>. While not necessary, using decorators with MobX makes things a lot cleaner and easier.<\/p>\nstores<\/code> folder, we\u2019ll create the TripStore<\/code>, where we\u2019ll manage the state for the Trip and its Checkins. We declare which properties we\u2019ll track state changes of by adding them at the top of the class using the @observable<\/code> decorator, which comes with MobX.<\/p>\n\/\/ client\/app\/bundles\/Trip\/stores\/TripStore.js\r\nimport { observable, action } from 'mobx';\r\nimport TripApi from '..\/services\/TripApi';\r\n\r\nclass TripStore {\r\n @observable trip = {};\r\n @observable checkins = [];\r\n\r\n constructor() {\r\n this.tripApi = new TripApi();\r\n }\r\n}\r\n\r\nconst store = new TripStore();\r\nexport default store;<\/pre>\nNewTripContainer<\/code> component. It\u2019s not really a component, though, rather just wrapping our real component in a Provider<\/code> component and also passing along the params that come from our Rails view. By wrapping Provider around our component, we can \u201cinject\u201d the MobX store into any of its children.<\/p>\n\/\/ client\/app\/bundles\/Trip\/containers\/NewTripContainer.jsx\r\nimport React from 'react';\r\nimport { Provider } from 'mobx-react';\r\nimport TripStore from '..\/stores\/TripStore';\r\nimport NewTrip from '..\/components\/NewTrip';\r\n\r\nexport default (props, _railsContext) => {\r\n return (\r\n <Provider TripStore={TripStore}>\r\n <NewTrip {...props} \/>\r\n <\/Provider>\r\n );\r\n};<\/pre>\nNewTrip<\/code> component itself, not too much is going on. We are simply including two children, which handle most of the work.<\/p>\nimport React from 'react';\r\nimport TripForm from '.\/TripForm';\r\nimport TripMap from '.\/TripMap';\r\n\r\nexport default class NewTrip extends React.Component {\r\n render() {\r\n return (\r\n <div>\r\n <TripForm \/>\r\n <TripMap \/>\r\n <\/div>\r\n )\r\n }\r\n}<\/pre>\nviews\/trips\/new<\/code> view with the following helper provided by react_on_rails. The route and controller\/action don\u2019t do anything too special, but you can check them out by visiting the repository provided in the introduction.<\/p>\n<%= react_component('NewTripContainer', props: {}, prerender: false) %><\/pre>\nPosting to Rails<\/h2>\n
# app\/controllers\/trips_controller.rb\r\ndef create\r\n clean_old_trips\r\n trip = Trip.create!(trip_params)\r\n render json: trip.to_json\r\nend<\/pre>\n
clean_old_trips<\/code> does, its job is to keep my free Heroku database small. Also, note that error-handling is fairly (entirely) absent from this demo. We\u2019re going to assume the client sends us beautifully valid data (which is a horrible assumption).<\/p>\nTripForm<\/code> component is below. This is the first component we will \u201cinject\u201d the TripStore into. What this means is that we will have a prop called TripStore<\/code>, which allows us to call any action or access any of the observable properties we set up. Comments have been added inline below.<\/p>\nimport React from 'react';\r\nimport { observer, inject } from 'mobx-react';\r\n\r\n\/\/ Inject the TripStore into our component as a prop.\r\n@inject('TripStore')\r\n\/\/ Make our class \"react\" (re-render) to store changes.\r\n@observer\r\nexport default class TripForm extends React.Component {\r\n \/\/ When user submits form, call the `createTrip` action, passing the name.\r\n handleSubmit = (e) => {\r\n e.preventDefault();\r\n const name = this.nameInput.value;\r\n this.props.TripStore.createTrip(name);\r\n }\r\n\r\n render() {\r\n const {TripStore} = this.props;\r\n\r\n \/\/ If we already have a trip in our store, display a link that can be\r\n \/\/ shared with anyone you want to share your realtime location with.\r\n if (TripStore.trip.name) {\r\n const trip_url = `${window.location.protocol}\/\/${window.location.host}\/trips\/${TripStore.trip.viewer_uuid}`;\r\n\r\n return (\r\n <section className=\"trip-form-container\">\r\n <p>\r\n Tracking <strong>{TripStore.trip.name}<\/strong>,\r\n share this link: <a href={trip_url}>{trip_url}<\/a>\r\n <\/p>\r\n <\/section>\r\n )\r\n }\r\n\r\n \/\/ Display the form allowing user to create a new Trip for themselves\r\n return (\r\n <section className=\"trip-form-container\">\r\n \r\n <\/section>\r\n )\r\n }\r\n}<\/pre>\n\/\/ client\/app\/bundles\/Trip\/stores\/TripStore.js\r\n@action createTrip = (name) => {\r\n this.tripApi.createTrip(name).\r\n then(trip => {\r\n \/\/ update our observable property, triggering re-render in component\r\n this.trip = trip;\r\n \/\/ subscribe to websocket channel for this specific \"trip\"\r\n this.tripApi.subscribeTrip(trip.viewer_uuid, checkin => {\r\n this.recordCheckin(checkin)\r\n });\r\n \/\/ send our location to server\r\n this.postCheckin();\r\n });\r\n}<\/pre>\nimport ActionCable from 'actioncable';\r\n\r\nexport default class TripApi {\r\n constructor() {\r\n \/\/ for use later on in article when we talk about websockets\r\n this.cable = ActionCable.createConsumer('\/cable');\r\n this.subscription = false;\r\n }\r\n\r\n createTrip = (name) => {\r\n return fetch('\/trips', {\r\n method: 'post',\r\n headers: new Headers({\r\n 'Content-Type': 'application\/json'\r\n }),\r\n body: JSON.stringify({\r\n trip: {name}\r\n })\r\n }).\r\n then(response => response.json());\r\n }\r\n}<\/pre>\nActionCable + Websockets<\/h2>\n
redis<\/code> gem and update the config\/cable.yml<\/code> file to point to the correct Redis servers on both development and production:<\/p>\ndevelopment:\r\n adapter: redis\r\n url: redis:\/\/localhost:6379\/1\r\n channel_prefix: tag_along_development\r\nproduction:\r\n adapter: redis\r\n url: <%= ENV['REDIS_URL'] %>\r\n channel_prefix: tag_along_production<\/pre>\n
trip_channel.rb<\/code> in the app\/channels<\/code> folder. Each Channel in ActionCable is meant to handle a single set of logic, similar to a Controller.<\/p>\n\n
class TripChannel < ApplicationCable::Channel\r\n # called when user first subscribes\r\n # we can define where their information is \"broadcast\" from\r\n def subscribed\r\n stream_from \"trip_#{params[:room]}\"\r\n end\r\n\r\n # called when a Consumer sends information to the server\r\n def receive(data)\r\n # find trip using owner_uuid\r\n trip = Trip.find_by!(owner_uuid: data['owner_uuid'])\r\n\r\n # add additional checkin\r\n # not recording in demo to keep DB small on free Heroku\r\n # checkin = trip.checkins.create!({\r\n # lat: data['lat'],\r\n # lon: data['lon'],\r\n # captured_at: Time.zone.at(data['captured_at'] \/ 1000)\r\n # })\r\n\r\n # broadcast checkin to subscribers\r\n ActionCable.server.broadcast(\"trip_#{params[:room]}\", {\r\n lat: data['lat'],\r\n lon: data['lon'],\r\n captured_at: data['captured_at']\r\n })\r\n end\r\nend<\/pre>\nReceiving Realtime Data<\/h2>\n
TripApi<\/code> service in JavaScript was introduced, there was a line in the constructor<\/code> that looked like this.cable = ActionCable.createConsumer('\/cable');<\/code>. This sets us up with a connection to the server as a consumer of this websocket.<\/p>\nsubscribeTrip<\/code> function in our TripApi, which is called whenever we want to send\/receive information for a Channel + Room. We provide a callback function that is called once every time the server sends realtime data to us as a Consumer.<\/p>\n\/\/ client\/app\/bundles\/Trip\/services\/TripApi.js\r\nsubscribeTrip = (viewer_uuid, callback) => {\r\n this.subscription = this.cable.subscriptions.create({\r\n channel: \"TripChannel\",\r\n room: viewer_uuid\r\n }, {\r\n received: callback\r\n });\r\n}<\/pre>\ncreateTrip<\/code> action function of the TripStore:<\/p>\n\/\/ client\/app\/bundles\/Trip\/stores\/TripStore.js\r\nthis.tripApi.subscribeTrip(trip.viewer_uuid, checkin => {\r\n this.recordCheckin(checkin)\r\n});<\/pre>\ncheckin<\/code>. It simply calls another action that pushes the checkin to an array.<\/p>\n\/\/ client\/app\/bundles\/Trip\/stores\/TripStore.js\r\n@action recordCheckin = (checkin) => {\r\n this.checkins.push({\r\n lat: parseFloat(checkin.lat),\r\n lon: parseFloat(checkin.lon),\r\n captured_at: parseInt(checkin.captured_at)\r\n });\r\n \/\/ Let's just keep last 25 checkins for performance\r\n this.checkins = this.checkins.slice(-25);\r\n}<\/pre>\nSending Realtime Data<\/h2>\n
subscription<\/code> object. What we will do is ask for the user\u2019s location every two seconds, sending that information to the server using this subscription.<\/p>\n\/\/ client\/app\/bundles\/Trip\/stores\/TripStore.js\r\n@action postCheckin = () => {\r\n \/\/ ask for location\r\n navigator.geolocation.getCurrentPosition(position => {\r\n \/\/ send location + owner_uuid (secret and only owner knows about it)\r\n this.tripApi.postCheckin(\r\n this.trip.owner_uuid,\r\n position.coords.latitude,\r\n position.coords.longitude,\r\n position.timestamp\r\n );\r\n\r\n \/\/ 2 seconds later do the whole thing again\r\n setTimeout(() => {\r\n this.postCheckin();\r\n }, 2000);\r\n });\r\n}<\/pre>\npostCheckin<\/code> does in the API is to send the information over websockets using the subscription and its send<\/code> function.<\/p>\n\/\/ client\/app\/bundles\/Trip\/services\/TripApi.js\r\npostCheckin = (owner_uuid, lat, lon, captured_at) => {\r\n this.subscription.send({\r\n owner_uuid,\r\n lat,\r\n lon,\r\n captured_at\r\n });\r\n}<\/pre>\nShowing Checkin Locations on the Map<\/h2>\n
react-map-gl<\/code> package, which works with MapBox.<\/p>\n\/\/ client\/app\/bundles\/Trip\/components\/TripMap.jsx\r\nimport React from 'react';\r\nimport { observer, inject } from 'mobx-react';\r\nimport MapGL, {Marker} from 'react-map-gl';\r\nimport moment from 'moment';\r\nimport MARKER_STYLE from '..\/markerStyle';\r\n\r\n\/\/ You must sign up for a free access token\r\nconst token = process.env.MapboxAccessToken;\r\n\r\n@inject('TripStore')\r\n@observer\r\nexport default class TripStore extends React.Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n viewport: {\r\n latitude: 43.6532,\r\n longitude: -79.3832,\r\n \/\/ other viewport properties like width, height, zoom\r\n },\r\n settings: {\r\n \/\/ settings\r\n }\r\n };\r\n }\r\n\r\n \/\/ render a Marker for each checkin location\r\n renderMarker = (checkin) => {\r\n return (\r\n <Marker key={checkin.captured_at} longitude={checkin.lon} latitude={checkin.lat} >\r\n <div className=\"station\">\r\n <span>{moment(checkin.captured_at).format('MMMM Do YYYY, h:mm:ss a')}<\/span>\r\n <\/div>\r\n <\/Marker>\r\n );\r\n }\r\n\r\n \/\/ Callback sent to the Map to handle dragging \/ panning \/ zooming of map\r\n onViewportChange = (viewport) => {\r\n this.setState({viewport});\r\n }\r\n\r\n \/\/ Helper function to set the viewport to the user's last checkin location\r\n viewport = () => {\r\n const {TripStore} = this.props;\r\n let latitude = 43.6532;\r\n let longitude = -79.3832;\r\n\r\n if (TripStore.checkins.length > 0) {\r\n const last = TripStore.checkins[TripStore.checkins.length - 1];\r\n latitude = last.lat;\r\n longitude = last.lon;\r\n }\r\n\r\n return {\r\n ...this.state.viewport,\r\n latitude,\r\n longitude\r\n };\r\n }\r\n\r\n render() {\r\n const {TripStore} = this.props;\r\n const viewport = this.viewport();\r\n\r\n \/\/ render actual map, mapping over each `checkins` in the TripStore\r\n return (\r\n <MapGL\r\n {...viewport}\r\n {...this.state.settings}\r\n mapStyle=\"mapbox:\/\/styles\/mapbox\/dark-v9\"\r\n onViewportChange={this.onViewportChange}\r\n mapboxApiAccessToken={token} >\r\n <style>{MARKER_STYLE}<\/style>\r\n { TripStore.checkins.map(this.renderMarker) }\r\n <\/MapGL>\r\n );\r\n }\r\n}<\/pre>\nConclusion<\/h2>\n