DEV Community: Nirvan Jha

WebSocket : Create your First WebSocket connection

Nirvan Jha — Wed, 26 Jun 2024 15:32:14 +0000

What is Backend Communication?
When One Backend system interacts with other Backend systems, Its called backend communication. In real world, there are various backend systems not just one. Lets see some examples:-

For example, for a website like PayTM, whenever you do a transaction, the following might happen

The Backend1 will be doing the Money Transfer work and will delegate the task of sending notification of money transfer via email, messaging to other backends.

For leetcode (Leetcode is a problem solving website for programmers), whenever the user submits a problem, the following might happen -

Types of communication:

Synchronous (Strong coupling):-
1. HTTP (REST/GraphQL)
Asynchronous (Weak coupling):-
1. Messaging queues
2. Pub subs
3. Server-Sent Events
WebSockets
WebSockets are still debatable whether they are sync or async.

So what is Synchronous:-
HTTP is considered synchronous due to its request-response model. In this model, a client sends a request to a server and waits for a response. The client sends a request, waits for a response, and only after receiving the response can it send another request.

Asynchronous:-
It refers to a model where the client does not wait for the server to respond before proceeding with other tasks. Instead, the client can send multiple requests, and handle responses as they arrive. For Example:-

Websockets

Websockets are a way of communication between the client(typically a web browser) and the server.
So why are we using websockets and why not HTTP??

In HTTP, network Handshake happens for every request. Here the server makes a request and waits for the response and when it recieves the response, the connection gets closed. Now to make another request the network handshake happens again. See below:-

No way to push server side events. In an Http connection you can not send events or requests (You can not do fetch("URL") from the server side) from the server to the client. Only the Client can make requests. (You can use polling but not the best approach).

WebSockets provide a way to establish a persistent, full-duplex communication channel over a single TCP connection between the client (typically a web browser) and the server and solves the above two problems.

Use Cases for WebSockets:

Real-Time Applications: Chat applications, live sports updates, real-time gaming, and any application requiring instant updates can benefit from WebSockets.
Live Feeds: Financial tickers, news feeds, and social media updates are examples where WebSockets can be used to push live data to users.
Interactive Services: Chat application, Collaborative editing tools, live customer support chat, and interactive webinars can use WebSockets to enhance user interaction.

Websockets in Node.js
There are various libraries that let you create a ws server:-
https://www.npmjs.com/package/websocket
https://github.com/websockets/ws
https://socket.io/

We’ll be using the ws library today. Lets dive into code:-

Backend

Ws in Node.js (Code)

Initialize an empty Node.js project

npm init -y

Add tsconfig to it

npx tsc --init

Update tsconfig

"rootDir": "./src",
"outDir": "./dist",

3.1. Create a src folder and inside it create index.ts file.

Install ws

npm i ws @types/ws

If you want to use the standard http library: -

Code using http library

import WebSocket, { WebSocketServer } from 'ws';
import http from 'http';

const server = http.createServer(function(request: any, response: any) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.end("hi there");
});

const wss = new WebSocketServer({ server });

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data, isBinary) {
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data, { binary: isBinary });
      }
    });
  });

  ws.send('Hello! Message From Server!!');
});

server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

If you want to use Express Library:-

Code using express 5.1. Install Express

npm install express @types/express

5.2. Writw this code in index.ts

import express from 'express'
import { WebSocketServer } from 'ws'

const app = express()
const httpServer = app.listen(8080)

const wss = new WebSocketServer({ server: httpServer });

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data, isBinary) {
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data, { binary: isBinary });
      }
    });
  });

  ws.send('Hello! Message From Server!!');
});

Open the terminal and write:-

tsc -b

node dist/index.js

To check whether the websocket is established or not u can go to https://hoppscotch.io/realtime/websocket

Client side code

Websocket is a browser API that you can access (very similar to fetch).

Create a React project

npm create vite@latest

Create a websocket connection to the server in App.tsx

import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [socket, setSocket] = useState<WebSocket | null>(null);

  useEffect(() => {
    const newSocket = new WebSocket('ws://localhost:8080');
    newSocket.onopen = () => {
      console.log('Connection established');
      newSocket.send('Hello Server!');
    }
    newSocket.onmessage = (message) => {
      console.log('Message received:', message.data);
    }
    setSocket(newSocket);
    return () => newSocket.close();
  }, [])

//Here you can write the code to maka chat application by adding a input box, by creating a state and the storing the message in it and rendering the messages on the screen. 
  return (
    <>
      hi there
    </>
  )
}

