Build Realtime Chat App with Socket.io, NodeJS, and ReactJS

In this article, you will learn how to build a real-time chat application using NodeJS, ReactJS, and the Socket.io library. This article will provide a good introduction to WebSockets and the Socket.io library.

The application will be very simple in terms of features and design, as it is mainly intended to demonstrate the basic implementation of a Socket server and how to interact with it in a frontend application.

Here is a video of the final application:

Prerequisites

In order to follow along with the tutorial, you will need the following:

  • NodeJS v10+ installed
  • Basic knowledge of NodeJS, Express, ReactJS

WebSockets & Socket.io

Before we start building the application, we will discuss what WebSockets is and why it is useful for building web applications with real-time features.

WebSockets is a protocol for bidirectional, or two-way, communication between a client and server.

But what makes a bidirectional communication protocol like WebSockets preferable to a unidirectional protocol like HTTP when building real-time features?

While HTTP requires the client to send a request to the server first to receive any data, a bidirectional protocol such as WebSockets allows the connection between client and server to persist.

This means that a client is not required to make a new request to the server every time that they want to check for new data from the server.

In this tutorial, we will use the WebSockets API to implement a real-time chat, but we won’t be working with the API directly. Instead, we will use Socket.io as a wrapper over WebSockets.

Socket.io is a library that abstracts away all of the complications of working with WebSockets, allowing you to implement bidirectional communication in your application with less headache.

The Socket.io library contains two parts: a server that mounts onto the NodeJS HTTP server and a client-side library for the browser.

Building the Socket Server

We will start by building out the backend of the application.

First, create a new NodeJS project by running the following command:

npm init -y

Installing dependencies

We will need to install the following packages:

  • Express: NodeJS framework that makes building back end web applications easier
  • Socket.io: Library that enables real-time, bi-directional client-server communication
  • CORS: Mechanism that allows restricted resources from a domain to be shared with other domains
npm install express socket.io cors

Create a server file called index.js. Inside the server file, import Express and create an Express app:

const express = require("express");

const app = express();

CORS middleware

Cross-origin resource sharing (CORS) is an HTTP header mechanism that allows servers to grant permission to other external domains to access server resources.

The CORS NodeJS package provides a middleware that can be used to enable CORS on your server.

Import the CORS package and enable the Express server to accept cross-origin HTTP requests:

const cors = require("cors");

app.use(cors());

Creating Socket IO object

Although HTTP comes built-in to Express, we will need to access it directly to set up the Socket.io server.

So, we need to first create an HTTP server, which we can do using the built-in HTTP library in NodeJS.

const http = require("http");
const server = http.createServer(app);

Import the Server function from Socket.io:

const { Server } = require("socket.io");

Now, we will initialize a new instance of socket.io by calling all the Server function from Socket.io, taking in the HTTP server as an argument. Since we will be accessing the backend from a cross-origin frontend browser application, we need to pass a CORS object as an optional second argument to allow any URL to access our server URL:

const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

server.listen(8000, () => {
  console.log(`Server is running on port ${PORT}`);
});

Creating Socket event listener

Now, we can implement Socket IO logic. Just like WebSockets, it’s an event based system. When an event is emitted, you will have access to any data that was passed along with the event in the callback function. There, you can implement some function in response to the event.

The first event that you will want to listen for is the connection of a client from the frontend. The callback of the connection event will give us access to the client Socket object.

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

Whenever there is a new Socket connection, we will send the user that connected their Socket ID using io.to().emit()

By calling to and passing in the client’s Socket ID, we are ensuring that the event is only emitted to the specific client.

io.on("connection", (socket) => {
  io.to(socket.id).emit("socket_id", socket.id);
});

Now, we will create a custom event handler to handle the send_message event from the client. This event will be emitted anytime a user submits a new message in the chat application. The message data that is sent along with the event is passed to the callback function.

Taking the message data, the server emits a receive_message event to all clients connected to the server (except the client who sent the message). In short, this event sends newly submitted messages to other users of the application.

io.on("connection", (socket) => {
  socket.on("send_message", (messageData) => {
    socket.broadcast.emit("receive_message", messageData);
  });
});

We have finished implementing the backend for the application. Here is the full server file code:

const express = require("express");
const http = require("http");
const cors = require("cors");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);

app.use(cors());

const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  io.to(socket.id).emit("socket_id", socket.id);

  socket.on("send_message", (messageData) => {
    socket.broadcast.emit("receive_message", messageData);
  });
});

