Forem: Sindbad_X

Built My First CLI Tool in Go

Sindbad_X — Sat, 23 Nov 2024 11:38:00 +0000

Mechvibes, an open-source GUI program for simulating mechanical keyboard sound, is a program I've been using for the last 3-4 years. But since I switched to Linux, it stopped working(Wayland security issue). The program is essentially listens to keyboard inputs and plays keyboard sound on each key press. Moreover, MechVibes is built with Electron.js, so it's memory intensive(150 MB). The CLI I built only has a memory footprint of around 6 MB.

That said, I'm quite new to Go, as well as the Linux (and CLI tool) world. Since I switched from Windows to Linux, I find myself trying to accomplish a lot of things with the terminal. That also led me to try out NeoVim, which blew my mind and changed the way I look at terminals.

Do you know GoVibes is 100% developed using NeoVim?🤷‍♂️

While Go is known for its simplicity like C, coming from the Javascript/Frontend world, I struggled with it. I think mainly for two reasons: firstly, I don't truly know programming(I only know framework(React) and for the last 2 years, I've been writing memorized boilerplate code.); secondly, Go is my second language and web/js development have made me inflexible at picking new languages. So learning Go was like a paradigm shift for me, which exposed a lot of my insufficiencies and skill issues. And that's clearly apparent if you check out the codebase of GoVibes.

I’m referring to this as a CLI tool, even though it doesn’t fully meet standard CLI tool criteria. It's Linux-only(tested in Fedora, and my friend's machine, who uses Arch btw!), and requires manual compilation. On top of that, the code is awful.

There's a similar CLI tool written in Rust, called Rustyvibes. I tried it and because of the Wayland security issue, it failed on my Fedora Linux. Also, I had to kill the CLI program if I wanted to change the keyboard sound flavour. Coming from the frontend world, I'm biased toward pretty UIs, and I wanted the same experience in my CLI tool. So, to precisely highlight those issues, I build GoVibes.

The core of the program is simple. There's a continuous loop that's running in a separate channel, and it listens for the incoming keyboard input event. Based on the input event, the program plays a section from the audio file. What part to play, is defined in a separate config.json file. Now there can be multiple input devices in your system. So, the program also lists all the available input devices and you can choose what channel it should listen to. What I found interesting was, as I'm new to Linux, treating devices as files like objects. And, so all I had to do to mount a device was to open it as a directory.

file, err := os.Open("/dev/input/event2")

Most of the development time went into making GoVibes interactive and look pretty. Perhaps, that effort could have been better spent on making it cross-platform and functional, but again, I'm its sole user, so it doesn't matter. Anyway, I found BubbleTea, a library for building interactive CLI(TUI) tools in Golang. The library surely had a learning curve. It took me a week to wrap my head around how all things tie together. There are also a lot of prebuilt components(Bubbles) which makes it super easy to build a pretty, user-friendly TUI.

Overall, it was a good learning experience.

For the first time, I built something other than a CRUD.
This time around, I actually learned some Go(file handling, go routine, channels, context, WaitGroups),
Got a confidence boost exploring new things. Figuring out bubble tea felt foreign and overwhelming, but once it clicked, I envisioned my portrait in the Hall of Great Programmers.

On Learning Vim

Sindbad_X — Sat, 26 Oct 2024 18:38:42 +0000

A year ago (I still do), I would get so amazed and overwhelmed watching ThePrimeagen navigate the Vim editor. I wanted to do it as well. But I was too afraid to try it out and thought I wasn’t that smart, and it was too much work to learn something that wasn’t directly adding any value to my programming knowledge. But at the same time, I wasn’t happy with my current VS Code experience, which kept crashing on my machine since I switched to Linux from Windows 11. A few months ago, I said, eff that to my fear. At least I’ll try and see what is this crap that allows Prime’s cursor to move with lightning speed.

Jumping straight into Vim felt notoriously dangerous, so I installed the Vim emulator extension in VS Code.The first two weeks were frustrating and negatively affected the task I was working on. So, after 10-15 minutes of stupidly trying to mimic the daddy Prime, I’d disable the extension and code the old way. Every day for the next two to three weeks, I’d go through this initial ritual where I felt like a total moron for a straight 15 minutes, and then continue my day-to-day programming voyage with Ctrl, arrows, and mouse.