export default App

In Nextjs write this code in Page.tsx and make it client side by writing "use client" at the top of Page.tsx

Open the terminal to run this project:-

npm run dev

And now you are good to go.

WebRTC : Create Your First WebRTC connection!

Nirvan Jha — Sun, 23 Jun 2024 14:02:05 +0000

What is WebRTC?
WebRTC is an opensource project that provides webApplications and sites to establish a peer2peer connection and do a real-time communication. It allows to send video, audio and data sharing between browsers.

P2P
WebRTC is a peer to peer protocol. This means that you directly send your media over to the other person without the need of a central server.

NOTE:
You do need a central server for signaling and sometimes for sending media as well (turn). We’ll be discussing this later.

Latency:- latency is the time it takes for data to travel from the source to the destination.

You use WebRTC for applications that require Less latency.
Examples include

Zoom/Google meet (Multi party call)
Omegle, teaching (1:1 call)
30FPS games (WebRTC can also send data)

What is a Signaling Server?
To establish a connection, Both the server need to send each other their address in order to know whom they have to connect to. A signaling server is used for that. A signaling server itself does not handle the actual media or data transfer but facilitates the initial communication setup.
It is usually a WebSocket server but can be a (http) server as well.

What is a STUN server?
The primary purpose of a STUN server is to allow a client (or Browser) to determine its public-facing (which the world sees) IP address and the port that the NAT(explained below) has assigned to a communication session. This information is then used in the signaling process to facilitate direct communication between Browsers.

So what is NAT(Network Address Translation)??

Simple NAT Example
1.Your laptop (192.168.1.2) wants to visit a website.
2.The router changes the address to its public IP (e.g., 203.0.113.1) and sends the request.
3.The website sends data back to 203.0.113.1.
4.The router receives the data, knows it was for 192.168.1.2, and sends it to your laptop.

Coming back to STUN server:- This is How it Works

ICE Candidates :=>

ICE (Interactive Connectivity Establishment) candidates are network endpoints that WebRTC peers use to establish direct peer-to-peer connections. Each ICE candidate consists of:

IP Address: This is the address that identifies a device on a network. It can be either a local (private) IP address or a public IP address.
Port Number: Ports are numeric identifiers used by networking protocols to distinguish different types of traffic on the same IP address. They help direct data to the correct application or service running on a device.

In simple terms ICE candidates are potential IP address and Port through which two Browsers or peers can establish connection.

If two friends are trying to connect to each other in a hostel wifi , then they can connect via their private router ice candidates.

If two people from different countries are trying to connect to each other, then they would connect via their public IPs.

What is a TURN server?

A lot of times, your network doesn’t allow media to come in from browser2. This depends on how restrictive your network is.
So When direct peer-to-peer connections fail due to NAT traversal issues(or Router issues), a TURN server acts as a solution. It relays media and data between peers, ensuring that communication can still occur even if direct connections are not possible.

Offer
The process of the first browser (the one initiating connection) sending their ice candidates to the other side.
Answer
The other side returning their ice candidates is called the answer.

SDP - Session description protocol
A single file that contains all your ice candidates, what media you want to send, what protocols you’ve used to encode the media. This is the file that is sent in the offer and received in the answer.
SDP Look like this:-
(No need to understand this....senior dev things :))

Summary:-
1.You need a signaling server, stun server to initiate the webrtc conn b/w the parties. You can kill these once the conn is made.
2.You need to include a turn server incase any of the users are on a restrictive network so you can get back a turn ice candidate as well.

Now Lets Dive into some Coding Stuff:-

RTCPeerConnection (pc, peer connection)
This is a class that the browser provides you with which gives you access to the SDP, lets you create answers / offers , lets you send media.
This class hides all the complexity of webrtc from the developer.
To know more:-
https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection

