DEV Community: Haris Ahmad

How to broadcast live data on your application?

Haris Ahmad — Sun, 16 Apr 2023 22:14:41 +0000

You just bought a new home and you go in the basement. You are shocked to see that it is filled up to the ceiling with a lot of things. Guess what, the previous home owner was a hoarder. He left without cleaning and now you have to deal with his unwanted toasters, buckets, mattresses and his old nasty smelling shoes.

But you have an advantage. You are a Software Developer. You can make an Auction website and auction all of this stuff to earn money. May be not those smelly shoes. They need to go to garbage or personally get thrown through the window of the previous home owner's current home 😮‍💨.

Now, you get to the drawing board and you figured that an Auction would require the following things.

A Frontend Client, to display the data (Bids)
A Backend Server, to store the data
A flow of data from Server to Client when the data changes (Auction Bids change)

First Attempt

Coming from a background where you have a day job of creating NodeJS, React apps, for this application you also create a NodeJS REST API and a React Frontend application. This setting is a Client/Server architecture in which Client (ReactJS app) will always request for data to the Server (NodeJS API) but never the otherwise.

The first two items in the above list are marked done. Now you start to work on the 3rd item: How the data flow will happen?

Since it is a Client/Server architecture to update the data on clients, clients have to request the data every time they want to update the data (Show next bids).

The solution you adopt is, having an infinite loop on the client, constantly checking server for the data change every 1 second. If there is a change the clients will pull the new data. (Client oriented broadcast).

On launch date 10,000 bidders show up on your website. You are happy to see the $$$ amount going up and imagining yourself driving your brand new Lamborghini when the reality hits. The server went down. Wait...What happened??

Your website went down because the server was overloaded with the amount of requests it has to serve for 10,000 clients. Every client is requesting new data every second, which means your server is getting 10,000 HTTP requests in one second, 60,000 in one minute. Poor server.

You pray to God that somehow he gives you a solution and God sends this Article to you. (Or let you find it of the internet).

Second Attempt

In this attempt, we do things a little differently. We figure out what are the bottlenecks.

Too many requests to the server
Too frequent requests to the server

In-Person vs Online Auction

If we take an example of a real life, in-person auction, we can find some similarities. Host of the auction act as a server where the people sitting there bidding, act as clients. But notice an important thing about the broadcast. In in-person auction, the information is flowing from the host of the auction to the bidders via voice. It makes more sense for the host to shout out the bids, rather than each bidder whispering the host to ask what is the current bid on this product. Host shouting saves a lot of time and a lot of effort while the bidders keeps synced with the auction.

We will use the same pattern here. If we shift the responsibility of broadcast to the Server, Clients do not have to request the information every second. Server should know when the data is changed and on this data change, it should send the new data to all the clients. Clients should just receive this data and display it.

Is HTTP good for the Broadcast?

Using HTTP (as we do in REST API), it is not possible because HTTP communication starts from client by placing an HTTP request on the server.

We have to use a different protocol for this problem, which allows communication to be originated from the server. 'Web Sockets' come to our rescue

Since I am a developer, it is my utmost duty to use ChatGPT for it's definition. According to ChatGPT:

WebSockets are a protocol for bi-directional, real-time communication between web browsers and servers over a single, long-lived connection.

We setup a Web Socket server. Like ExpressJS on NodeJS we have a very amazing package for it called Socket.IO.

Implementing Web Sockets in our App

Every time a client is connected to the Socket server it assigns the connection an ID using which we can interact with the connection for sending and receiving the data.

Each time the server detects a change in the data, server should engage all the client connections and send the new data to these client (Broadcasting).

One design pattern we can use for this application could be Publish/Subscribe pattern. In this pattern the clients gets subscribed to a stream of data and whenever there is a new data, server pushes the data to the subscribed clients.

A simple implementation of this approach would be to create an array to keep track of active connections. Whenever a new client appears we add the connection to the client to this array. If the client closes the connection, we remove that connection from the array.

Whenever there is a new data available, we can iterate through this array and one-by-one push the data on the iterated connection. A pseudo code implementation would be something like this:

connections[] = []

Function onNewConnection(connection){
    connections.push(connection)
}

Function onConnectionRemoved(connection){
    connections.delete(connection)
}