By the end of the third week—I don’t know when or how—but I suddenly found myself being "ONE" with Vim keybindings. The 15-minute ritual expanded a bit longer, and only when I hit a roadblock (for instance, not knowing how to search and replace text) would I find myself needing to revert. But otherwise, I could place my cursor exactly where my eyes wanted it to be with Vim keybindings without thinking or calculating. It felt like this was the right way to navigate the text. I wanted to use it everywhere.

I found this particular written series to be very helpful in explaining all the terminology I needed to know. There are also a few interesting talks from Vim cult members to make you believe that Vim is a real thing, and it’s worth beating your head around.

Mastering the Vim Language

How to Do 90% of What Plugins Do (With Just Vim)

It’s been more than a month since I started learning Vim. I don’t feel fully confident yet doing development work there, which unfortunately still is React Frontend JS/TS Node. But I’ve set up Neovim (obviously), and I use it for a personal project(Go cli tool) I’m working on these days (I’m unemployed, by the way—so full time on a personal project, so full time on Neovim these days). And I guess configuring Frontend with NeoVim will be an awful experience, so I’ll avoid it totally.

I made a big mistake by blindly installing something called nvchad. It felt like I was back in VSCode, but with a broken experience. The fonts were off, spacing and icons weren’t aligned properly, and overall, it was glitchy. It also felt like magic, which is exactly what I want to avoid.

I’m not interested in ricing Neovim by adding cute icons, customizing fonts, or turning it into a full IDE. My goal is to keep things simple and lightweight, avoid unnecessary configuration, and stick to the core of Vim.

I came across this minimal configuration: kickstart.nvim from Neovim cult member TJ, who’s one of the most referenced figures for setting up Neovim—so it’s worth checking out his work.

The Kickstart config has just enough complexity for me. The config file (init.lua) is well-documented, so I know exactly what each setting does. Great! It also came with a plugin called Telescope, which makes it easier to jump between buffers, search files, change color schemes, and more. (Using Telescope does mean straying a bit from my default-Vim philosophy, but the plugin is so intuitive it feels like a built-in feature, so I'll keep it.)

For file navigation, the builtin explorer, Netrw is good enough. Here's nice cheat-sheet I found. My eyes are too used to the one dark theme from working in VSCode, so I added that for familiarity's sake. For now, my goal is to get efficient with the defaults and avoid extra bloat as much as possible.

From what I understand, learning Vim involves two parts: 1. Vim motions and 2. Configuration, which in itself can take some time. Most people and resources, as I've seen, spend too much time configuring things rather than using the actual editor and trying to get better at it. So, right now, my focus is on Vim motions, because this skill is portable (heck! Even note-taking apps like Obsidian have Vim keybindings). It’s editor-agnostic and makes editing much more enjoyable.

So, where I'm after a month of learning vim?:

I know how to quit Vim.
Moved past hjkl basics: I now intuitively use commands like $, 0, ^, gg, G, f(x), F(x), Ctrl + e, and Ctrl + u.
Switching modes: I switch back to insert mode with i, a, o, and O.
Text editing commands: Edit, replace, and change the case of text with gu, gU, r[x], and ciw.
Visual mode: Using visual mode to mark text (e.g., vap, vG, v{).
Basic search and replace: Searching and replacing patterns (/pattern, %s/old/new/g).
Copy, paste, delete: Commands like yy, dd, p, yaw, yap, and daw.
Using registers: Copying to and pasting from specific registers (e.g., "ayy, "ap).
File management with Netrw: Creating and navigating files.

My fingers have learned these 30-40 keybindings, so now I don't spend an ounce of energy thinking about moving around while writing code, compared to a month ago. What's more amazing is that I didn't try to memorize any of the keybindings (only 5-10), and the rest came intuitively. Now that I'm already comfortable, these days I randomly scan through this cheat sheet and find myself saying, "Oh! That's how you do it."

Overall, learning Vim has been a good experience so far. It’s a pain in the a**s at first—I even dreamed about typing the wrong Vim motion once and woke up with the most violent cramp in my lower leg. I guess it will get better.

Building a Real-Time Location Sharing App with React, Socket.io, and Leaflet

Sindbad_X — Mon, 02 Oct 2023 13:28:25 +0000

There are a lot of tutorials on building Chat App with react and socket io. While building a Chat App is a cool way to explore real-time applications, I wanted to be a bit more creative. So, I came up with the idea of creating a location sharing app. Plus, I needed a project for my empty resume that may compensate for my lack of experience.

So, here we go.

LocShare: a real time location sharing app that allows you to share your location to multiple users.

You will also get notified when someone joins or leaves the room and the current number of connected users.

As soon as you stop sharing the location, the room will get destroyed, and the connected users won’t be able to see your location any more.

This is a location sharing app, which means in order to test this application you have to walk/run/drive miles. Hopefully not. Because browsers provides a way to manipulate your coordinates without you having to leave your couch.

Navigate to the more tools and find the sensor option. From there, you can manipulate your current coordinates.

You can try out this app from here. The backend is hosted on render’s free tier, so it will take some time for the first connection and sometime it's even not available for few hours.

If you're coding along, you might find it a bit challenging. My emphasis is on the crucial bits of code, the logical flow, and the structure of this app. I encourage you to visit the GitHub repository for the complete code.

Setting up the project

In the frontend, I've configured my React app with Vite, TypeScript, and Tailwind CSS. To map our coordinates on a map, we'll use a well-known open-source library named Leaflet.

I've recently begun using TypeScript and applied it in this project. However, it's important to note that TypeScript is optional if you're coding along.

Here are the dependencies of frontend:

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/leaflet": "^1.9.6",
    "@types/react-leaflet": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0",
    "react-leaflet": "^4.2.1",
    "react-router-dom": "^6.16.0",
    "react-toastify": "^9.1.3",
    "socket.io-client": "^4.7.2"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

For the backend, we have a basic node-express server with the following dependencies.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "socket.io": "^4.7.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "concurrently": "^8.2.0",
    "nodemon": "^3.0.1",
    "typescript": "^5.2.2"
  }
}