Basic Steps:- (Don't worry if it feels jargony right now!)
Connecting the two sides

The steps to create a webrtc connection between 2 sides includes -

Browser 1 creates an RTCPeerConnection
Browser 1 creates an offer
Browser 1 sets the local description to the offer
Browser 1 sends the offer to the other side through the signaling server
Browser 2 receives the offer from the signaling server
Browser 2 sets the remote description to the offer
Browser 2 creates an answer
Browser 2 sets the local description to be the answer
Browser 2 sends the answer to the other side through the signaling server
Browser 1 receives the answer and sets the remote description

This is just to establish the p2p connection b/w the two parties

To actually send media, we have to

Ask for camera /mic permissions
Get the audio and video streams
Call addTrack on the pc
This would trigger a OnTrack callback on the other side

Implementation

We will be writing the code in Node.js for the Signaling server. It will be a websocket server that supports 3 types of messages
1. createOffer
2. createAnswer
3. addIceCandidate
React + PeerConnectionObject on the frontend.

If you want to get an idea on how it works:- https://jsfiddle.net/rainzhao/3L9sfsvf/

Backend

Create an empty TS project, add ws to it

npm init -y
npx tsc --init
npm install ws @types/ws

Change rootDir and outDir in tsconfig

"rootDir": "./src",
"outDir": "./dist",

Create a simple websocket server

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

let senderSocket: null | WebSocket = null;
let receiverSocket: null | WebSocket = null;

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data: any) {
    const message = JSON.parse(data);

  });

  ws.send('something');
});

Try running the server

tsc -b
node dist/index.js

Add message handlers

import { WebSocket, WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

let senderSocket: null | WebSocket = null;
let receiverSocket: null | WebSocket = null;

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data: any) {
    const message = JSON.parse(data);
    if (message.type === 'sender') {
      senderSocket = ws;
    } else if (message.type === 'receiver') {
      receiverSocket = ws;
    } else if (message.type === 'createOffer') {
      if (ws !== senderSocket) {
        return;
      }
      receiverSocket?.send(JSON.stringify({ type: 'createOffer', sdp: message.sdp }));
    } else if (message.type === 'createAnswer') {
        if (ws !== receiverSocket) {
          return;
        }
        senderSocket?.send(JSON.stringify({ type: 'createAnswer', sdp: message.sdp }));
    } else if (message.type === 'iceCandidate') {
      if (ws === senderSocket) {
        receiverSocket?.send(JSON.stringify({ type: 'iceCandidate', candidate: message.candidate }));
      } else if (ws === receiverSocket) {
        senderSocket?.send(JSON.stringify({ type: 'iceCandidate', candidate: message.candidate }));
      }
    }
  });
});

That is all that you need for a simple one way communication b/w two tabs.

Frontend

Create a frontend repo

npm create vite@latest

Add two routes, one for a sender and one for a receiver

import { useState } from 'react'
import './App.css'
import { Route, BrowserRouter, Routes } from 'react-router-dom'
import { Sender } from './components/Sender'
import { Receiver } from './components/Receiver'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/sender" element={<Sender />} />
        <Route path="/receiver" element={<Receiver />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

Remove strict mode in main.tsx to get rid of a bunch of webrtc connections locally (not really needed).
Go to src folder and create a components folder inside which create two files Sender.tsx and Reciever.tsx

5.Create components for sender

import { useEffect, useState } from "react"

export const Sender = () => {
    const [socket, setSocket] = useState<WebSocket | null>(null);
    const [pc, setPC] = useState<RTCPeerConnection | null>(null);

    useEffect(() => {
        const socket = new WebSocket('ws://localhost:8080');
        setSocket(socket);
        socket.onopen = () => {
            socket.send(JSON.stringify({
                type: 'sender'
            }));
        }
    }, []);

    const initiateConn = async () => {

        if (!socket) {
            alert("Socket not found");
            return;
        }

        socket.onmessage = async (event) => {
            const message = JSON.parse(event.data);
            if (message.type === 'createAnswer') {
                await pc.setRemoteDescription(message.sdp);
            } else if (message.type === 'iceCandidate') {
                pc.addIceCandidate(message.candidate);
            }
        }

        const pc = new RTCPeerConnection();
        setPC(pc);
        pc.onicecandidate = (event) => {
            if (event.candidate) {
                socket?.send(JSON.stringify({
                    type: 'iceCandidate',
                    candidate: event.candidate
                }));
            }
        }

        pc.onnegotiationneeded = async () => {
            const offer = await pc.createOffer();
            await pc.setLocalDescription(offer);
            socket?.send(JSON.stringify({
                type: 'createOffer',
                sdp: pc.localDescription
            }));
        }

        getCameraStreamAndSend(pc);
    }

    const getCameraStreamAndSend = (pc: RTCPeerConnection) => {
        navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
            const video = document.createElement('video');
            video.srcObject = stream;
            video.play();
            // this is wrong, should propogate via a component
            document.body.appendChild(video);
            stream.getTracks().forEach((track) => {
                pc?.addTrack(track);
            });
        });
    }

    return <div>
        Sender
        <button onClick={initiateConn}> Send data </button>
    </div>
}

