Real Time, Ready To Go, Private Chatting Application in VueJS (NodeJS, Socket.io, VueJS)

Introduction

In this tutorial, we will be building a real-time, ready-to-go, private chatting application using VueJS, NodeJS, and Socket.io. This application will allow users to create a chat room and invite others to join, making it a private space for them to communicate. The application will also have the ability to send and receive messages in real-time, making it feel like a traditional chat application.

We will be covering the following topics in this tutorial:

1. Setting up the NodeJS server with Socket.io
2. Creating the VueJS client application
3. Implementing the chat functionality
4. Implementing the room creation and invitation functionality
5. Implementing the real-time messaging functionality

By the end of this tutorial, you will have a fully functional private chatting application that you can use to communicate with others in real-time.

Step 1: Setting up the NodeJS server with Socket.io

To start, let's create a new NodeJS project and install the necessary dependencies. Open your terminal and run the following command:

npm init -y

This will create a new NodeJS project with a package.json file. Next, let's install the necessary dependencies:

npm install express socket.io

This will install Express and Socket.io, which we will use to create our server.

Create a new file called server.js and add the following code:

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static('public'));

let rooms = {};

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

io.on('connection', (socket) => {
  console.log('Client connected');

  // Handle messages
  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // Broadcast the message to all clients in the same room
    socket.broadcast.to(message.room).emit('message', message);
  });

  // Handle room creation
  socket.on('createRoom', (roomName) => {
    console.log(`Creating room: ${roomName}`);
    rooms[roomName] = [];
  });

  // Handle user joining a room
  socket.on('joinRoom', (roomName, username) => {
    console.log(`User ${username} joined room: ${roomName}`);
    rooms[roomName].push(username);
  });

  // Handle user leaving a room
  socket.on('leaveRoom', (roomName, username) => {
    console.log(`User ${username} left room: ${roomName}`);
    rooms[roomName] = rooms[roomName].filter((user) => user!== username);
  });
});

This code sets up an Express server that listens on port 3000 and uses Socket.io to handle client connections. It also defines four event handlers:

• message: handles incoming messages and broadcasts them to all clients in the same room
• createRoom: creates a new room and adds it to the rooms object
• joinRoom: adds a user to a room and updates the rooms object
• leaveRoom: removes a user from a room and updates the rooms object

Step 2: Creating the VueJS client application

Next, let's create a new VueJS project using the Vue CLI:

vue create my-chat-app

This will create a new VueJS project with a src directory containing the necessary files. Let's create a new file called App.vue and add the following code:

<template>
  <div>
    <h1>My Chat App</h1>
    <div>
      <input type="text" v-model="message" @keydown.enter="sendMessage">
      <button @click="sendMessage">Send</button>
    </div>
    <ul>
      <li v-for="message in messages" :key="message.id">
        {{ message.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
      roomName: '',
      username: '',
    };
  },
  mounted() {
    // Connect to the Socket.io server
    this.socket = io('http://localhost:3000');
    // Set up event listeners
    this.socket.on('message', (message) => {
      this.messages.push(message);
    });
    this.socket.on('createRoom', (roomName) => {
      this.roomName = roomName;
    });
    this.socket.on('joinRoom', (roomName, username) => {
      this.username = username;
      this.roomName = roomName;
    });
    this.socket.on('leaveRoom', (roomName, username) => {
      if (username === this.username) {
        this.roomName = '';
        this.username = '';
      }
    });
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.socket.emit('message', { text: this.message, room: this.roomName });
        this.message = '';
      }
    },
  },
};
</script>

This code sets up a VueJS application with a simple chat interface. It uses the socket object to connect to the Socket.io server and sets up event listeners for incoming messages, room creation, user joining, and user leaving. It also defines a sendMessage method that sends a message to the server when the user presses Enter.

Step 3: Implementing the chat functionality

Now that we have our server and client set up, let's implement the chat functionality. In the server.js file, add the following code to handle incoming messages:

// Handle messages
socket.on('message', (message) => {
  console.log(`Received message: ${message.text}`);
  // Broadcast the message to all clients in the same room
  socket.broadcast.to(message.room).emit('message', message);
});

This code broadcasts incoming messages to all clients in the same room.

In the App.vue file, add the following code to display incoming messages:

<ul>
  <li v-for="message in messages" :key="message.id">
    {{ message.text }}
  </li>
</ul>

This code displays a list of incoming messages.

Step 4: Implementing the room creation and invitation functionality

To implement room creation and invitation, we need to add the following code to the server.js file:

// Handle room creation
socket.on('createRoom', (roomName) => {
  console.log(`Creating room: ${roomName}`);
  rooms[roomName] = [];
});

// Handle user joining a room
socket.on('joinRoom', (roomName, username) => {
  console.log(`User ${username} joined room: ${roomName}`);
  rooms[roomName].push(username);
});

// Handle user leaving a room
socket.on('leaveRoom', (roomName, username) => {
  console.log(`User ${username} left room: ${roomName}`);
  rooms[roomName] = rooms[roomName].filter((user) => user!== username);
});

This code creates a new room when a user sends a createRoom event, adds a user to a room when a user sends a joinRoom event, and removes a user from a room when a user sends a leaveRoom event.

In the App.vue file, add the following code to create a new room and invite others to join:

<input type="text" v-model="roomName" @keydown.enter="createRoom">
<button @click="createRoom">Create Room</button>

<div v-if="roomName">
  <input type="text" v-model="username" @keydown.enter="joinRoom">
  <button @click="joinRoom">Join Room</button>
</div>

<div v-if="roomName && username">
  <ul>
    <li v-for="user in users" :key="user">
      {{ user }}
    </li>
  </ul>
</div>

This code creates a text input for the room name and a button to create a new room. It also creates a text input for the username and a button to join a room. When a user creates a new room, the createRoom method is called, which sends a createRoom event to the server. When a user joins a room, the joinRoom method is called, which sends a joinRoom event to the server.

Step 5: Implementing the real-time messaging functionality

To implement real-time messaging, we need to add the following code to the server.js file:

// Handle messages
socket.on('message', (message) => {
  console.log(`Received message: ${message.text}`);
  // Broadcast the message to all clients in the same room
  socket.broadcast.to(message.room).emit('message', message);
});

This code broadcasts incoming messages to all clients in the same room.

In the App.vue file, add the following code to send and receive messages:

<input type="text" v-model="message" @keydown.enter="sendMessage">
<button @click="sendMessage">Send</button>

<ul>
  <li v-for="message in messages" :key="message.id">
    {{ message.text }}
  </li>
</ul>

This code creates a text input for the message and a button to send the message. When a user sends a message, the sendMessage method is called, which sends a message event to the server. The server then broadcasts the message to all clients in the same room.

That's it! With these steps, we have implemented a real-time, ready-to-go, private chatting application using VueJS, NodeJS, and Socket.io. You can now use this application to communicate with others in real-time.