Folder Structure

React App:

📁 src
├── 📁 components
│   ├── 📁 Element
│   │   ├── 📄 Header
│   │   ├── 📄 Map
│   │   ├── 📄 Status
│   │   ├── 📄 StatusPanel
│   ├── 📁 Layout
├── 📁 context
│   ├── 📄 socket.tsx
├── 📁 pages
│   ├── 📄 Home.tsx
│   ├── 📄 Location.tsx
├── 📁 types
├── 📄 App.tsx
├── 📄 main.tsx
├── 📄 index.css
...rest

Node server:

📁 src
├── 📄 index.ts

Create Socket Context

By storing socket in context, we can make it globally available to rest of our app. The connectSocket function handles the connection. If socket is null(no existing connection), it establishes a new socket connection. If socket is not null(disconnected), it connects to socket.

// SocketProvider.js
import {useState, createContext, useContext, JSX} from 'react'
import {io, Socket} from 'socket.io-client'
import { SOCKET_URL } from '../config'

type SocketContextType = {
  socket: Socket | null;
  connectSocket: () => void;
}

type SocketProviderProps = {
  children: JSX.Element
}

export const SocketContext = createContext<SocketContextType | null>(null)

export const SocketProvider = ({children}: SocketProviderProps) => {
  const [socket, setSocket] = useState<Socket | null>(null)

  const connectSocket = () => {
    if(!socket) {
      const newSocket: Socket = io(SOCKET_URL)
      setSocket(newSocket)
      return
    }
    socket.connect()
  }

  return (
    <SocketContext.Provider value={{socket, connectSocket}}>
      {children}
    </SocketContext.Provider>
  )
}

export const useSocket = () => {
  const context = useContext(SocketContext)
  if(!context) {
    throw new Error('Something went wrong!')
  }
  return context
}

Here, I've made things easier by adding a custom hook called useSocket, which handles the logic of accessing SocketContext along with SocketProvider. This approach simplifies the code, making it easier to read and understand when working with context values in your components.

Wrapping app with socket context

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { SocketProvider } from './context/socket.tsx'
import {ToastContainer} from 'react-toastify'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <SocketProvider>
      <>
        <App />
        <ToastContainer newestOnTop/>
      </>
    </SocketProvider>
  </React.StrictMode>,
)