server.listen(8000, () => {
  console.log(`Server is running on port 8000`);
});

Building React frontend application

In a separate client folder, create a new React application by running the following command:

npx create-react-app client

Now, open the App.js file in the src folder. This is the only file we’ll be using in the React project.

React boilerplate setup

Before we add Socket IO to the frontend, we will set up the layout of the frontend, create state variables and other Hooks elements, and handle some other boilerplate.

socketID will store the ID of the client’s socket.

currentMessage will store the text typed into the input. When the user presses the Send button, the will send this message text to other clients in the send_message event.

messageList will store all of the messages– both from the current user and other users– sent thus far.

The sendMessage function will be responsible for sending messages from the current user to the server.

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

function App() {
  const [socketID, setSocketID] = useState("");
  const [currentMessage, setCurrentMessage] = useState("");
  const [messageList, setMessageList] = useState([]);

  const sendMessage = async () => {
    
  };

  useEffect(() => {
    
  }, []);

  return (
    <div class="container">
      <h1>Realtime Chat</h1>

      <div class="msg-container-wrapper">
        <div class="message-container">
          {messageList.map((msg) => {
            return (
              <div class={`message ${msg.sender === socketID ? "my-msg" : "other-msg"}`}>
                {msg.message}
              </div>
            );
          })}
        </div>
      </div>

      <div class="input-container">
        <input
          type="text"
          value={currentMessage}
          onChange={(e) => setCurrentMessage(e.target.value)}
        />
        <button onClick={() => sendMessage(currentMessage)}>Send</button>
      </div>
    </div>
  );
}

export default App;

Installing Socket IO client

Socket IO is not a direct WebSocket implementation, which means that you can’t just use the built-in WebSocket class in the browser. Instead, you must use the Socket IO client library.

You can install it with the following command:

npm install socket.io-client

The io object, which is the Socket IO client library, will now be globally available in the browser and you can import it throughout your project.

Import the io object:

import { io } from "socket.io-client";

Create the connection by pointing to the URL of the server:

const socket = io("http://localhost:8000");

Now, we are ready to start listening to events from and emitting events to the server.

Getting client Socket ID from the server

In the useEffect hook, our client Socket will listen for the socket_id event from the server which sends the current user’s socket ID. We use this socket ID to differentiate between messages sent by the current user and messages sent by other users.

We also return an anonymous function that acts as a component cleanup upon unmounting.

useEffect(() => {
    socket.on("socket_id", (id) => {
      setSocketID(id);
    });

    return () => {
      socket.off("socket_id");
    };
}, [socket]);

Receiving messages from the server

Next, we will add an event listener to the useEffect hook to listen for the receive_message event. This event is triggered to receive any new messages from the Socket IO server.

When the event occurs, the data from the event, which is an array including the message text and the message sender, is added to the messageList array to be added on screen.

Again, we create an anonymous cleanup function for the event listener.

useEffect(() => {
    socket.on("receive_message", (data) => {
      setMessageList((list) => [...list, data]);
    });

    return () => {
      socket.off("receive_message");
    };
}, [socket]);

Sending messages to the server

Now, we will create a function that will send a new message to the Socket IO server. This will be an asynchronous function.

First, we check to make sure that the current message is not an empty string. If it is not, then we create a messageData object including the socket ID of the sender and the message text.

Then, we use the current user’s socket to emit a send_message event to the server, passing along the messageData object with it.

When the server gets this data, it will emit it to all of the other users in the application. However, the user who actually sent the message will not receive the data from the server. Instead, the data is added to the messageList manually. Then, the currentMessage is cleared.

const sendMessage = async () => {
    if (currentMessage !== "") {
      const messageData = {
        sender: socketID,
        message: currentMessage,
      };

      await socket.emit("send_message", messageData);
      setMessageList((list) => [...list, messageData]);
      setCurrentMessage("");
    }
};

We have finished implementing the logic for the frontend application. Here is the full App.js file code:

import React, { useState, useEffect, useRef } from "react";
import { io } from "socket.io-client";
import "./styles.css";

const socket = io("http://localhost:8000");

