Forem: Joseph Giwa

Understanding WebSocket: Real-Time Communication Made Easy

Joseph Giwa — Tue, 11 Feb 2025 22:07:19 +0000

A Simple Analogy

Imagine you are at a restaurant and place an order. In a traditional setup [like HTTP requests], you call the waiter over, place your order, and then wait. If you want an update on your food, you have to keep waving them down and asking, "Is my food ready yet?"

Now, imagine a different approach—when you order, the waiter gives you a small pager. Instead of you having to ask repeatedly, the pager buzzes the moment your food is ready. This is how WebSocket works—once a connection is established, the server can push updates to the client in real-time, without the client having to check back constantly.

What is WebSocket?

WebSocket is a full-duplex communication protocol that allows real-time data exchange between a client [e.g., browser] and a server over a persistent connection. Unlike traditional HTTP, where the client must request updates, WebSocket allows the server to push updates instantly when new data is available.

Practical Use Cases

Chat Applications: Instant messaging platforms rely on WebSocket for real-time message delivery. [e.g., WhatsApp, Slack, Messenger]
Live Notifications: Updates like stock prices, sports scores, or breaking news leverage WebSocket for instant alerts.
Multiplayer Games: Real-time interactions between players depend on WebSocket’s low-latency communication.
Collaborative Tools: Tools like shared documents or whiteboards use WebSocket to synchronize changes instantly among users. [e.g., Google Docs, whiteboards, live code editors]

The Chatbot on Send247's website is another solid example.

Send247 facilitates fast, reliable, and affordable door-to-door deliveries for individuals and businesses across select areas in London.

[Demo] user interacting with the Chatbot to book a delivery request.

Setting Up WebSocket in Node.js

Let’s implement a basic WebSocket server using Node.js with the ws package.

Step 1: Install Dependencies

To get started, install the ws library, which provides WebSocket support in Node.js.

npm install ws

Step 2: Create a WebSocket Server

This simple WebSocket server listens for incoming connections and messages:

const WebSocket = require('ws');

// Create a WebSocket server on port 8080
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('New client connected');

    // Send a welcome message when a client connects
    ws.send(JSON.stringify({ message: 'Welcome to WebSocket Server!' }));

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);

        // Broadcast message to all connected clients
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(`Echo: ${message}`);
            }
        });
    });

    // Handle client disconnection
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server is running on ws://localhost:8080');

This simple WebSocket server:

accepts new client connections
sends a welcome message to each client
listens for messages from clients and echoes them back
broadcasts messages to all connected clients

Creating a WebSocket Client (Browser)

To connect to the WebSocket server from a web page, you can use the built-in WebSocket API in JavaScript:

const socket = new WebSocket('ws://localhost:8080');

// Listen for messages from the server
socket.onmessage = (event) => {
    console.log('Server says:', event.data);
};

// Send a message to the server
socket.onopen = () => {
    console.log('Connected to WebSocket server');
    socket.send('Hello, WebSocket Server!');
};

// Handle connection close
socket.onclose = () => {
    console.log('Disconnected from WebSocket server');
};

Enhancing the WebSocket Server: Real-Time Notifications

Let’s modify the server to send periodic real-time updates [e.g., stock price updates].

setInterval(() => {
    const stockPrice = (Math.random() * 100).toFixed(2); // Generate a random stock price

    wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify({ stock: `AAPL: $${stockPrice}` }));
        }
    });
}, 5000); // Send updates every 5 seconds

Now, all connected clients receive real-time stock price updates every 5 seconds.

Conclusion

Whether you are developing a chat app, live notifications, multiplayer games, or collaborative tools, WebSocket enables seamless, efficient, and interactive user experiences. By reducing latency and optimizing resource usage, it powers modern applications that demand real-time engagement.

If you are looking to enhance your web application with instant communication, WebSocket is the technology to consider. Now that you have a working knowledge of how it functions, it’s time to explore its full potential in your own projects!

Resolving the "zsh: command not found: yarn" Error on macOS

Joseph Giwa — Thu, 06 Jun 2024 07:47:55 +0000

For new Mac users transitioning from a Windows environment, you will encounter some initial challenges while setting up your development environment. One of the primary issues you will face is running the yarn command in the terminal. Here's a step-by-step account of resolving the zsh: command not found: yarn error.

😑 Problem: zsh: command not found: yarn