App Routes

Here, we have our two pages: home and location. From homepage, we can create room and channel our location. The Location page is displayed when the URL matches the pattern /location/1242, indicating that 1242 is a specific room ID or parameter.

These pages are wrapped in a layout component.

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'
import Home from './pages/Home'
import Location from './pages/Location'

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="location/:roomId" element={<Location />}/>
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

Layout Component

import { Outlet } from 'react-router-dom'
import Header from '../Elements/Header'

function index() {
  return (
    <div className='flex justify-center px-3 py-2'>
      <div className='flex flex-col w-full md:min-w-full xl:min-w-[1100px] xl:max-w-[1200px] mb-4'>
        <Header />
        <main>
          <Outlet />
        </main>
      </div>
    </div>
  )
}

export default index

Access User Location

To get the current location of the user, we can use the geolocation interface provided by the browser to obtain the current position. This will open a popup, asking user the location permission.

// get the current position
navigator.geolocation.getCurrentPosition(success, error, options)

success, error(optional), options(optional) are the callback function that are being passed, and through them, we can access the the coordinates or error or pass additional parameters. You can check out the mozilla doc for more.

We don't just need the current position; we also want to track the user's movement from point A to B

We can have a setInterval function that repeatedly calls getCurrentPosition(). That’s not required here, because geolocation interface provide an another method called watchPosition(). And this method is called each time the position changes.

// watch the current position
let id = navigator.geolocation.watchPosition(success, error, options)

// clear the resource
navigator.geolocation.clearWatch(id)

This watchPosition method is like setTimeout or setInterval, a part of browser features, that runs asynchronously in the background and monitor the user’s current position. By storing it in a variable, we are keeping a reference. So later when we no longer want to track the user location, we will clear the variable or set it null. If we don’t do that, it will keep running in the background and that can lead to memory issues and unnecessary resource consumption.

type GeolocationPosition = {
  lat: number
  lng: number
}
type LocationStatus = 'accessed' | 'denied' | 'unknown' | 'error'

export default function Home() {
  const [locationStatus, setLocationStatus] = useState<LocationStatus>('unknown')
  const [position, setPosition] = useState<GeolocationPosition | null>(null)

  useEffect(() => {
    let watchId: number | null = null
        // check for geolocation support in browser
    if('geolocation' in navigator) {
      watchId = navigator.geolocation.watchPosition((position) => {
      setPosition({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      })
      setLocationStatus('accessed')
      }, (error) => {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            setLocationStatus('denied')
            break
          case error.POSITION_UNAVAILABLE:
            setLocationStatus('unknown')
            break
          case error.TIMEOUT:
            setLocationStatus('error')
            break
          default:
            setLocationStatus('error')
            break
        }
      })
      return () => {
        if(watchId) {
          navigator.geolocation.clearWatch(watchId)
        }
      }
    }
  }, [])
...
...

When the page is loaded, the location prompt appears and ask for location permission. Based on that it handles whether user have allowed location permission or not. Once location is allowed, we have access to the position object that contains the coordinates of user.

With the error code provided by geolocation, we can nicely handle the error and know exactly why user can’t access location.

Locate coordinates on map

Once we have the user’s coordinates, we can pass them into our Map component and the location will shown in the map.

We want the map marker to automatically move to the passed coordinates. In our Location Marker component, we put the map.flyTo method, provided by the leaflet instance, inside the useEffect hook with position as the dependency. Whenever, location change, the marker will fly there.

import { useState, useEffect } from 'react'
import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet'
import { GeolocationPosition } from '../../../types' 
import 'leaflet/dist/leaflet.css'

function Map({ location }: { location: GeolocationPosition }) {
  if (!location) return 'No location found'

  return (
    <div className='w-full bg-gray-100 h-[600px] md:h-[550px]'>
      <MapContainer center={[location.lat, location.lng]} zoom={30} scrollWheelZoom={true} className='h-screen'>
        <TileLayer
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' // OpenStreetMap tile layer URL
        />
        <LocationMarker location={location} />
      </MapContainer>
    </div>
  )
}

