Action Cable and Nuxt.js

Introduction

Action Cable is a powerful WebSocket framework that comes with Ruby on Rails. It enables real-time communication between client and server using WebSockets. On the other hand, Nuxt.js is a progressive Vue.js framework that allows developers to build powerful and fast web applications using the Vue.js ecosystem.

In this article, we will explore how to integrate Action Cable with Nuxt.js to build real-time web applications.

Prerequisites

To follow along with this tutorial, you will need the following installed:

• Ruby on Rails (preferably version 6)
• Node.js (preferably version 14 or above)
• Vue.js (preferably version 2)
• Nuxt.js (preferably version 2)

Setting up the Rails Application

Let's start by creating a new Rails application:

rails new myapp --api --database=postgresql

In this command, --api generates a Rails API application, and --database=postgresql sets up PostgreSQL as the database.

Next, we need to add the necessary gems to our Gemfile:

gem 'redis'
gem 'redis-actioncable'

After adding the gems, let's create a new channel using the rails generate channel command:

rails generate channel Chatroom

This will create a new file called chatroom_channel.rb in the app/channels directory. This file contains the necessary code for our real-time communication.

Implementing the Chatroom Channel

Open the chatroom_channel.rb file and add the following code:

class ChatroomChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'chatroom'
  end

  def speak(data)
    ActionCable.server.broadcast('chatroom', data)
  end
end

In this code, we have created a method called subscribed which subscribes to the chatroom channel. Whenever a client connects to this channel, this method is called.

We have also defined a speak method which broadcasts the messages to all the subscribers of the chatroom channel.

Setting up Redis

We are using Redis as our message broker for Action Cable. To set up Redis, we need to add the following code to our config/cable.yml file:

development:
  adapter: redis
  url: redis://localhost:6379/1

test:
  adapter: async

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

This configuration sets up Redis for development and production environments.

Setting up Nuxt.js

Let's create a new Nuxt.js application using the following command:

npx create-nuxt-app myapp

In this command, myapp is the name of our application.

Once the application is created, let's add the following code to our nuxt.config.js file:

module.exports = {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  axios: {
    baseURL: 'http://localhost:3000/api/v1'
  },

  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          global: true
        },
        user: {
          property: 'user'
        },
        endpoints: {
          login: { url: '/login', method: 'post' },
          user: { url: '/me', method: 'get' },
          logout: { url: '/logout', method: 'post' }
        }
      }
    }
  }
}

In this code, we have set up the axios module to communicate with our Rails API, and we have also configured the authentication module.

Building the Chatroom Component

Let's create a new Vue.js component called Chatroom.vue:

<template>
  <div>
    <h1>Chatroom</h1>

    <div v-if="loggedIn">
      <div v-for="(message, index) in messages" :key="index">
        <p>{{ message }}</p>
      </div>

      <label>
        Message:
        <input type="text" v-model="message">
      </label>

      <button @click="sendMessage">Send</button>
    </div>

    <div v-else>
      <p>Please log in to access the chatroom.</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      message: ''
    }
  },

  computed: {
    loggedIn() {
      return this.$auth.loggedIn
    }
  },

  mounted() {
    this.$socket.subscribe('chatroom', (data) => {
      this.messages.push(data)
    })
  },

  methods: {
    sendMessage() {
      this.$socket.perform('ChatroomChannel', 'speak', { message: this.message })
      this.message = ''
    }
  }
}
</script>

In this component, we have used the vue-actioncable library to subscribe to the chatroom channel and receive messages. We have also implemented a method called sendMessage which broadcasts the message to all the subscribers of the chatroom channel.

Conclusion

In this tutorial, we have seen how to integrate Action Cable with Nuxt.js to build real-time web applications. We have created a Rails API application using Action Cable, and we have also created a Nuxt.js application to communicate with the API.

The complete code for this tutorial is available on GitHub: https://github.com/username/myapp.