After cloning your project repository and navigating into the directory, you tried running yarn to install dependencies but got the error below:

zsh: command not found: yarn

😊 Solution

This error indicates that yarn is not installed on your system. To fix this, use Homebrew, a package manager for macOS, to install yarn.

1) Install Homebrew (if not already installed):
Homebrew simplifies the installation of software on macOS. Open your terminal and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2) Install yarn:
With Homebrew installed, you can now install yarn by running:

brew install yarn

3) Verify yarn installation:
After the installation, verify that Yyrn is installed by running:

yarn -v

😑 Problem: env: node: No such file or directory
While verifying yarn installation, you encountered another error:

env: node: No such file or directory

This error indicates that yarn is installed, but it cannot find Node.js. Yarn depends on Node.js to run.

😊 Solution:
To resolve this, you need to install Node.js using Homebrew:

1) Install Node.js:

brew install node

2) Verify both yarn and Node.js Installation as shown below.

node -v
yarn -v

This time, the command should work without any issues, and you can proceed with installing dependencies and running your application.

Hope this helps.

Understanding TypeScript & Using it in Your Node Environment.

Joseph Giwa — Mon, 15 Nov 2021 19:59:29 +0000

I struggled with this concept a lot, but let me save you the stress, and explain as simply as I can.

Typescript is just a secure way of writing JavaScript code. Do not get confused by the fancy terminologies people throw around it.

The good news is, if you know JavaScript, you already know ~90% of Typescript. The additional layer only forces you to be a lot more intentional about your variables and data types.

...

Why Typescript?

Simple answer? To catch errors early in your editor.
Typescript detects silly bugs at runtime; bugs you probably wouldn’t notice until it’s too late when using pure JavaScript.

...

Here's sample JavaScript code:

let id = 1
let company = "GYRO Design Lab"
let isPublished = true
let mandem = ["Dexter", "Mide", "Emmy"]

But the unfortunate thing here is that, at some point later in your code, the variable company - for instance, could be re-assigned to a value of an entirely different data type, which would be unexpected behavior.
Sadly, JavaScript will not throw an error, and this poses a compounding threat to your App.
Thankfully, popular code editors like VScode now use Typescript under the hood, to spot errors like these.

...

Sample Typescript code

let id: number = 10 
let company: string = "GYRO Design Lab"
let isPublished: boolean = true

// Here, the variable "x" can later be re-assigned a value of different datatype
let x: any = "Hello" 

// This is an array of numbers. This - "Number[]", tells the system that the variable "ids" is expected to be an array of numbers. So if you try to push a string in the array, you will get an error.
let ids: number[] = [1,2,3,4,5]

As you can see, with Typescript, you have to explicitly define your Types.

...
When creating an object, for instance, you get to create an interface that defines the shape of your object;

// interface declaration
interface User {
    Name: string;
    Id: number
}

// Javascript object which conforms to the shape of the interface. 
const user: User = {
    Name: "Janet",
    Id: 0
}
// Typescript will warn you if it doesn't match.

...

So what exactly happens under the hood?

Typescript code transpiles to JavaScript, which runs anywhere JavaScript runs: In a browser, on NodeJS, and in your apps.

“Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction” - stackoverflow.

...
When setting up your Typescript+NodeJS project, your entire project files are usually in a folder, including your Typescript [.ts] files.

However, your browser will not run .ts files, this is why the Typescript engine automatically generates a new project folder containing the transpiled version of our entire project, which we can now run and test.

...

Now let's create a simple NodeJS App, and configure Typescript.

Initialize your project
npm init -y
Install Typescript as dev dependency.
npm install -D typescript
Generate a configuration file - tsconfig.json
npx tsc --init

Now open the tsconfig.json file, you will see a bunch of commented-out codes; no worries, look for the properties below, and make these changes to them.
Note: Some of the properties below are commented-out by default in the tsconfig.json file, you will have to uncomment them.

”Target": "es6”
”rootDir": "./src” "src" will be the name of your project folder
”outDir": "./build” "build" is the auto-generated folder that will holds your transpiled files.

In your package.json file, add the following tags into your "scripts" key like so;

"scripts" : {
    "build" : "tsc"
    "dev": "npm run build && node build/index.js"
}

"build" : "tsc" is responsible for transpiling the Typescript codes to JavaScript, and "dev": "npm run build && node build/index.js" runs the program when you type "npm run dev" in you console.

