DEV Community: Kevin Sassé

Using Rails Action Cable with a React Client

Kevin Sassé — Thu, 05 Jan 2023 19:40:11 +0000

For my final bootcamp project, I decided to make use of websockets to create a 1v1 card game using React & Rails. In my research, I had difficulty finding sources that went beyond the functionality of a simple chat application. As a result, the guide below worked for my purposes but there may be more efficient ways to handle this type of connection.

Basic terminology

A consumer is the client connecting to a websocket and is created in a javascript client. A consumer can be subscribed to multiple channels at a time.

A channel "Each channel encapsulates a logical unit of work, similar to what a controller does in a typical MVC setup" - rubyonrails.org

A subscriber is a consumer that has successfully connected to a channel

Getting Started

Starting with Rails, in the Gemfile, uncomment gem "rack-cors" and run bundle install in your terminal. Open the cors.rb file (app/config/initializers/cors.rb) and uncomment this section:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :patch, :delete, :options, :head]
  end
end

For the purposes of this guide, I am setting origins to "*". That is fine if you are working locally but be sure to update it to the URL of your front-end application if you deploy your project.

Next we need to create a route in the routes.rb file and mount the action cable server, your routes file should look like this:

Rails.application.routes.draw do
  # rest of your routes
  mount ActionCable.server => '/cable'
end

Open the cable.yml file, it should look like this:

development:
  adapter: async

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: <your_app_name>_production

This guide only focuses on the development environment.The async adapter will suffice however you will most likely need to use redis for production, please refer to the documentation your hosting service for configuration.

Now let's set up the React app to work with our server. First let's install an npm package that helps connect React with rails. There are many available but I found @rails/actioncable to be the most up-to-date and most used.

In your console, run npm i @rails/actioncable. Once installation is complete, create a new file cable.js in the src folder and add this code:

import { createConsumer } from "@rails/actioncable";

const consumer = createConsumer(`<your_backend_url>/cable`)

export default consumer

Creating a connection

Now that both applications are configured to use ActionCable we can create the websocket connection.

In the Rails app, create a new file in the channels folder app/channels. The name of this file will be the name of the channel itself. If you used a rails generator you will see two methods added by default, subscribed and unsubscribed

For my game, when a new game is started, a random key is generated. I am using that key to identify channel instances, my channel file looks like this:

class GameSessionChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    game = Game.find_by(game_key: params[:game_key])
    stream_for game
  end

  def unsubscribe
    # Any cleanup needed when channel is unsubscribed
    puts "unsubscribed"
    stop_all_streams

  end
end

In React, the game creates the websocket connection when a user joins a game as part of a useEffect when the Game component first loads:

import consumer from "../cable"

useEffect(() => {
        consumer.subscriptions.create({
                channel: "GameSessionChannel",
                game_key: `${gameSession.game_key}`,
            },{
                connected: () => {
                    console.log("connected")
                    setIsConnected(true)
                },
                disconnected: () => {
                    console.log("disconnected")
                    setIsConnected(false)
                },
                received: (data) => {
                    switch(data.action) {
                        case "attack-declared":
                          // any logic you want to run
                          break;
                        case "defense-declared":
                          // any logic you want to run
                          break;
                        // any other cases needed
                    }
                }
            })
            return () => {
                consumer.disconnect()
            }
    },[])

Let's break this down. First, consumer.subscriptions.create will create the websocket connection. It needs a channel and identifier. The channel must match the class of the Rails channel that will handle this connection, in this case it is "GameSessionChannel". The identifier is the game_key. In the Rails application, I use this game_key to find the Game in the database and set it as the broadcast target for this channel in the subscribe method.

connected, disconnected and received are functions that will run when those conditions are met, i.e when the connection is created/terminated and when the client receives data from the server.

I also include a return callback function to disconnect the websocket when the user navigates away from the page or closes the window.

Broadcasting data

Now that we have the connections set up correctly, we can broadcast data from anywhere within our Rails application.
Let's send a message when a player joins the game.