function App() {
  const [socketID, setSocketID] = useState("");
  const [currentMessage, setCurrentMessage] = useState("");
  const [messageList, setMessageList] = useState([]);

  const sendMessage = async () => {
    if (currentMessage !== "") {
      const messageData = {
        sender: socketID,
        message: currentMessage,
      };

      await socket.emit("send_message", messageData);
      setMessageList((list) => [...list, messageData]);
      setCurrentMessage("");
    }
  };

  useEffect(() => {
    socket.on("socket_id", (id) => {
      setSocketID(id);
    });

    socket.on("receive_message", (data) => {
      setMessageList((list) => [...list, data]);
    });

    return () => {
      socket.off("socket_id");
      socket.off("receive_message");
    };
  }, [socket]);

  return (
    <div class="container">
      <h1>Realtime Chat</h1>

      <div class="msg-container-wrapper">
        <div class="message-container">
          {messageList.map((msg) => {
            return (
              <div class={`message ${msg.sender === socketID ? "my-msg" : "other-msg"}`}>
                {msg.message}
              </div>
            );
          })}
        </div>
      </div>

      <div class="input-container">
        <input
          type="text"
          value={currentMessage}
          onChange={(e) => setCurrentMessage(e.target.value)}
        />
        <button onClick={() => sendMessage(currentMessage)}>Send</button>
      </div>
    </div>
  );
}

export default App;

With that, you have basically completed the application! All that is left is the CSS styling, which we won’t cover in this tutorial. In the links below, you can access the CSS that was used in the demo project.

Thank you for following this tutorial. Happy coding!

Adding TypeScript to Existing React Project

Installation

First install it into the project:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx). Type errors will start to show up.

Generate tsconfig.json file

Although the React documentation says that you are not required to make a tsconfig.json file because one will be made automatically for you, that was not my experience. After doing the installation, a tsconfig.json file was not generated for me.

I had to run the following command to generate the file:

npx tsc --init

Now, you should be able to run your React project with TypeScript, if there are no TypeScript errors.

React Error: Attempted import error ‘X’ is not exported from

This error occurs when you try to import something that is not present in the specified file. When solving this error, check to make sure you are using the corresponding import and export mechanisms.

Default exports

Default exports are useful to export only a single object, function, variable. You can have only one default export per file.  

How to make a default export:

export default function Component() {
   return <h1>Hello, world</h1>
}

How to import a component with a default export:

import Component from './Component';

Notice that you do not use curly braces when importing a default export.

When importing a default export, you can use any name you want since there is only one in the file. For example:

import MyNewName from './Component';

Named import

You can have more than one named exports per file.

How to make a named export:

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

How to export multiple named modules at once:

export {
   add,
   subtract,
}

How to import a named export:

import { add, subtract } from './another-file';

When using named imports, the name of imported module must be the same as the name of the exported module.

You can also import both a default module and a named module on the same line, like so:

import Component, { add } from './another-file';

TypeScript Error: Generic type ‘Array’ requires 1 type argument(s).

This error comes from the use of Array without any type for the elements in the array. To solve this error, define a type for the contents of the array. You can define this in 2 different ways:

Solution 1:

clients: String[];

Solution 2:

clients: Array<String>;

If the type of the array can’t be determined, use any:

any[]
Array<any>

Note: Using the T[] syntax is recommended over Array<T> syntax

Testing Event Handlers in React Testing

In this short article, you will learn how to test event handlers, such as button clicks, with React Testing.

First, we will create a simple component to test:

import React from "react";

export default function ButtonWrapper({ title, ...props }) {
  return <button {...props}>{title}</button>;
}

This ButtonWrapper component takes in a title prop and any other props and returns a standard JSX button element.

Now, create a testing file with the same name as the component file and a .test.js extension (or .test.tsx if you are using TypeScript) (i.e. ButtonWrapper.test.js)

First, import the following from React testing and import the component:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import ButtonWrapper from "./ButtonWrapper";

Now, create the test and give it a name (i.e. "handles onClick")

test("handles onClick", () => {
 
})

Render the ButtonWrapper component:

render(<ButtonWrapper title={"Add"} />);

We will add an onClick property to the button and call the jest.fn() function whenever the component is clicked:

const onClick = jest.fn();
render(<ButtonWrapper onClick={onClick} title={"Add"} />);

jest.fn() is a function created by Jest which tracks how often it is called. In other words, it will keep track of how many times the button component is clicked.

Now, we will get access to the button and click it using fireEvent.click():

const buttonElement = screen.getByText("Add");
fireEvent.click(buttonElement);

fireEvent.click() simulates a click on the button element.

Next, we will write an assertion for how many times the button has been clicked. First, we will write an inaccurate assertion:

expect(onClick).toHaveBeenCalledTimes(0);