...
We have successfully integrated Typescript to our app. Now let's see it in action.

At the moment, your root directory should contain /node_modules, package.json.lock, package.json, and a tsconfig.json file. Create a new folder - src. Your first Typescript file goes in here.
create an index.ts file inside the src folder.
Paste the entire typescript snippet shown at the beginning of this article, into your index.ts
Finally run npm run dev in your terminal. You will notice a newly generated folder /build, which contains a transpile version of your Typescript code.

Hope you find this helpful.

Creating Your First Chrome Extension.

Joseph Giwa — Fri, 16 Jul 2021 22:00:33 +0000

Every four seconds, this chrome extension replaces images on any webpage I visit, with random pictures of some of my friends and family.

Totally enjoyed the building process.
Here's what it looks like when activated on YouTube 👀.

...

Getting started

A fairly solid understanding of the DOM [Document Object Model] goes a long way when building browser extensions, as you would have to do lots of DOM manipulation.

The project folder contains two files; manifest.json and content.js

Project Folder/

manifest.json
content.js

...
manifest.json
This is the entry point of every chrome extension. It handles permissions, routes, and holds necessary information like the extension name, version, description, icons, etc.

{

    "manifest_version": 2,
    "name": "FriendsFX",
    "version": "1.0.1",
    "description": "Converts every image on a webpage to random pictures of some of my friends",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]

}

Most of the keys in the snippet above are self-explanatory, but let's talk about the "content_scripts" key.

It holds an array of one object - containing two key elements; "matches" and "js", with values of ["<all_urls>"] and ["content.js"] respectively.

["<all_urls>"] basically matches any URL that starts with a permitted scheme; http:, https:, file:, ftp:, or chrome-extension:.

These permissions are required if your code wants to interact with the code running on webpages.

...
content.js
Here goes the code that replaces every image on a webpage with the selected pictures.

Step 1:

I had uploaded the pictures to cloudinary, a tool that automatically optimizes and delivers media files.

NOTE: You do not have to use cloudinary. Your friends' pictures must be somewhere on the internet, so you can just grab the links whenever you need them

Below, I created an array - imagesLinks, containing links to those pictures.

// An array of pictures to randomly select from
// You can have as many links/pictures as you want

const imagesLinks = [
    "https://res.cloudinary.com/dd3hmuucq/image/upload/v1625511199/friendsFX/IMG20201223190841_1_gsz2dc.jpg",
    "https://res.cloudinary.com/dd3hmuucq/image/upload/v1625511198/friendsFX/IMG20201223184904_tj8u3d.jpg",
    "https://res.cloudinary.com/dd3hmuucq/image/upload/v1625511192/friendsFX/IMG20201223182200_xglqvv.jpg",
    "https://res.cloudinary.com/dd3hmuucq/image/upload/v1625511189/friendsFX/IMG20201223191703_wnindo.jpg",
    "https://res.cloudinary.com/dd3hmuucq/image/upload/v1625511184/friendsFX/IMG20201223182912_er8kil.jpg"

]

Step 2:

// fetches all <img> tags on the webpage
const imageTags = document.getElementsByTagName("img")

Final Step:

// Loops through each of the <img> tags on the webpage
// Replaces the 'src' attribute with a random link from the imageLinks array 
// Do this every 4 seconds

setInterval(() => {
    for (let i = 0; i < imageTags.length; i++) {
        let randomArrayIndex = Math.floor(Math.random() * imagesLinks.length)
        imageTags[i].src = imagesLinks[randomArrayIndex]
    }
}, 4000);

...

Let's test out the extension.

1) Upload the extension to your browser extension library.

Type this 👉🏼 chrome://extensions/ in your browser

2) Activate "Developer mode" at the top right corner

3) Click "Load unpacked" and select the project folder.

4) The extension gets added and is immediately activated.

5) Now go to any webpage, hold on for about 4 seconds and watch the selected pictures appear.

...
...

Let me know if you found this helpful.
You can also get the code on GitHub.

innerHTML Vs. textContent: The subtle difference.

Joseph Giwa — Fri, 13 Nov 2020 00:40:39 +0000

At first glance, both properties look like they do the same thing.

While innerHTML provides a simple and convenient way to create HTML templates as strings and inject them into the DOM [Document Object Model], textContent only lets you create plain texts as strings.