In our React app, we will send a fetch request to the server with the User information and the Game Key as parameters:

    const handleSubmit = (e) => {
        e.preventDefault()


          fetch(`<your_backend_url>/joingame/${formData.gameKey}`,{
            method: "PATCH",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({opponent_id: currentUser.id}),
          })
          .then(res => {if (res.ok) {
            res.json()
          .then(existingGame => {
            setGameSession(existingGame)
            navigate(`/game/${existingGame.game_key}`)
          })
          } else {
              res.json().then(errors => setErrors(errors))
          }})

The Rails application will then look up the Game in the database, associate the user as the opponent(or host if this user is creating a game) then broadcast to all subscribers that a user has joined:

    def join_game
        game = Game.find_by!(game_key: params[:game_key])
        user = User.find(params[:opponent_id])
        game.update!(opponent_id: params[:opponent_id])
        user.update!(gamesPlayed: user.gamesPlayed + 1)
        GameSessionChannel.broadcast_to game, {action: "user-joined", game: game, message: "Opponent has joined the game"}
             render json: game, status: :accepted
    end

This line is the websocket broadcast from the game channel as defined by the game_key and is sent to all subscribers of that particular game:

GameSessionChannel.broadcast_to game, {action: "user-joined", game: game, message: "Opponent has joined the game"}

The action key matches a case in the React app, which then triggers the state of the gameSession to be updated with the new player's information as well as adding a message to the game log for all players to see.

                        case "user-joined":
                            setGameSession(data.game)
                            setGameLog(gameLog => ([ ...gameLog, data.message]))
                            break;

When I was first setting up broadcasts, I had set all of my cases to console.log(data.message) as an easy test to check if data was coming from the server correctly.

Additional reading:
Rails docs
@rails/actioncable npm package

Ruby on Rails Serialization: The Basics

Kevin Sassé — Thu, 08 Dec 2022 08:10:43 +0000

Rails is a powerful Ruby framework that allows developers to focus on developing while handling most of the tedium work, i.e. database querying, in the background as long as you, the developer, follow the "convention-over-configuration" format. Rails' generators make following that format even easier.

For my current project, we want a User to be able to see all of their upcoming events. There a few ways to accomplish this and luckily Rails offers a couple simple solutions to us.

Note: Rails' conventions rely on the resource associations, In my previous blog I cover Active Record associations and some tips to help set them up correctly.

USING INCLUDE: & EXCEPT:

When we query the database to find a User, we want to receive the User's information along with the events associated with that User. By default, the show action in the Users Controller will only return the User data:

#users_controller.rb
    def show
        user = User.find(params[:id])
        render json: user
    end

---

#server response
{
    "id": 2,
    "user": "kevin"
    "created_at": "2022-12-08T07:03:38.943Z",
    "updated_at": "2022-12-08T07:03:38.943Z",
}

If we add include: :events as part of the show action's render we will receive all events associated with that user.

#users_controller.rb

    def show
        user = User.find(params[:id])
        render json: user, include: :events
    end

---

#server response
{
    "id": 2,
    "user": "kevin",
    "created_at": "2022-12-08T07:03:38.943Z",
    "updated_at": "2022-12-08T07:03:38.943Z",
    "events": [
         {
            "id": 9,
            "name": "Muse",
            "venue": "Houston Center",
            "event_type": "concert",
            "created_at": "2022-12-08T06:09:39.617Z",
            "updated_at": "2022-12-08T06:09:39.617Z"
        },
        {
            "id": 5,
            "name": "Radiohead",
            "venue": "Atlanta-Center",
            "event_type": "concert",
            "created_at": "2022-12-08T06:09:39.596Z",
            "updated_at": "2022-12-08T06:09:39.596Z"
        }
    ]
}

Rails generators will, by default, add t.timestamps columns to your tables. We can use except: to prevent them from being returned by the server, however this will only exclude those keys from the top level resource, our events will still show those key/value pairs.

#users_controller.rb

    def show
        user = User.find(params[:id])
        render json: user, except: [:created_at, :updated_at], include: :events
    end

---

#server response
{
    "id": 2,
    "user": "kevin",
    "events": [
         {
            "id": 9,
            "name": "Muse",
            "venue": "Houston Center",
            "event_type": "concert",
            "created_at": "2022-12-08T06:09:39.617Z",
            "updated_at": "2022-12-08T06:09:39.617Z"
        },
        {
            "id": 5,
            "name": "Radiohead",
            "venue": "Atlanta-Center",
            "event_type": "concert",
            "created_at": "2022-12-08T06:09:39.596Z",
            "updated_at": "2022-12-08T06:09:39.596Z"
        }
    ]
}

We could work around that by nesting include: and except: statements, however, even with this simple example, that becomes very messy:

    def show
        user = User.find(params[:id])
        render json: user.to_json(except: [:created_at, :updated_at], include: [:events => {except:[:created_at, :updated_at]}])
    end

---

#server response
{
    "id": 2,
    "user": "kevin",
    "events": [
         {
            "id": 9,
            "name": "Muse",
            "venue": "Houston Center",
            "event_type": "concert",
        },
        {
            "id": 5,
            "name": "Radiohead",
            "venue": "Atlanta-Center",
            "event_type": "concert",
        }
    ]
}

If you really wanted to, you can keep chaining include: and except: as much as needed but Rails provides a better way.

SERIALIZERS

Using Rails serializers allows us to clean up the Users Controller and control what data is being returned by the server. You will have to make sure the gem is added to your Gemfile and installed. This gem is not included when running rails new

gem 'active_model_serializers'

Once installed, you can use rails g resource to create a model, controller and serializer at the same time, or you can also use rails g serializer <name(singular)> if you already have a model & controller.

Serialzers user attributes to define what keys are returned instead of only: or except:. They also make use of Active Record associations to include data from other tables.

Returning to our User events example, we can simplify the Users Controller and add attributes and the necessary relationships to our serializers.

#users_controller.rb
    def show
        user = User.find(params[:id])
        render json: user
    end

---

#user_serializer.rb
  class UserSerializer < ActiveModel::Serializer
    attributes :id, :username
    has_many :events
  end

---

#event_serializer.rb
  class EventSerializer < ActiveModel::Serializer
    attributes :id, :name, :venue, :event_type
  end

After updating all the files, our server response will be:

#server response
{
    "id": 2,
    "user": "kevin",
    "events": [
         {
            "id": 9,
            "name": "Muse",
            "venue": "Houston Center",
            "event_type": "concert",
        },
        {
            "id": 5,
            "name": "Radiohead",
            "venue": "Atlanta-Center",
            "event_type": "concert",
        }
    ]
}

Using serializers we can make our code cleaner and more efficient by following "separation of concerns" and Rails "convention over configuration". This is a simple example showing the basics of Rails Active Model Serializers

Further reading:
Active Model Serializers Github

A Beginner's Guide to Active Record Associations

Kevin Sassé — Thu, 17 Nov 2022 07:13:36 +0000

Active Record is an Object-Relational Mapping (ORM) that allows you to map database tables to Ruby classes. A Ruby class will be its own table and instances of that class will be the rows of that table.

Let's imagine we are creating a simple cookbook application. You will have a class called Recipes, each row in the corresponding Recipes table will be an instance of the Recipes class and the database table would look like this:

After a friend expresses interest in the app, you decide that the app should allow for multiple users and those users can add recipes from the Recipes table to their individual accounts. How do you make that possible? First, you will need a new User class & table:

Next you will need away for those two tables to connect, this is where a JOIN table is needed, let's call it "user_recipes" and it will use the user_id & recipe_id to link recipes to the users.

Great, you know have all of the tables you need to be able to associate Users and Recipes together. But you still need to define the relationships between them to allow Active Record to work its magic.

Active Record has built-in macros to make these associations, or table relationships: belongs_to, has_one, has_many, has_many through, has_one through, has_and_belongs_to_many.

In my experience, belongs_to, has_many, has_many through are most common and are the only ones needed for our simple cookbook app.

When creating the table relationships, it helps to break down each class individually, for example:

"A User can have many Recipes"

"A Recipe can have many Users"

We know now that the Users and Recipes tables need to have a many-to-many relationship. Now let's look at the JOIN table, the place where the user and recipe get associated together by their individual IDs. User 2 has Recipe 5 and 4, as shown on rows 2 & 3. Each row, or instance, of the UserRecipes table, class, is a one-to-one relationship

To create these relationships, we will use these macros: belongs_to, has_many, has_many through

"A User has_many UserRecipes"
"A UserRecipe belongs_to a User"
"A UserRecipe belongs_to a Recipe"
"A User has_many Recipes through UserRecipes"
"A Recipe has_many Users through UserRecipes"

These associations will allow a User to have access to their own specific Recipes as well as be able to get the corresponding data from the Recipes table. Otherwise, the return would just be the IDs from the JOIN table and NOT the recipe itself.

This doesn't seem too complicated in the scope of our simple cookbook but can get very complicated very quickly as the application grows. Thankfully there are tools to help you create diagrams and visualize all of these connections such as: dbdiagram and Figma

Our app example, mapped out in dbdiagram would look similar to this:

No matter what diagram tool you use, there is no question that they will help to make your database development easier.

Using a nested NavLink to conditionally render JSX

Kevin Sassé — Fri, 28 Oct 2022 05:33:32 +0000

I've been learning React.js for the past three weeks at Flatiron School and have spent this entire week working on my end-of-phase project. One of the core requirements for the project is that it uses React Router.

Our single-page application displays a list of all the currently active NFL quarterbacks, as of 10/24/2022. The user can click on the player cards show/hide a player's stats as well as edit the stats and add players to a favorite list. We also included the ability to sort by different stats and a search feature.

One of the issues we encountered was how to only show the Search and Sort features on specific endpoints. Initially we tried to set state equal to the endpoint of the link that was clicked and use a ternary to determine which JSX elements should be returned.

return (
        <>
            <nav className="link-container">
                <NavLink className="linkButtons" to="/" onClick={handleLinkClick}>Home</NavLink>
                <NavLink className="linkButtons" to="/form" onClick={handleLinkClick}>New Player Form</NavLink>
                <NavLink className="linkButtons" to="/favorites" onClick={handleLinkClick}>Favorites List</NavLink>
                <NavLink className="linkButtons" to="/activelist" onClick={handleLinkClick}>Active List</NavLink>
            </nav>
            {pathName === "/form" || pathName === "/player/:id/EditForm" ? 
            null
            :
            <div className="search-sort">
                <Search changeSearch ={changeSearch}                              
                changeSearchValue = {changeSearchValue}
                searchValue = {searchValue} />
                <Sort changeSortBy = {changeSortBy}/>
            </div>
            }
        </>
    )
}

