Alternative to Building a Socket.IO Chat App

In this tutorial, we’ll build a real-time, simple chat app without a backend server. ChatEngine and PubNub do not need a Node.js server, unlike Socket.IO chat apps. PubNub takes WebSockets to the next level, so old methods like request-response with a REST API endpoint will not be part of our app architecture.

When you build a real-time application with Socket.IO, you need to spin up and scale your own Node.js server. In the lab, this isn’t hard, but at scale, maintaining and orchestrating this Node.js backend, and ensuring security and reliability, is an immense challenge. So choosing the right frameworks and infrastructure is really important.

Socket.IO Chat vs PubNub Chat

PubNub with ChatEngine is superior to building chat apps with Socket.IO because you don’t have to worry about infrastructure. We do not need Mongo, Express, or a Node.js server. ChatEngine uses PubNub Functions Serverless Environment as a globally distributed back-end. This is deployed by clicking the button in the ChatEngine Activation form below.

While Socket.IO simply creates a WebSocket connection for realtime data streaming between clients, ChatEngine uses PubNub’s Global Data Stream Network and supplemental APIs like Presence for online user management and Access Manager for securing private chat messaging. PubNub is a more robust alternative than Socket.IO for peer-to-peer messaging applications.

Both of these new, futuristic technologies are much better than the old method of hosting your own servers and using HTTP Long Polling as a throughput mechanism for chat message transport.

Configure the ChatEngine Framework

Now it’s time to globally deploy your ChatEngine application. Don’t worry, it’s completely free up to a million messages per month. You can write an HTML, CSS, and JavaScript chat app with the ChatEngine Client SDK.

Hold on to these PubSub keys! They are integral to our Chat application, and we will paste them into the client code in a few minutes.

Simple Chat HTML

Create a new folder for your application on your local machine. We are going to make an index.html file which will be the home web page of our app. Once you have made the index.html web page file, copy this HTML page from my GitHub Gist.

If you take a peek, you will notice the HTML file references a CDN for the ChatEngine JavaScript SDK, and also an app.js file.

Next make an app.js file in your chat app folder. Add the JS code from my GitHub gist.

This is where you need to put your new ChatEngine app keys into the code. See line 47 of app.js.

// Init ChatEngine
const ChatEngine = ChatEngineCore.create({
    publishKey: '_your_pubnub_publish_key_here_',
    subscribeKey: '_your_pubnub_subscribe_key_here_'
}, {
    globalChannel: 'chat-example'
});

Once you save the files, you can boot the app on your local machine. Copy the local file path of your index.html file and paste it into your web browser’s address bar. You should see your chat app’s user interface and global chat room.

Try opening the web page in multiple tabs or windows. You will be able to see the users joining the chat in the side menu. ChatEngine uses PubNub presence to manage user join and leave events. As they are emitted, the front-end JavaScript code manipulates the DOM.

To emit chat messages, we use the ChatEngine emit Method:

ChatEngine.global.emit('message', {
    text: 'Hello! I am a chat message.'
});

User presence events like a user joining and leaving the chat room can be easily configured in JavaScript:

// Add a user to the online list when they connect
ChatEngine.global.on('$.online.*', (payload) => {
    if (payload.user.name === 'Me') {
        return;
    }

    const userId = payload.user.uuid;
    const name = payload.user.state.username;

    const userListDomNode = createUserListItem(userId, name);

    const index = onlineUuids.findIndex(id => id === payload.user.uuid);
    const alreadyInList = index > -1 ? true : false;

    if (!alreadyInList) {
        onlineUuids.push(payload.user.uuid);
    } else {
        return;
    }

    onlineList.appendChild(userListDomNode);
});

// Remove a user from the online list when they disconnect
ChatEngine.global.on('$.offline.*', (payload) => {
    const index = onlineUuids.findIndex((id) => id === payload.user.uuid);
    onlineUuids.splice(index, 1);

    const div = document.getElementById(payload.user.uuid);
    if (div) div.remove();
});

Serving Front-End HTML, CSS, and JS

Like we mentioned earlier, there is no need for any infrastructure in this application. We can host all of our front-end web application assets on GitHub. GitHub Pages allows developers to create websites with a Git repository. If you have not already, sign up for a GitHub account, and create a new GitHub Repository.

Once you have created your repo and installed Git on your local machine, you can commit your code to GitHub. Next, navigate to your repository page in your web browser, and click the settings tab button on the top right.

Next, scroll to the GitHub Pages header, change the source branch to master, and click the save button. This will host your web page on your GitHub account’s website. You can also configure your custom domain with GitHub pages to have your company/project URL point to the website.

Try the Basic Chat App

A live version of this ChatEngine Basic Chat App is hosted on GitHub Pages. All of the code for this project is available in the ChatEngine Basic Chat Github Repository.

Try PubNub Today

Share this on facebookShare this on TwitterShare this on Linkedin