Function onDataChange(newData){
    for(connection in connections){
        connection.send(newData)
    }    
}

The next day you implement this fix and you run the auction and following things happen

Now the number of requests are significantly reduced because the new data is not requested every second. It will be requested only when the data changes (New bids appear).
The auction is also perfectly synced because there is no delay between the point where auction updates and the point where auction data is broadcasted.

The auction ends and at the end of the day, you have One Million Dollars in the bank. You can now have a Lamborghini and you should thank me for that.

So overall, it is a good idea for a broadcasting service to make the data keeper be the responsible for data broadcasting, rather than the consumer of the broadcast should have to request the data. One way to do it is Socket based communication.

Connect

Blog👉 https://hariscodes.com/
Twitter👉 https://twitter.com/tweetharisahmad
Instagram👉 https://www.instagram.com/hariscodes/

Simplest way to monitor visits on your website (No Purchase, No Sign Up)

Haris Ahmad — Sun, 07 Aug 2022 21:03:54 +0000

Yes, you don't have to purchase an Analytics Service or sign up to some sketchy application just to know simple thing like how many visits did your site has. Just with a few lines of code you can easily find out the overall visit count of your website.

2 Steps to install this service

Step 1: Add the following JavaScript to your Website ⚙️

Add the following code to your website where it is called every time a user visits (Could be your homepage). Replace [YOUR WEBSITE NAME] to your Website name or any other uniquely identifiable string

window.onload = function (){
    fetch('https://api.countapi.xyz/hit/[YOUR WEBSITE NAME]/visits')
}

Step 2: View the Page Visits 🕵

To get the page view you can visit the following endpoint

https://api.countapi.xyz/get/[YOUR WEBSITE NAME]/visits

Wait✋! but it might not be end for you

The example that I have provided is the bare minimum setup you need to do to monitor the visits. You might want to monitor the visits on each page of your site separately or want to have rather complex analytics. Thanks to CountAPI which gives us this tooling for free. For more complex 'Visit Analytics', please go ahead and read the docs from CountAPI

Liked the solution?

If you liked the post you can read more from me. For more please follow me on my social media handles provided below

Blog👉 https://hariscodes.com/
Twitter👉 https://twitter.com/tweetharisahmad
Instagram👉 https://www.instagram.com/hariscodes/

How to create Nested Tabs Layout with Routing in NextJS?

Haris Ahmad — Tue, 04 May 2021 23:03:04 +0000

The pain 😳

"I will not repeat myself". This is what I vowed to me this morning and every morning and here I am copying and pasting the same code for the dashboard tabs to all my pages. What a shame. It might be because I could not find if NextJS allows you to have layout in dynamic routing without touching _app.js and the ways I found to do it were a little hacky. From time to time, we developers have to remind ourselves that God has created us for a purpose higher than Ctrl+C & Ctrl+V and still ending up getting an error and cursing the stack-overflow AnonymusUser034 because pasting his code in my code-base has caused an error at line 983 of file i_have_no_idea.jpg. At that point we need to realize that we have to turn to our original job, which is to be creative. Well, enough pain inflicted, let us dive right into the solution. Although you might still Ctrl+C from here.

The Antidote 💉

The solution in one line

We are going to use dynamic routes query and useRouter hook to map the route paths with the ReactJS components. Didn't make sense? I thought so. It is because you can't put an elephant in a cookie-jar without killing it. So lets not kill our work-ethic and do some hard work.

The solution in more lines

In the following the steps we are going to follow are listed:

Create a Dynamic Route
Create the routes for the components (Tabs definition)
Find the component that is matching the route
Render the component
Create Navigation UI Elements

1.Create a Dynamic Route

Creating a dynamic route is fairly simple. You just have to create a .js file in pages directory with the filename inside []. An example would be [route].js. If this does not make sense to you, either you are at the wrong article or NextJS is as much alien to you as aliens are to us. You can visit Next JS Docs if you want to learn more about NextJS. Our file-tree should look like this

src
 |_pages
  |_[route].js

2.Create the routes for the components

To represent the routes, we are going to use simple Javascript objects. We will put all the objects inside an array so we can map them later. So our [route].js would look something like this (which is wrapped inside at React component "NavBar").

const NavBar = ()=>{
  const routes = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

}