Now, let's break it down.

`textContent` in action:

Say we want to output "I love JavaScript"

<p id="output"></p>

<script>
    document.getElementById("output").textContent = "I love Javascript";
</script>

`innerHTML` in action:

innerHTML can do everything textContent can, plus a higher level of DOM manipulation. For instance;

Let's output "I love JavaScript"
Note: "I" is Italicised, "love" is bold, and let's assume "JavaScript" is in red

<p id="output"></p>

<script>
    document.getElementById("output").innerHTML = "<em>I</em> <strong>love</strong> <span style='color: red;'>JavaScript</span>";
</script>

Conclusion:

innerHTML is richer, as you can get more fanciful with it.
But if you only aim to return text content, go ahead with textContent.

Hope you find this helpful.

Happy to learn from you.

How would you use these properties?

Forcing Your Website To Serve Secure Content

Joseph Giwa — Tue, 28 Jul 2020 04:41:15 +0000

While most hosting plans include an SSL [Secure Sockets Layer] certificate, they are not automatically activated, as you sometimes have to manually install the certificate via the cPanel.

Once installed, you should force a redirect to HTTPS. This encrypts and secures your website’s data, and traffic. It will encourage visitors to engage your site content because they feel safe, and reassured – especially if you’ll be requesting some personal information.

First of all, you need to install the SSL Certificate via the cPanel

Click “SSL/TLS” in the Security category.
Click “Manage SSL sites”
Now click “Browse Certificate”
A window pops up; choose from the list of certificates and click “Use Certificate“. The form-fields get automatically filled.
Now scroll all the way down, and “Install Certificate“

Certificate Installed!

Finally! Force a redirect to HTTPS using any of these 2 methods;

Method 1:

Is it a wordpress site?

Go to your dashboard and open up the Settings › General tab. You’ll find two fields called WordPress Address (URL) and Site Address (URL). Now replace the HTTP prefix in both fields with HTTPS, and save the changes to your settings: That’s all it takes to configure WordPress to use HTTPS.

Method 2:

Edit the .htaccess file

Type the following code into your .htaccess file; create one if you don’t already have one. If you can’t locate it, see how here.

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Either of these two should help you load serve secure content.

However, enabling HTTPS on your website isn’t enough. If you have mixed content loading over a secure HTTPS connection, you’ll continue to receive mixed or insecure content warnings and push people away. So, take the time to check and monitor your site for insecure content. Because you can bet that even though some site visitors will still risk visiting your site with mixed content warnings, popular browsers like Chrome are going to continue to crack down on insecure sites and prevent users from engaging with them the way you’d like.

Migrating Your WordPress Website To A New Domain

Joseph Giwa — Tue, 28 Jul 2020 04:23:05 +0000

Imagine having to rebuild your WordPress website all over again because you got a new domain name.

On several occasions, I have had to build WordPress websites on temporary domains, and then move them to the permanent domain when ready.

The right tool for this is the “All-in-One WP Migration” plugin which currently has over 2 million active installs. This plugin exports your entire website – including the database, and imports into the new domain.

Once installed and activated in the old wordpress dashboard, A menu for the newly installed plugin appears on the sidebar. Hover over it, then;

Click “Export”
Select “Export to” > File

Once the archive process is complete, click to download.

Now go to the wordpress dashboard of the new domain
Install and activate the “All-in-One WP Migration” plugin. Again, you will find the link to the newly installed plugin on the side panel. Hover over it:
Click “Import”
Select “Import to” > File

However, recent installations of All-in-One WP Migration only allows you a 128mb upload limit while previous installs on the same server allowed 520mb uploads. If your website exceeds the limit, you need install and activate the All-in-One WP File extension plugin.

Now go ahead and import your downloaded website.

Once your website is successfully imported, the page reloads, and you will be required to enter your login details to re-access your dashboard.

You’re good to go

Understanding Git and GitHub

Joseph Giwa — Tue, 28 Jul 2020 04:13:27 +0000

First of all, Git is to GitHub – what porn is to pornhub.

Let me tell you a story.

Back when i started out coding, and had to collaborate with another developer, i would send the backend guy a zipped version of my frontend code – either in a flash drive, or via email, and whenever i needed to make further UI changes, he would send back the codebase [including his backend code], and I would have to navigate the codebase to make my changes without messing up my guy’s backend code.