Now, we will run our test:

yarn test

This test will not pass because we know that the button was clicked once by the fireEvent call. The output should look like this:

Basically, React Testing is saying that it expected 0 calls to be made, but it received 1 call.

Now, let’s make a correct assertion:

expect(onClick).toHaveBeenCalledTimes(1);

The output should look like this:

Here is the final code:

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import ButtonWrapper from "./ButtonWrapper";

test("handles onClick", () => {
  const onClick = jest.fn();
  render(<ButtonWrapper onClick={onClick} title={"Add"} />);
  const buttonElement = screen.getByText("Add");
  fireEvent.click(buttonElement);
  expect(onClick).toHaveBeenCalledTimes(1);
});

Now, you can test event handlers in React Testing. Thanks for reading!

Basic Component Testing with React Testing and TypeScript

In this article, we will create a simple React component and do some basic testing on the component using React Testing. This will help you get acquainted with the React Testing library and how to write tests.

Installation

The React Testing library comes by default when you run create-react-app, so it should already be in your project if you created your React project with that command.

Create TypeScript component

First, we will create a component using TypeScript. Make a file called Container.tsx

In the Container component, we will have a div element with a h1 inside of it:

import React from "react";

export const Container = ({ title }: { title: string }) => (
  <div role="contentinfo">
    <h1>{title}</h1>
  </div>
);

We define a title prop with a type of string in TypeScript with the code: { title }: { title: string }

We also set an aria-role for the div element of type contentinfo

Write Tests

Now, let’s write some tests for this component

Create a test file called Container.test.tsx

First, we need to add some imports:

import React from "react";
import { render, screen } from "@testing-library/react";
import { Container } from "./Container";

As you can see, we are importing render and screen from the React testing library, which we will use momentarily.

To create a new test, we use the following structure (which is based on Jest, which is the underlying test framework):

test("Name of test", () => {
   // Function body of test
});

So, we will create a test named “renders title” and then define it:

test("renders title, () => {
    // Test will go here
})

First, render the Container component:

render(<Container title={"New Container"} />);

Next, get access to an element:

const titleElement = screen.getByText(/New Container/i);

There are many ways to get access to an element in the library

  • getByText
  • getByRole (aria-role)
  • getByLabelText
  • getByPlaceholderText

Make an assertion about the element:

expect(titleElement).toBeInDocument()

The above assertion is simply that the title element is in the Container component. This is just a very simple test.

So, here is the full test code:

test("renders title, () => {
    render(<Container title={"New Container"} />);
    const titleElement = screen.getByText(/New Container/i);
    expect(titleElement).toBeInDocument()
})

Run yarn test

The test output should look like this if it passed successfully:

Now, you have a basic introduction to testing components in React.

How to Setup Redis in Node.js Project

Redis is an in-memory key-value database. You can think of it like one giant JSON object. It is unique from other databases in that it stores all data in working memory (RAM) instead of on your system’s hard disk. This allows Redis to be extremely fast at fetching data.

Although Redis can be used as a full database, it is typically used for caching, which is when data that is frequently accessed or takes a long time to compute is stored in working memory for easy access.

Setting up Redis in Node.js project

You can use the node-redis library to interact with Redis in your Node.js application. In this tutorial, you will learn how to establish a connection between Node.js and Redis.

The following steps:

  1. Create a new Node.js project
  2. Install Redis client in Node project
  3. Create a new Redis object in your server file
  4. Start the connection
  5. Run Redis & your Node project

Step 1: Create new Node.js project

Create a blank Node.js project with npm init

npm init -y

Step 2: Install Redis client

To use Redis with Node.js, you need to install a Node.js Redis client. Inside the project directory, install the node-redis client by running this command:

npm install redis

Step 3: Create a new Redis object

Once you’ve installed the redis module, you can access Redis in your Node application. The redis module’s createClient() method creates a Redis object:

const redis = require('redis')
const client = redis.createClient()

The Redis object will default to use 127.0.0.1 as the hostname and 6379 as the port.

To connect to a different host or port, use a connection string in the format redis[s]://[[username][:password]@][host][:port][/db-number] like so:

redis.createClient({
  url: 'redis://alice:foobared@awesome.redis.server:6380'
});

Step 4: Start the connection

Now, use the Redis object’s connect() function to start the connection with Redis on the default port 6379. Since the function returns a Promise, we must use async/await to handle it. We can use an anonymous self-invoking function which will run immediately after we define it:

