Online example: https://ac.aiichat.cn

Code repository: https://github.com/renny-ren/action-chat

Introduction

In this article, I'm going to explore how to leverage the power of Rails ActionCable and React to build a web chat application. ActionCable provides a straightforward way to incorporate real-time features into Rails applications, while React serves as a powerful and flexible frontend framework. By combining these technologies, we can create an interactive and dynamic chat application. Let's dive into the details of how to implement this solution.

Setting up the Environment

Before we dive into the implementation details, make sure you have the following prerequisites in place:
- Ruby on Rails: Ensure that you have Rails installed on your local machine.
- React: Familiarize yourself with React and have a basic understanding of how React components and states work.

Creating the ActionCable Channel

To begin with, let's create an ActionCable channel for our chat application. In your terminal, run the following command to generate the channel:

rails g channel chat_channel

This command will generate a chat_channel.rb file under the app/channels directory. Open this file and update it as follows:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "ChatChannel"
  end

  def unsubscribed
    # Any cleanup needed when the channel is unsubscribed
  end
  
  def receive(data)
    @message = user.messages.create(body: data["body"])
    ActionCable.server.broadcast("ChatChannel", JSON.parse(@message.to_json))
  end
end

stream_from method inside the subscribed specifies the channel you want to subscribe to and receive updates from. It means that whenever there is a new message sent to the ChatChannel, the clients subscribed to this channel will receive the message in real-time.

Creating the ActionCable Consumer

To establish a connection between the client and the server, we need to create an ActionCable consumer in our React application. Add the following code snippet where you want to initiate the connection:

app/javascript/channels/consumer.js

// Create a consumer object
const consumer = ActionCable.createConsumer();

This code initializes an ActionCable consumer object, which acts as the bridge between the client and the server.

Subscribing to the Channel

Now, let's subscribe to the chat channel we created earlier. Use the following code snippet to subscribe to the channel:

// Subscribe to a channel
const subscription = consumer.subscriptions.create("ChatChannel");

Ensure that the channel name passed matches the name of the channel you defined in your Rails application.

Unsubscribing from the Channel

If at any point you want to unsubscribe from the chat channel, you can call the unsubscribe method on the subscription object:

subscription.unsubscribe();

This will effectively terminate the connection and stop receiving updates from the channel.

Disconnecting the Consumer

Finally, when you're done using the consumer object, it's good practice to disconnect it. Use the following code snippet to disconnect the consumer:

consumer.disconnect();

This will release any resources associated with the consumer and prevent unnecessary connections.

Online example: https://ac.aiichat.cn

Code repository: https://github.com/renny-ren/action-chat

Reference

Refer to the following resources for more detailed information and examples:

Integrating ActionCable with React

Simple chatroom with Rails 6 and ActionCable

rails-sse-and-websockets GitHub Repository