So Rookie! But hey! We got the job done. Most importantly, I had fun doing it.

Imagine the horror if it was a large project – with over 15 developers working on it.

By the way, I started out doing web design – using HTML, CSS, and jQuery because it was the only coding space I felt I could immediately see the effect of my code.

For some reason, the resources I could lay my hands on – made zero reference to Git or GitHub, so I had no idea what those terms meant. Even after I finally got to know of them, the concepts got more and more confusing than I’d like to admit.

Now that I understand the concepts, it has been a fun ride.

Git and GitHub are two very different entities, and can not be used interchangeably.

Git is a distributed version control system; this means It allows us to track changes in an application, in a folder, in a single file – over time, across different users, and different computers.

GitHub is like a social network or platform for Git repositories; a repository is a set of files for a project. GitHub allows us to share our repositories with team members, publish things online, and collaborate on open-source projects.

Git can be used on it’s own. It is the main technology, while GitHub is the platform to share it and collaborate using Git.

The first step to becoming a Git-GitHub rockstar is to try out this simple task;

Let’s create a simple repository containing a readme.txt file

Download Git here
Register on GitHub, and create a repository.
Now create a “readme.txt” file in a folder on your desktop.
Open this folder > Right click > Now click the “Git Bash Here” option to open the terminal.
In the terminal, type git init then press enter
git add readme.txt
git commit -m "first commit message"
git remote add origin URL [copy this URL from the your repository page]
git push -u origin master

We have successfully created our first repository containing a readme.txt file.

This can be shared with team members so they can make changes within the file, or even create new folders which would be accessible to you.

Creating a GitHub README Profile

Joseph Giwa — Mon, 27 Jul 2020 19:32:20 +0000

GitHub recently released a feature that lets you introduce yourself to the GitHub community, using more visual contents such as pictures, GIFs, links, and everything else you can add to a normal README file, because it is markdown, which means you control the display of the document.

Now, there is a chance to give visitors a broad snapshot of who we are, as we highlight our skills and projects.

I will show you how to unlock this feature, and also share interesting use cases by users around the world.

To unlock this feature…

Create a new repository using the exact name as your GitHub username. For instance, my username is giwajossy, so the new repository had to be giwajossy.

Note: The naming is case-sensitive – at the time of this writing. Also, repositories are public by default, if you make it private, it won’t work.

Repository successfully created!

So I designed a banner, and placed it atop my new bio. Nothing too fancy!

Some Interesting use cases by other GitHub users

// Detect dark theme var iframe = document.getElementById('tweet-1281111778290786310-774'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1281111778290786310&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1281435464474324993-415'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1281435464474324993&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1282326538990563329-246'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1282326538990563329&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1281699715466199040-275'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1281699715466199040&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1281146411736694784-334'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1281146411736694784&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1281026687103168512-745'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1281026687103168512&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1265773172520914944-315'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1265773172520914944&theme=dark" }

Thanks for reading!

Hope you find this helpful.

Forem: Joseph Giwa

Understanding WebSocket: Real-Time Communication Made Easy

A Simple Analogy

What is WebSocket?

Practical Use Cases

Setting Up WebSocket in Node.js

Step 1: Install Dependencies

Step 2: Create a WebSocket Server

Creating a WebSocket Client (Browser)

Enhancing the WebSocket Server: Real-Time Notifications

Conclusion

Resolving the "zsh: command not found: yarn" Error on macOS

Understanding TypeScript & Using it in Your Node Environment.

Why Typescript?

Here's sample JavaScript code:

Sample Typescript code

So what exactly happens under the hood?

Now let's create a simple NodeJS App, and configure Typescript.

Creating Your First Chrome Extension.

Getting started

Let's test out the extension.

innerHTML Vs. textContent: The subtle difference.

textContent in action:

innerHTML in action:

Conclusion:

Forcing Your Website To Serve Secure Content

First of all, you need to install the SSL Certificate via the cPanel

Certificate Installed!

Finally! Force a redirect to HTTPS using any of these 2 methods;

Migrating Your WordPress Website To A New Domain

Understanding Git and GitHub

Now that I understand the concepts, it has been a fun ride.

Let’s create a simple repository containing a readme.txt file

Creating a GitHub README Profile

To unlock this feature…

Some Interesting use cases by other GitHub users

`textContent` in action:

`innerHTML` in action: