WhatsApp is one of the most popular free global communication services which provides text messages, voice and video calls, media and location sharing. By completing this tutorial, you will be able to build a Real-time Messaging App with Altogic & React

Introduction

In this article, we will learn how to make a simple real-time messaging application that we built by integrating the basic features of WhatsApp with Altogic and React.

You can check out the demo

What is the Real-time?

Real-time or otherwise known as RTC is a communication protocol that allows us to nearly simultaneously exchange information from sender to receiver with negligible latency.

Creating an Altogic App

Of course we’ll use Altogic for the backend 😉 , so let’s visit the Altogic Designer and create an account if you haven’t already.

After logging into the dashboard, we need to create a new application by clicking the ‘+ New app’ button at the top right.

In the modal that opens, you need to enter the name you want to give to your application and click the next button to go to the next step, and select the required fields according to yourself.

There is an important part in the last step, which is a template selection for our application. We’ll use Altogic's NPM(Node Package Manager) library on the Frontend. Therefore we need to choose the template named Basic and click the ‘Create’ button that’s all. Our app is ready to build now

To open our application in designer, we need to click on it.

Creating Database Models

To create database models, we first need to go to the page with model settings.

By default, Altogic gives us the users model automatically for authentication.

Only the users model is not enough for us for now, so we will create a few models ourselves and the names of these models are as follows

• Groups
• Messages
• GroupParticipants
• Friends
• FriendNotifications
• Invites
• Notifications (this model for informations for the users)

Let’s try to create our first model by clicking the ‘+ New’ button at the top right and selecting the first option.

Now we are faced with a screen that asks us to enter our model information. Enter the information and click the ‘Next’ button then click ‘Create’ button 🙃

Now we have to press the '+ New field' button to add the required fields for our model. And a modal will open where we will enter the field details by selecting the required type from the drop-down list.

After entering the field information, we need to click the 'Create' button to create our field.

I’ll create the remaining models and fields without sharing screenshots but I’ll share a single screenshot of their final state.

Let’s switch to Frontend 😎

Before switching to the Frontend, I would like to say that I won't talk about the whole Frontend in this part, but at the end of the article, I will share the full source code with you.

As I said a few lines above, we will use React in this project, so first we need to create a project with create-react-app, but I will skip these parts because our focus is not React.

Installing Altogic’s NPM library

To use Altogic's JavaScript package, all you have to do is install the package first, write the code below in our terminal and run it.

npm install altogic

For more information about the Altogic client library, you can check out its documentation.

After creating a folder called libs in the src folder of our project, we need to create a JavaScript file inside it to create an Altogic Client instance. You can see the codes below.

/src/libs/altogic.js

import { createClient } from "altogic";

const ENV_URL = ""; // replace with your env url
const CLIENT_KEY = ""; // replace with your client key
const API_KEY = ""; // replace with your api key

const altogic = createClient(ENV_URL, CLIENT_KEY, {
  apiKey: API_KEY,
});

export default altogic;

We are ready to use all the features of Altogic now. Then let's create some components to send messages and list incoming messages.

src/components/MessageInput.js

import { useRef } from "react";
import altogic from "../libs/altogic";

export default function MessageInput({ channel }) {
  const inputRef = useRef(null);

  const submitHandler = (e) => {
    e.preventDefault();
    const data = {
      isRead: false,
      group: channel,
      sender: "some-user-id",
      content: inputRef.current.value.trim(),
    };
    altogic.realtime.send(channel, "message", data);
    saveMessageToDB(data);
    inputRef.current.value = "";
  };

  const saveMessageToDB = async (data) => {
    await altogic.db.model("messages").create(data);
  };

  return (
    <form onSubmit={submitHandler}>
      <input ref={inputRef} type="text" required />
      <button type="submit">Send Message</button>
    </form>
  );
}

src/components/ShowMessages.js

import { useEffect, useState } from "react";
import altogic from "../libs/altogic";

export default function ShowMessages() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const messageHandler = (payload) => {
      console.log(payload);
      setMessages((messages) => [...messages, payload.message]);
    };
    altogic.realtime.on("message", messageHandler);
    return () => {
      altogic.realtime.off("message", messageHandler);
    };
  }, []);

  return (
    <section>
      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
    </section>
  );
}

Let's use the components we created in App.js

src/App.js

import { useEffect } from "react";
import altogic from "./libs/altogic";
import ShowMessages from "./components/ShowMessages";
import MessageInput from "./components/MessageInput";

const channel = "chat"; // channel to broadcast

export default function App() {
  useEffect(() => {
    // Joining to channel
    altogic.realtime.join(channel);
  }, []);

  return (
    <div>
      <ShowMessages />
      <MessageInput channel={channel} />
    </div>
  );
}

The code samples I have given are for you to learn about how the Altogic Realtime service is used, and I tried to keep it as simple as possible, our real WhatsApp clone uses them in a more advanced way. Please do not forget to visit our repo.

Conclusion

In short, sending messages to recipients and receiving messages from senders is that easy with Altogic 🚀💪🏽

Here you can access live demo and source code of the realtime messaging app.

If you have any questions about realtime features or want to share what you have built, please post a message in our community forum or discord channel.