Building a chat – Browser Notifications with React, Websockets and Web-Push 🤯

What is this article about?

We have all encountered chat over the web, that can be Facebook, Instagram, Whatsapp and the list goes on.Just to give a bit of context, you send a message to a person or a group, they see the message and reply back. Simple yet complex.

In the previous article in this series, we talked about Socket.io, how you can send messages between a React app client and a Socket.io server, how to get active users in your web application, and how to add the “User is typing…” feature present in most modern chat applications.

In this final article, we’ll extend the chat application features. You will learn how to keep your users engaged by sending them desktop notifications when they are not online and how you can read and save the messages in a JSON file. However, this is not a secure way of storing messages in a chat application. Feel free to use any database of your choice when building yours.

Novu – the first open-source notification infrastructure

Just a quick background about us. Novu is the first open-source notification infrastructure. We basically help to manage all the product notifications. It can be In-App (the bell icon like you have in Facebook – Websockets), Emails, SMSs and so on.I would be super happy if you could give us a star! And let me also know in the comments ❤️ https://github.com/novuhq/novu

How to send desktop messages to users

Here, I’ll guide you through sending desktop notifications to offline users when they have new chat messages.

In the previous article, we created the ChatFooter component containing a form with an input field and a send button. Since we will be sending a notification immediately after a user sends a message, this is where the desktop notifications functionality will exist.

Follow the steps below:

Update the ChatFooter.js component to contain a function named checkPageStatus that runs after a message is sent to the Socket.io server. The function accepts the username and the user’s message.

import React, {useState} from 'react'

const ChatFooter = ({socket}) => {
    const [message, setMessage] = useState("")
    const handleTyping = () => socket.emit("typing",`${localStorage.getItem("userName")} is typing`)

    const handleSendMessage = (e) => {
        e.preventDefault()
        if(message.trim() && localStorage.getItem("userName")) {
        socket.emit("message", 
            {
            text: message, 
            name: localStorage.getItem("userName"), 
            id: `${socket.id}${Math.random()}`
            }) 
                //Here it is \ud83d\udc47\ud83c\udffb
        checkPageStatus(message, localStorage.getItem("userName")) 
        }}
        setMessage("")
    }

    //Check PageStatus Function
    const checkPageStatus = () => {

    }

  return (
    
        
           setMessage(e.target.value)}
            onKeyDown={handleTyping}
            />
            SEND</button>
        </form>
     </div>
  )
}

export default ChatFooter;

Tidy up the ChatFooter component by moving the checkPageStatus function into a src/utils folder. Create a folder named utils.

cd src
mkdir utils

Create a JavaScript file within the utils folder containing the checkPageStatus function.

cd utils
touch functions.js

Copy the code below into the functions.js file.

export default function checkPageStatus(message, user){

}

Update the ChatFooter component to contain the newly created function from the utils/functions.js file.

import React, {useState} from 'react'
import checkPageStatus from "../utils/functions"
//....Remaining codes

You can now update the function within the functions.js file as done below:

export default function checkPageStatus(message, user) {
    if(!("Notification" in window)) {
      alert("This browser does not support system notifications!")
    } 
    else if(Notification.permission === "granted") {
      sendNotification(message, user)
    }
    else if(Notification.permission !== "denied") {
       Notification.requestPermission((permission)=> {
          if (permission === "granted") {
            sendNotification(message, user)
          }
       })
    }
}

From the code snippet above, the JavaScript Notification API  is used to configure and display notifications to users. It has three properties representing its current state. They are:

• Denied – notifications are not allowed.
• Granted – notifications are allowed.
• Default – The user choice is unknown, so the browser will act as if notifications are disabled. (We are not interested in this)

The first conditional statement (if) checks if the JavaScript Notification API is unavailable on the web browser, then alerts the user that the browser does not support desktop notifications.

The second conditional statement checks if notifications are allowed, then calls the sendNotification function.

The last conditional statement checks if the notifications are not disabled, it then requests the permission status before sending the notifications.

Next, create the sendNotification function referenced in the code snippet above.

//utils/functions.js
function sendNotification(message, user) {

}
export default function checkPageStatus(message, user) {
  .....
}

Update the sendNotification function to display the notification’s content.

/*
title - New message from Open Chat
icon - image URL from Flaticon
body - main content of the notification
*/
function sendNotification(message, user) {
    const notification = new Notification("New message from Open Chat", {
      icon: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
      body: `@${user}: ${message}`
    })
    notification.onclick = ()=> function() {
      window.open("http://localhost:3000/chat")
    }
}

The code snippet above represents the layout of the notification, and when clicked, it redirects the user to http://localhost:3000/chat.

Congratulations!💃🏻 We’ve been able to display desktop notifications to the user when they send a message. In the next section, you’ll learn how to send alerts to offline users.

💡 Offline users are users not currently viewing the webpage or connected to the internet. When they log on to the internet, they will receive notifications.

How to detect if a user is viewing your web page

In this section, you’ll learn how to detect active users on the chat page via the  JavaScript Page visibility API. It allows us to track when a page is minimized, closed, open, and when a user switches to another tab.

Next, let’s use the API to send notifications to offline users.

Update the sendNotification function to send the notification only when users are offline or on another tab.