function LocationMarker({ location }: { location: GeolocationPosition }) {

  const map = useMapEvents({})  // Use map events to access the Leaflet map instance
  const [position, setPosition] = useState({
    lat: location.lat,
    lng: location.lng
  })

  // Effect to update marker position and fly to the new location when location data changes
  useEffect(() => {
    setPosition({
      lat: location.lat,
      lng: location.lng
    })
    map.flyTo([location.lat, location.lng]) // Fly to the new location on the map
  }, [location])

  return position === null ? null : (
    <Marker position={position}>
      <Popup>User is here!</Popup>
    </Marker>
  )
}

export default Map

Now, we can use this component in our homepage.

export default function Home() {
  const [locationStatus, setLocationStatus] = useState<LocationStatus>('unknown')
  const [position, setPosition] = useState<GeolocationPosition | null>(null)

    // ... rest

return(
<>  
{/** ...rest **/}
                {
            position && (<Map location={position}/>)
        }
</>
)

Setup node-express socket server

In this code, we've set up a simple HTTP server using Node.js and Express. Then, we've created a Socket.io server instance (io) and passed our Express server to it. Even though, HTTP and Web Sockets are different communication protocols, socket io enables both the HTTP server and the WebSocket server to share the same server instance, allowing them to communicate over the same network port.

import express, { Express, Request, Response } from 'express'
import {Socket, Server} from 'socket.io'
import cors from 'cors'
import dotenv from 'dotenv'

dotenv.config()

const app: Express = express()
const port = process.env.PORT || 5000

app.use(cors())
app.use(express.json())

app.get('/', (req: Request, res: Response) => {
  res.send('Welcome to LocShare!')
})


const server = app.listen(port, () => {
  console.log(`Server is running`)
})

const io: Server = new Server(server, {
  cors: {
    origin: '*',
  },
})

io.on('connection', (socket: Socket) => {
  console.log(`User connected: ${socket.id}`)
})

When a user share location, we are essentially going to create the room.

A room is an arbitrary channel that sockets can join and leave. It can be used to broadcast events to a subset of clients. read more

This room will have a unique id. Once the room is created, we’ll send the roomId in response to the user.

Here’s the flow

user share location: emit create room event
server receive the event
1. generate room id
2. join the room
3. attach room id to current socket client
4. emit room created event and roomid
5. store room creator

💡I’m extending my Socket and attaching an additional property to the socket called roomId. Later we’ll use this when user left the room.

// Define a custom interface extending the Socket interface
interface CustomSocket extends Socket {
  roomId?: string
}
const roomCreator = new Map<string, string>() // roomid => socketid

io.on('connection', (socket: CustomSocket) => {
  console.log(`User connected: ${socket.id}`)

  socket.on('createRoom', (data) => {
    const roomId = Math.random().toString(36).substring(2, 7)
    socket.join(roomId) // joining room in sockets
        socket.roomId = roomId //  attach roomId to socket
    const totalRoomUsers = io.sockets.adapter.rooms.get(roomId)
    socket.emit('roomCreated', { 
      roomId,
      position: data.position,
      totalConnectedUsers: Array.from(totalRoomUsers || []),
    })
    roomCreator.set(roomId, socket.id) // map roomid with socket
  })
})

Joining room

In order to join the room, our client will emit an event ‘joinRoom’ with the roomId.

User emit ‘joinRoom’ with roomId
Check if room exist:
- exist
  1. join room
  2. attach roomid to socket
  3. get the room creator and notify him
  4. message the room joiner(socket)
- !exist
  1. notify the socket

...
...
socket.on('joinRoom', (data: {roomId: string}) => {

    // check if room exists
    const roomExists = io.sockets.adapter.rooms.has(data.roomId)
    if (roomExists) {
      socket.join(data.roomId)
      socket.roomId = data.roomId //  attach roomId to socket

      // Notify the room creator about the new user     
      const creatorSocketID = roomCreator.get(data.roomId)
      if (creatorSocketID) {
        const creatorSocket = io.sockets.sockets.get(creatorSocketID) // get socket instance of creator
        if (creatorSocket) {
          const totalRoomUsers = io.sockets.adapter.rooms.get(data.roomId)
          creatorSocket.emit('userJoinedRoom', {
            userId: socket.id,
            totalConnectedUsers: Array.from(totalRoomUsers || [])
          })
        }
      }
      // msg to joiner
      io.to(`${socket.id}`).emit('roomJoined', {
        status: 'OK',
      })

    } else {
      io.to(`${socket.id}`).emit('roomJoined', {
        status: 'ERROR'
      })
    }
  })

For location update

socket.on('updateLocation', (data) => {
    io.emit('updateLocationResponse', data)
})

Home page: Connect Sockets & Create Room

Now from the home page, we can connect to the socket server. To share location, user must share his location first. Once we have the coordinates, we can connect to the server and when the user have successfully established the connection, we’ll be automatically emit the createRoom event.

I chose this approach to prevent automatic connection to the server when a user visits the page. In our application, there might be additional pages like a login or register page in the future. To avoid unnecessary connections, I've designed it this way to ensure that we only establish a connection when it's explicitly needed.

type SocketStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
type RoomInfo = {
  roomId: string
  position: GeolocationPosition
  totalConnectedUsers: string[]
}

export default function Home() {
    // ...location related states

  const {socket, connectSocket} = useSocket()
  const [socketStatus, setSocketStatus] = useState<SocketStatus>('disconnected')
    const [roomLink, setRoomLink] = useState<string>('')
    const [roomInfo, setRoomInfo] = useState<RoomInfo | null>(null)

  function connectToSocketServer() {
    connectSocket()
    setSocketStatus('connecting')
  }

  useEffect(() => {
    let watchId: number | null = null
    // ...geolocation logic
  }, [])

  useEffect(() => {
    if(socket) {
      socket.on('connect', () => {
        setSocketStatus('connected')
        socket.emit('createRoom', {
          position
        })
      })

      socket.on('roomCreated', (data: RoomInfo) => {
        toast.success('You are live!', {
          autoClose: 2000,
          })
        setRoomInfo(data)
      })

      socket.on('userJoinedRoom', (data: {userId: string, totalConnectedUsers: string[]}) => {
        setRoomInfo((prev) => {
          if(prev) {
            return {
              ...prev,
              totalConnectedUsers: data.totalConnectedUsers
            }
          }
          return null
        })

        toast.info(`${data.userId} joined the room`, {
          autoClose: 2000,
        })

        position && socket.emit('updateLocation', {
          position
        })
      })

      socket.on('disconnect', () => {
        setSocketStatus('disconnected')
      })
    }
  }, [socket])

  useEffect(() => {
    if(socket) {
      socket.emit('updateLocation', {
        position
      })
    }
  }, [position])


  return (
    <>
            {/* ...rest */}
            {
              socketStatus === 'disconnected' && (
                <div className='flex flex-col gap-6 items-start w-full'>
                  <button 
                    className={`${locationStatus === 'accessed' ? 'bg-purple-800' : 'bg-gray-600 cursor-not-allowed'}`}
                    onClick={() => {
                      if(locationStatus === 'accessed') {
                        connectToSocketServer()
                      } else {
                        toast.error('Please allow location access', {
                          autoClose: 2000,
                        })
                      }
                    }}
                    disabled={locationStatus !== 'accessed'}
                    >Share Location</button>
                  {/*  ...rest */}
              </div>
              )

Location page: access roomId and join room

When the page load, we extract the room ID from the URL. Subsequently, we establish a connection with the socket. Once the connection is successfully established, we trigger the 'join room' event to indicate that the user has joined the specified room.

import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router-dom'
import {useSocket} from '../context/socket'

type RoomStatus = 'unknown' | 'joined' | 'not-exist'

function Location() {
  const { roomId } = useParams()
  const { socket, connectSocket } = useSocket()
  const [socketStatus, setSocketStatus] = useState<SocketStatus>('disconnected')
  const [roomStatus, setRoomStatus] = useState<RoomStatus>('unknown')
  const [position, setPosition] = useState<GeolocationPosition | null>(null)

  useEffect(() => {
    connectSocket()
    setSocketStatus('connecting')
    return () => {
      if(socket) {
        socket.disconnect()
        setSocketStatus('disconnected')
      }
    }
  }, [])

  useEffect(() => {

    if(socket){      

      socket.on('connect', () => {
        setSocketStatus('connected')
        socket.emit('joinRoom', {
          roomId
        })
      })

      socket.on('roomJoined', ({status}: {status: string}) => {
        if(status === 'OK') {
          setRoomStatus('joined')
        } else if (status === 'ERROR') {
          setRoomStatus('not-exist')
        } else {
          setRoomStatus('unknown')
        }
      })

      socket.on('updateLocationResponse', ({position}:{position: GeolocationPosition}) => {
        if(position) {
          setPosition(position)
        }
      })

      socket.on('disconnect', () => {
        setSocketStatus('disconnected')
      })
    }

  }, [socket])

// ...rest

Server: leave room

Here, the logic when user leaves the room:

User Leaves the Room:

For Room Creator:
- If the leaving user is the creator:
  1. Destroy the Room:
  2. Notify Other Users
For Room Joiner:
- If the leaving user is a participant:
  1. Notify the Creator:
    - Inform the room creator about the departure.
  2. Leave the Room:
    - Ensure the leaving user is removed from the room's participant list.

io.on('connection', (socket: CustomSocket) => {
  console.log(`User connected: ${socket.id}`)

// ...rest code

socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`)

    const roomId = socket.roomId
    if(roomId){
      // if disconnected user is creator, destroy room
      if(roomCreator.get(roomId) === socket.id){
        // notify users in room that room is destroyed
        const roomUsers = io.sockets.adapter.rooms.get(roomId)
        if(roomUsers){
          for (const socketId of roomUsers) {
            io.to(`${socketId}`).emit('roomDestroyed', {
              status: 'OK'
            })
          }
        }
        io.sockets.adapter.rooms.delete(roomId)
        roomCreator.delete(roomId)    
      } else{
        socket.leave(roomId)
        // notify creator that user left room
        const creatorSocketId = roomCreator.get(roomId)
        if(creatorSocketId){
          const creatorSocket = io.sockets.sockets.get(creatorSocketId)
          if(creatorSocket){
            creatorSocket.emit('userLeftRoom', {
              userId: socket.id,
              totalConnectedUsers: Array.from(io.sockets.adapter.rooms.get(roomId) || [])
            })
          }
        }
      }
    }

  })

})

Update home and location page: leave room

home.tsx

export default function Home() {

    // ...rest

  useEffect(() => {
    if(socket) {
      socket.on('connect', () => {
        setSocketStatus('connected')
        socket.emit('createRoom', {
          position
        })
      })
            // ...rest

            socket.on('userLeftRoom', (data: {userId: string, totalConnectedUsers: string[]}) => {
        setRoomInfo((prev) => {
          if(prev) {
            return {
                ...prev,
                totalConnectedUsers: data.totalConnectedUsers
              }
            }
            return null
          })
          toast.info(`${data.userId} left the room`, {
            autoClose: 2000,
          })
      })

      socket.on('disconnect', () => {
        setSocketStatus('disconnected')
      })
    }
  }, [socket])
// ...rest

location.tsx



function Location() {

  // ...rest

  useEffect(() => {

    if(socket){      

      socket.on('connect', () => {
        setSocketStatus('connected')
        socket.emit('joinRoom', {
          roomId
        })
      })

      // ...rest

            socket.on('roomDestroyed', () => {
        setRoomStatus('not-exist')
        socket.disconnect()
      })

      socket.on('disconnect', () => {
        setSocketStatus('disconnected')
      })
    }

  }, [socket])

function stopSharingLocation() {
    if(socket){
      socket.disconnect()
      setSocketStatus('disconnected')
      setRoomInfo(null)
      toast.success('You are no longer live!', {
        autoClose: 2000,
      })
    }
  }

// ...rest

We're done!👏🏽

We've covered the fundamental flow and logic of the location sharing application, focusing on the essential aspects. While I haven't provided the JSX and UI implementation code here, you can find the complete source code in the GitHub repository.

Final Words

In this project, I’ve touched the barebones. In the real world, we will have something more robust, with added authentication, database and more. Most importantly the scalability of the app, the amount of users it can handle.

Hopefully, if I get enough time, I would continue this series and try building those features.

You are welcomed to make a pull request, raise an issue or suggest changes.