(async () => {
  await client.connect();
});

You also call the Node.js on() method that registers events on the Redis object. For example, the following line checks for an error event and triggers a callback which logs the error:

(async () => {
  client.on("error", (err) => console.log("Redis Client Error", err));

  await client.connect();
});

Step 5: Run Redis & your Node project

Before you run your Node project, make sure you are running the Redis database in a seperate Terminal.

You can run the Redis database with the following command:

redis-server

You should see an output similar to this in your console when you run the command:

Now, you can run your Node project with node index.js. Although there won’t be any Terminal output (unless there is an error), you are now able to use Redis in your project.

How to Open VS Code settings.json file

This short tutorial will be on how to open the settings.json file in VS Code on Mac.

In the menu bar, navigate to Code > Preferences > Settings.

This will open the Settings UI page, which looks like this:

In the upper right-hand corner of the page, click the Open Settings (JSON) icon.

Now, you have opened the settings.json file!

How to Check if the Current Directory is a Git Repository

Use this command in your Terminal to determine if the directory you are currently in is a Git repository or not:

git rev-parse --is-inside-work-tree

The shell prints true if you are in a git repository’s working tree. It prints false if you are inside the ‘.git’ tree but not the working directory, and it prints a fatal error if it’s neither (not connected to any git repo).

Both ‘true’ and ‘false’ are printed on STDOUT with an exit status of 0, the fatal error is printed on STDERR with an exit status of 128.

LeetCode #125: Valid Palindrome (Solution in Python & Explanation)

In this article, I will be explaining how to solve the Valid Palindrome problem on LeetCode. This is an Easy-level problem.

The Problem

A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers.

Given a string s, return true if it is a palindrome, or false otherwise.

Example 1:

Input: s = "A man, a plan, a canal: Panama"
Output: true
Explanation: "amanaplanacanalpanama" is a palindrome.

Example 2:

Input: s = "race a car"
Output: false
Explanation: "raceacar" is not a palindrome.

Example 3:

Input: s = " "
Output: true
Explanation: s is an empty string "" after removing non-alphanumeric characters.
Since an empty string reads the same forward and backward, it is a palindrome.

Solution

Alphanumeric characters are the lowercase letters a-z, capital letters A-Z, and integers 0-9.

So, to solve this, we first want to remove all non-alphanumeric characters, including spaces, punctuation, etc., from the input string. Then, we need to check the new string to see if it’s a palindrome. We have two ways we can do this.

Solution #1

For this solution, we create a new string which contains all of the alphanumeric characters from the input string (lowercased). Then, we compare this new string to its reversed version. If they are the same, the function returns true. If not, it returns false.

In order to create the new string, we loop through the characters in the original input string and, if the character is alphanumeric, we append it to the new string.

Finally, we can check if the string (without any special characters or spaces) is a palindrome by using a boolean expression to equate it to its reverse. We can get the reverse of a string by using str[::-1]

def isPalindrome(self, s: str) -> bool:
    newStr = ""
    
    for char in s:
        if char.isalnum():
            newStr += c.lower()
    return newStr == newStr[::-1]

This solution has a time complexity of O(n) because we have to loop through the string to remove non-alphanumeric characters. It also has a space complexity of O(n) because we are creating another string, which could be at most the size of the input string.

Solution #2

For this solution, we will create pointers to the beginning and end of the array which will make sure that the two sides have the same characters in the same order.

First, create two pointers— one which points to the beginning of the string and the other which points to the end. The two pointers will move inwards, checking each character until the reach the middle or overlap with each other.

As the pointers loop through the characters, they will skip any characters that are not alphanumeric. To do this, we use while loops that will continue to run until the character at the left/right index is alphanumeric. We also add a check to make sure that the left/right index is in bounds by checking left < right / right > left

We must make sure to compare the lowercase versions of the characters to each other. If any character at the left pointer does not match the corresponding character at the right pointer, then we know that it’s not a palindrome and can return False. If the entire loop finishes then that must mean the string is a palindrome and we can return True.

def isPalindrome(self, s: str) -> bool:
    left, right = 0, len(s) - 1 
 
    while left < right:
        while left < right and not s[left].isalnum():
            left +=1
        while right > left and not s[right].isalnum():
            right -= 1
        if s[left].lower() != s[right].lower():
            return False 
        left, right = left + 1, right - 1
    return True

The time complexity for this solution is O(n) because you are still looping through the entire string. The space complexity is O(1) because you are not making a new string.