function sendNotification(message, user) {
    document.onvisibilitychange = ()=> {
      if(document.hidden) {
        const notification = new Notification("New message from Open Chat", {
          icon: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
          body: `@${user}: ${message}`
        })
        notification.onclick = ()=> function() {
          window.open("http://localhost:3000/chat")
        }
      }
    }  
}

From the code snippet above, document.onvisibilitychange detects visibility changes, and document.hidden checks if the user is on another tab or the browser is minimised before sending the notification. You can learn more about the different states here.

Next, update the checkPageStatus function to send notifications to all the users except the sender.

export default function checkPageStatus(message, user) {
  if(user !== localStorage.getItem("userName")) {
    if(!("Notification" in window)) {
      alert("This browser does not support system notifications!")
    } else if(Notification.permission === "granted") {
      sendNotification(message, user)
    }else if(Notification.permission !== "denied") {
       Notification.requestPermission((permission)=> {
          if (permission === "granted") {
            sendNotification(message, user)
          }
       })
    }
  }     
}

Congratulations!🎉You can now send notifications to offline users.

Optional: How to save the messages to a JSON “database” file

In this section, you’ll learn how to save the messages in a JSON file – for simplicity. Feel free to use any real-time database of your choice at this point, and you can continue reading if you are interested in learning how to use a JSON file as a database.

We’ll keep referencing the server/index.js file for the remaining part of this article.

//index.js file
const express = require("express")
const app = express()
const cors = require("cors")
const http = require('http').Server(app);
const PORT = 4000
const socketIO = require('socket.io')(http, {
    cors: {
        origin: "http://localhost:3000"
    }
});

app.use(cors())
let users = []

socketIO.on('connection', (socket) => {
    console.log(`\u26a1: ${socket.id} user just connected!`)  
    socket.on("message", data => {
      console.log(data)
      socketIO.emit("messageResponse", data)
    })

    socket.on("typing", data => (
      socket.broadcast.emit("typingResponse", data)
    ))

    socket.on("newUser", data => {
      users.push(data)
      socketIO.emit("newUserResponse", users)
    })

    socket.on('disconnect', () => {
      console.log('\ud83d\udd25: A user disconnected');
      users = users.filter(user => user.socketID !== socket.id)
      socketIO.emit("newUserResponse", users)
      socket.disconnect()
    });
});

app.get("/api", (req, res) => {
  res.json({message: "Hello"})
});

http.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

Retrieving messages from the JSON file

Navigate into the server folder and create a messages.json file.

cd server
touch messages.json

Add some default messages to the file by copying the code below – an array containing default messages.

{
   "messages":[
      {
         "text":"Hello!",
         "name":"nevodavid",
         "id":"abcd01"
      },
      {
         "text":"Welcome to my chat application!\ud83d\udc83\ud83c\udffb",
         "name":"nevodavid",
         "id":"defg02"
      },
      {
         "text":"You can start chatting!\ud83d\udcf2",
         "name":"nevodavid",
         "id":"hijk03"
      }
   ]
}

Import and read the messages.json file into the server/index.js file by adding the code snippet below to the top of the file.

const fs = require('fs');
//Gets the messages.json file and parse the file into JavaScript object
const rawData = fs.readFileSync('messages.json');
const messagesData = JSON.parse(rawData);

Render the messages via the API route.

//Returns the JSON file
app.get('/api', (req, res) => {
  res.json(messagesData);
});

We can now fetch the messages on the client via the ChatPage component. The default messages are shown to every user when they sign in to the chat application.

import React, { useEffect, useState, useRef} from 'react'
import ChatBar from './ChatBar'
import ChatBody from './ChatBody'
import ChatFooter from './ChatFooter'

const ChatPage = ({socket}) => { 
  const [messages, setMessages] = useState([])
  const [typingStatus, setTypingStatus] = useState("")
  const lastMessageRef = useRef(null);

/**  Previous method via Socket.io */
  // useEffect(()=> {
  //   socket.on("messageResponse", data => setMessages([...messages, data]))
  // }, [socket, messages])

/** Fetching the messages from the API route*/
    useEffect(()=> {
      function fetchMessages() {
        fetch("http://localhost:4000/api")
        .then(response => response.json())
        .then(data => setMessages(data.messages))
      }
      fetchMessages()
  }, [])

 //....remaining code
}

export default ChatPage;

Saving messages to the JSON file

In the previous section, we created a messages.json file containing default messages and displayed the messages to the users.

Here, I’ll walk you through updating the messages.json file automatically after a user sends a message from the chat page.

Update the Socket.io message listener on the server to contain the code below:

socket.on("message", data => {
  messagesData["messages"].push(data)
  const stringData = JSON.stringify(messagesData, null, 2)
  fs.writeFile("messages.json", stringData, (err)=> {
    console.error(err)
  })
  socketIO.emit("messageResponse", data)
})

The code snippet above runs after a user sends a message. It adds the new data to the array in the messages.json file and rewrites it to contain the latest update.

Head back to the chat page, send a message, then reload the browser. Your message will be displayed. Open the messages.json file to view the updated file with the new entry.

Conclusion

In this article, you’ve learnt how to send desktop notifications to users, detect if a user is currently active on your page, and read and update a JSON file. These features can be used in different cases when building various applications.

This project is a demo of what you can build with Socket.io; you can improve this application by adding authentication and connecting any database that supports real-time communication.

The source code for this tutorial is available here:https://github.com/novuhq/blog/tree/main/build-a-chat-app-part-two

Thank you for reading!