This had limited success and worked on the form to add a new player but not the one to edit a player.

The console showed the correct path names for most of the endpoints. If state was being updated correctly, the final "/" should have been "/player/:id/EditForm". The link is still routing to the edit player form but appears as the home endpoint in state. We believe the cause of this issue was that the link to the edit form is nested within the player card component itself instead of the Header component like the new player form.

We tried a few different ways to try and force the correct endpoint into state by passing callback functions through the various components, and did successfully get state to display the correct endpoint. Unfortunately this had issues with the ternary as the ":id" value wasn't getting passed into the Header component. This was overly complex and would only get more involved to get the ternary working properly.

Sometimes you need to take a step back, and rethink your approach to a problem. We were able to solve this issue by using the onClick event to set state to either "true" or "false" based on the name of the <NavLink>.

const handleLinkClick =(e) => {
    e.preventDefault()
    const { name, pathname } = e.target
    if(name === "home" || name === "Favorite Players" || name === "Active Players") {
        setDisplayStatus(true)
    } else {
        setDisplayStatus(false)
    }
    changePageUrl(pathname)        
}

We also had to pass the handleLinkClick function as a prop to the player card component to make it available to the edit form link on each card. We then were able to refactor our ternary to render the Search and Sort elements based on the state value.

    return (
        <>
            <nav className="link-container">
                <NavLink className="linkButtons" name="home" to="/" onClick={handleLinkClick}>Home</NavLink>
                <NavLink className="linkButtons" name="New Player Form" to="/form" onClick={handleLinkClick}>New Player Form</NavLink>
                <NavLink className="linkButtons" name="Favorite Players" to="/favorites" onClick={handleLinkClick}>Favorite Players</NavLink>
                <NavLink className="linkButtons" name="Active Players" to="/activelist" onClick={handleLinkClick}>Active Players</NavLink>
            </nav>
            {displayStatus === false  ? 
            null
            :
            <div className="search-sort">
                <Search changeSearch ={changeSearch}
                changeSearchValue = {changeSearchValue}
                searchValue = {searchValue} />
                <Sort changeSortBy = {changeSortBy}/>
            </div>
            }
        </>
    )
}