Create the component for receiver

import { useEffect } from "react"


export const Receiver = () => {

    useEffect(() => {
        const socket = new WebSocket('ws://localhost:8080');
        socket.onopen = () => {
            socket.send(JSON.stringify({
                type: 'receiver'
            }));
        }
        startReceiving(socket);
    }, []);

    function startReceiving(socket: WebSocket) {
        const video = document.createElement('video');
        document.body.appendChild(video);

        const pc = new RTCPeerConnection();
        pc.ontrack = (event) => {
            video.srcObject = new MediaStream([event.track]);
            video.play();
        }

        socket.onmessage = (event) => {
            const message = JSON.parse(event.data);
            if (message.type === 'createOffer') {
                pc.setRemoteDescription(message.sdp).then(() => {
                    pc.createAnswer().then((answer) => {
                        pc.setLocalDescription(answer);
                        socket.send(JSON.stringify({
                            type: 'createAnswer',
                            sdp: answer
                        }));
                    });
                });
            } else if (message.type === 'iceCandidate') {
                pc.addIceCandidate(message.candidate);
            }
        }
    }

    return <div>

    </div>
}

And You are good to go!!

Do like and share it if you found it useful.
Share your views below and comment if you have a doubt.

Thanks :)

Rate Limiting and DDoS

Nirvan Jha — Sun, 16 Jun 2024 16:46:48 +0000

What is Rate Limiting?

Rate Limiting is a technique to control the rate at which requests (such as GET, POST, PUT etc.) are made to a service by a client or an application.
This is achieved by restricting the amount of request that a client makes to the server in a specified amount of time. For example, you can make only 100 requests in a specified time interval say 30 secs. It means if you made 100 requests to a website....then you have to wait for 30 seconds...and then only you are allowed to make 100 request again.

Why Rate Limiting?

Preventing Overload:- Rate limiting controls how often a user or system can make requests to a service. This helps prevent overuse of resources, ensuring that the system remains available and responsive for all users. For example, rate limiting can stop a single user from making thousands of login attempts in a minute, which could otherwise degrade service for others.
Mitigating Abuse: Without rate limiting, an application could be more susceptible to abuse such as brute force attacks on passwords. (Brute Force Attacks: in these attacks, the attackers tries to gain the access of the system illegally...For ex. If the site needs an 4 digit OTP to Login, So the attacker will run an algorithm and try all the 4 digit numbers from 1000 to 9999. This is a hit and trial method. The algorithm tries each and every OTP ). By limiting how often someone can perform an action, it reduces the feasibility of such attacks.
Managing Traffic: In high traffic scenarios such as movie ticket booking...Rate Limiting helps to manage the Traffic on the website and ensures a fairer distribution of services to the users.
DDoS protection: A DDoS attack means attacking the website from multiple sources which can make the website unavailable. DDoS protection mechanism can identify such malicious traffic and filter them. (Sounds Overwhelming just look at the Figure below).

So the question arises:-
**Where Can You Commonly Find Rate Limiters=>

In the login page of sites...where there is a higher chance of Brute Force attacks.
In the Ecommerce Sites: Suppose if there is a sale on Sneakers...The attackers will send multiple request to jam the website so that normal users cant access it.
API Endpoints , Email Sending etc.

**How To Write the Code for Rate Limiter:-
Step1: Add Dependency
npm i express-rate-limit

Step2:

Step3: Use this middleware in whichever end point you need. An example is attached Below on how to use this middleware.

Now the PROBLEM arises:- Your Server is still vulnerable to DDoS.
Though DDoS is rarely used for password reset, it is usually used to choke a server.

How can you save your reset password endpoint?

You can implement logic in the rate limiter code that only 3 resets are allowed per email sent out. OR
You can implement CAPTCHA logic.

How does a captcha work:- You can various tools such as CloudFlare turnstile.

To Use Captcha , Here is an example how you can do it:-
Step1: Go to Cloudflare Turnstile and click on ADD SITE

Step2: Add a name and Domain.

Step3: You will get a site key and a secret key (This secret key is used to verify token...discussed earlier).

Step4:Create a React Page

Step5: Add Dependencies by running this command in the terminal:-
npm i @marsidev/react-turnstile

Step6: Update App.tsx

Step7: Update the backend Code:-

And You are Good to Go :)

Do Share your reviews in the comments!!
Thanks