slug: The part of URL at which you want to display your component. Like users in myamazingsite.com/users is a slug.
label: The Label you want to display on a menu item which will represent this component.
component: The React Component that will be rendered for this path.

3. Find the component that is matching the route

Now we will find one of the components inside the routes array which matches the requested path. For example if someone enters localhost:3000/members we will find in the routes array an item that has slug: 'members'. For this purpose, we have to know what user has requested in the URL

useRouter

We will use useRouter hook from next/router module which will allow us to see what URL is there in the address bar. To get the URL we will:

import {useRouter} from 'next/router'

const NavBar = ()=>{
  const components = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

  // -->
  const router = useRouter()
  currentPath = router.query.route
}

router.query.route: router.query will give us an object that contains all the route's paths requested. The end part .route corresponds to the file name [route].js.It would store in itself the requested path. if the path is localhost:3000/members, router.query.route will return string 'members'. The filename kind of acts like a variable. If you had filename as [dummy].js Then you would request router.query.dummy

Finding the component

To find the object in routes array which have a slug matching the currentPath, I spare you with your fancy algorithms to iterate over the array, but I am going to use a simple approach. I am going to use Array.find() function.

import {useRouter} from 'next/router'

const NavBar = ()=>{
  const routes = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

  const router = useRouter()
  currentPath = router.query.route

  // -->
  const findSlugMatchingCmp = ()=>components.find((cmp =>{
        return cmp.slug === currentPath
    } 
  )

  useEffect(()=>{
    const foundComponent = findSlugMatchingCmp()
  }, [router])
}

I am using useEffect hook because getting a route using useRouter hook is asynchronous operation. As you can see in the dependency array of useEffect we depend on the change in useRouter

What if user is naughty and he enters `localhost:3000/hehe` path which doesn't exist?

We will redirect him

import {useRouter} from 'next/router'

const NavBar = ()=>{
  const routes = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

  const router = useRouter()
  currentPath = router.query.route

  const findSlugMatchingCmp = ()=>components.find((cmp =>{
        return cmp.slug === currentPath
    } 
  )

  useEffect(()=>{
    const foundComponent = findSlugMatchingCmp()

    // -->
    if(currentPath && !foundComponent)
        router.push('/404')
  }, [router])
}

4. Render the component

Now that we know what component matches with the slug, we will go ahead and return it for rendering

import {useRouter} from 'next/router'

const NavBar = ()=>{
  const routes = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

  const router = useRouter()
  currentPath = router.query.route

  const findSlugMatchingCmp = ()=>components.find((cmp =>{
        return cmp.slug === router.query.route
    } 
  )

  useEffect(()=>{
    const foundComponent = findSlugMatchingCmp()

    if(currentPath && !foundComponent)
        router.push('/404')
  }, [router])

  // -->
  const cmp = findSlugMatchingCmp().component

  return (
    <div>
      {cmp}
    </div>
  )
}

5. Create Navigation UI Elements

I will leave it upto you if you either want Tabs, SideMenu, Navigation bar, or whatever navigation component you want to implement. For the demo I am going to use NextJS Link component because it is relatively simple. We just have to redirect user to the correct path when user click on an element from our UI navigation. e.g

import {useRouter} from 'next/router'

const NavBar = ()=>{
  const routes = [
    {
      slug: 'members',  
      label:'Organization Members', 
      component: <MemberTable />
    },
    {
      slug: 'drivers-search', 
      label:'Driver Pre-Screen', 
      component: <DriversSearch />
    }
  ]

  const router = useRouter()
  currentPath = router.query.route

  const findSlugMatchingCmp = ()=>components.find((cmp =>{
        return cmp.slug === router.query.route
    } 
  )

  useEffect(()=>{
    const foundComponent = findSlugMatchingCmp()

    if(currentPath && !foundComponent)
        router.push('/404')
  }, [router])

  const cmp = findSlugMatchingCmp().component

  return (
    <div>
      // -->
      <div>
        {routes.map(route=>(
          <Link href={route.slug}>{route.label}</Link>
        ))}
      </div>
      {cmp}
    </div>
  )
}

Conclusion

We have created a nested next route with layout by using dynamic routes query and useRouter hook to map the route paths with the ReactJS components.