If one of the falsey endpoints is clicked, the <Search/> and <Sort/> components will not be displayed. This approach is much simpler than trying to conditionally render components using a nested endpoint.

Github link for our project

A beginner's attempt at fetch() and a crash-course on browser cache

Kevin Sassé — Fri, 07 Oct 2022 00:55:32 +0000

Backstory: You changed your employment status to part-time so you can attend a full-time coding bootcamp. You spent a few weeks prior to the first day of class slowly going through the pre-course material just learning the basics like; "what even is a function?". All the while doing your best to make sure you don't overlook a topic.

Three weeks ago, the bootcamp started. On day one, you're suddenly thrown into content overload. Gone is the slow methodical pace you had during the pre-course work. Someone just strapped a brick on the gas pedal, the bootcamp is moving along at full speed. You stumbled a bit on the first day trying to keep up but quickly found a rhythm.

Today: Now here you are, three weeks later working on the end of phase project. A month ago you didn't even know what the DOM was and in a few days you will have completed your first single page application that uses an API and next week will be learning React.

You could've kept things easier for self and created a db.json and used a json server to host it, but you wanted a challenge. You did the local server and db.json thing, and used an external public API for source data. You are feeling confident that you can handle two different APIs within this project and start coding.

You make your html, css & js files, link them up and everything seems to be working locally. You remembered a tip from your instructor:

Set your endpoints to variables so you only have to change it one place if it ever changes.

With that in mind, you write out the fetch request:

fetch(externalUrl)
.then(res => res.json())
.then(data => console.log(data)

This endpoint is supposed to pull a random object from the database. Satisfied that it looks like what you saw in the lectures and labs, you open up the html file in a browser and hope you see some data...

SUCCESS! You did it! An object appeared in your console from an external source! Three weeks ago those three lines of code meant absolutely nothing to you and now you can write code to communicate with a server!

You quickly add a button to your webpage to call this API and get a new object every time it is clicked and refresh the web page. You start clicking, seeing a new entry in the console log every time. It works!

And then you see it. You actually read the logged information. Its the same object. Every. Single. Time... Why? How? You scratch your head for a while trying to figure out what is happening. The API docs provided a demo of this endpoint and it returned a different object every time, why isn't that happening in your code?

You try different browsers, you ask other students to try making a request to that endpoint on their machines, but the end result is always the same. Enter:

Browser Cache

All browsers have a cache, most apps on your smart devices have one as well. Your device's CPU even has built-in layers of cache. What is it?

The cache is a high-speed read/write storage layer used to hold commonly accessed data.

It is commonly used to help make a smoother user experience by reducing loading times. Instead of having to constantly make new requests to the same endpoint, the browser will cache the initial response, then reference the cache if the request is going to the same endpoint with the same parameters. It makes the assumption it will receive the same response in that scenario and will return the cached information instead.

In your project, since the button is sending a request to the same endpoint without changing any parameters to get a new random object, the browser's network tab will show that the request targeted the cache instead because nothing about the request changed, however, it should have been a different response:

By default, when a request is made using the javascript fetch API, the cache header used is "default". Meaning:

"default": Fetch will inspect the HTTP cache on the way to the network. If there is a fresh response it will be used. If there is a stale response a conditional request will be created, and a normal request otherwise. It then updates the HTTP cache with the response.

This is why every time you click that button to pull a random object, your browser is instead, retrieving the cached object from your initial request.

While caching does make using the internet and many programs smoother and provide a better user experience, there may be cases in which you want to disable it. Say, for instance, your end of phase project where you want a different random object on every time. Fortunately for you, there is a simple solution to force a request to skip the cache and get a new a new response instead.

cache: "no-cache"

Setting the HTTP header cache: to the value "no-cache" in your fetch request will tell the browser to store the response in the cache after it is re-validated. This means you should get a fresh response each time you click the button and get a new random object.

fetch(externalUrl,{
      cache: "no-cache"
})
.then(res => res.json())
.then(data => console.log(data)

You then reload the webpage and click the button a few times to test it:

You did it! The request is getting a server response every time! Your first hurdle of the project is resolved. You know it won't be long before the next one shows up, but that doesn't slow you down. You signed up for this bootcamp to learn, and hurdles a good learning experiences.

For further reading:
https://javascript.info/fetch-api
https://www.openbrewerydb.org/documentation
https://stackoverflow.com/questions/31601167/fetch-api-cache-mode