
In today's fast-paced digital world, real-time communication is more crucial than ever. Whether it's for chat applications, live sports updates, or collaborative tools, instant data transfer can significantly enhance user experience. One of the key technologies enabling real-time communication on the web are WebSockets. In this blog post, we'll delve into WebSocket.io, a popular JavaScript library that simplifies WebSocket implementation, making it easier for developers to create real-time web applications.

![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+1.jpg)

# What is WebSocket.io?
WebSocket.io is a library that facilitates WebSocket connections in a Node.js environment. It builds on the WebSocket protocol, which provides a full-duplex communication channel over a single TCP connection, allowing for bidirectional data transfer between the client and the server. Unlike traditional HTTP requests, WebSockets enable continuous data exchange, reducing latency and improving efficiency.

WebSocket.io abstracts the complexities of WebSocket programming, offering a straightforward API that handles connection management, message routing, and error handling. It integrates seamlessly with Node.js, making it a popular choice for developers looking to implement real-time chat features in their applications.

##
# Why use WebSocket.io?
### 1. Simplified API
WebSocket.io provides a high-level API that simplifies the creation and management of WebSocket connections. Developers can focus on building features rather than dealing with the intricacies of the WebSocket protocol.

### 2. Real-Time Communication
With WebSocket.io, developers can easily implement real-time features such as live chat, notifications, and collaborative tools. This real-time capability can greatly enhance user engagement and experience.

### 3. Scalability
WebSocket.io is built on Node.js, known for its scalability and performance. It can handle a large number of concurrent connections, making it suitable for applications that require real-time data transfer at scale.

### 4. Flexibility
WebSocket.io is flexible and can be integrated with various frameworks and libraries. It also supports namespaces and rooms, allowing developers to organize their code and manage connections more efficiently.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+2.jpg)

##
# Getting Started
To get started with WebSocket.io, you'll need to have Node.js installed on your machine. If you haven't already, you can download and install Node.js from [nodejs.org](https://nodejs.org/).

### Installation
Once you have Node.js installed, you can install WebSocket.io via npm, the Node.js package manager. Open your **terminal** and run the following command:
```
npm install websocket.io
```

### Creating a Simple WebSocket SERVER
Let's start by creating a simple WebSocket server using WebSocket.io. Create a new file named **server.js** and add the following code:
```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

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

  socket.on('message', (message) => {
    console.log('Received message:', message);
    socket.send('Hello from server');
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});
```
In this code, we create a WebSocket server that listens on port 3000. When a client connects, we log a message to the console. We also listen for incoming messages from the client and respond with a greeting message. Finally, we handle the disconnection event by logging a message to the console.

### Creating a Simple WebSocket CLIENT
Next, let's create a simple WebSocket client to connect to our server. Create a new file named **client.html** and add the following code:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <h1>WebSocket Client</h1>
  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      console.log('Connected to server');
      socket.send('Hello from client');
    };

    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
    };

    socket.onclose = () => {
      console.log('Disconnected from server');
    };
  </script>
</body>
</html>
```
In this code, we create a WebSocket connection to our server running on **/localhost:3000**. When the connection is established, we send a message to the server. We also listen for messages from the server and handle the disconnection event by logging messages to the console.

### Running the Server and Client
To run the WebSocket server, open your terminal and execute the following command:
```
node server.js
```
Next, open **client.html** in a web browser. You should see messages being logged to the console, indicating that the client and server are communicating via WebSockets.

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+3.jpg)

##
# Advanced Features of WebSocket.io
WebSocket.io offers several advanced features that can help you build more sophisticated real-time applications. Let's explore some of these features.

### Namespaces
Namespaces allow you to create separate communication channels within a single WebSocket connection. This can be useful for organizing your code and managing different types of messages.

Here's an example of how to use namespaces in WebSocket.io:
```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

const chat = server.of('/chat');
const news = server.of('/news');

chat.on('connection', (socket) => {
  console.log('New client connected to chat namespace');

  socket.on('message', (message) => {
    console.log('Received message in chat namespace:', message);
    socket.send('Hello from chat namespace');
  });

  socket.on('close', () => {
    console.log('Client disconnected from chat namespace');
  });
});

news.on('connection', (socket) => {
  console.log('New client connected to news namespace');

  socket.on('message', (message) => {
    console.log('Received message in news namespace:', message);
    socket.send('Hello from news namespace');
  });

  socket.on('close', () => {
    console.log('Client disconnected from news namespace');
  });
});
```
In this example, we create two namespaces: /chat and /news. Clients can connect to these namespaces separately, and messages are handled independently within each namespace.

### Rooms
Rooms allow you to group clients within a namespace. This can be useful for creating chat rooms or broadcasting messages to specific groups of clients.

Here's an example of how to use rooms in WebSocket.io:
```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

const chat = server.of('/chat');

chat.on('connection', (socket) => {
  console.log('New client connected to chat namespace');

  socket.on('joinRoom', (room) => {
    socket.join(room);
    console.log(`Client joined room: ${room}`);
    socket.send(`You have joined room: ${room}`);
  });

  socket.on('leaveRoom', (room) => {
    socket.leave(room);
    console.log(`Client left room: ${room}`);
    socket.send(`You have left room: ${room}`);
  });

  socket.on('message', (message) => {
    console.log('Received message in chat namespace:', message);
    chat.to(message.room).send(message.text);
  });

  socket.on('close', () => {
    console.log('Client disconnected from chat namespace');
  });
});
```
In this example, clients can join and leave rooms within the **/chat** namespace. Messages sent by clients are broadcast to all other clients in the same room.

### Broadcasting
WebSocket.io allows you to broadcast messages to all connected clients or to specific rooms. This can be useful for sending notifications or updates to multiple clients simultaneously.

Here's an example of how to broadcast messages in WebSocket.io:
```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

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

  socket.on('message', (message) => {
    console.log('Received message:', message);
    server.clients.forEach((client) => {
      if (client !== socket && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});
```
In this example, messages received from a client are broadcast to all other connected clients.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+4.jpg)

##
# Error Handling and Debugging
Effective error handling and debugging are crucial for building robust real-time applications. WebSocket.io provides several mechanisms to help you manage errors and debug your applications.

### Error Handling
You can handle errors by listening for the **error** event on the WebSocket server and client:
```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

server.on('error', (error) => {
  console.error('WebSocket server error:', error);
});

server.on('connection', (socket) => {
  socket.on('error', (error) => {
    console.error('WebSocket client error:', error);
  });
});
```
In this example, we listen for the **error** event on both the server and the client, logging any errors to the console.

### Debugging
WebSocket.io provides a built-in debugging mechanism that can be enabled by setting the **DEBUG** environment variable. This can help you track down issues and understand the flow of messages in your application.

To enable debugging, set the **DEBUG** environment variable to **websocket.io**:
```
DEBUG=websocket.io node server.js
```
This will enable debug output for WebSocket.io, providing detailed logs of connections, messages, and events.

![image-5](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+5.jpg)

##
# Best Practices for WebSocket.io
To make the most of WebSocket.io, consider the following best practices:
1. **Use Secure WebSockets (WSS):** For production applications, always use secure WebSocket connections (wss://) to protect data transmitted between the client and the server.

2. **Implement Authentication:** Implement authentication mechanisms to ensure that only authorized clients can connect to your WebSocket server. This can help prevent unauthorized access and improve security.

3. **Handle Connection Loss:** Implement mechanisms to handle connection loss and reconnection attempts. This can help maintain a seamless user experience even in the event of network issues.

4. **Optimize Performance:** Optimize your WebSocket server for performance by minimizing message size, reducing the frequency of messages, and efficiently managing connections.

5. **Monitor and Log:** Monitor your WebSocket server and log important events, such as connection attempts, errors, and disconnections. This can help you identify and address issues more quickly.

![image-6](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+10+-+Image+6.jpg)

##
# Conclusion
WebSocket.io is a powerful and flexible library that makes it easy to implement real-time communication in your web applications. By leveraging its simplified API, advanced features, and best practices, you can create robust and scalable real-time applications that enhance user experience.
Whether you're building a chat application, a live sports update system, or a collaborative tool, WebSocket.io provides the tools you need to get started and succeed. Embrace the power of real-time communication and unlock new possibilities for your web applications with WebSocket.io.


An In-Depth Guide to WebSocket.io: Real-Time Communication Made Easy


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+9+-+Image+1.jpg)

Koa.js is a backend framework for Node.js. It is used for developing backend servers. You can learn more about this in one of our [previous blogs](https://ark-am.com/blog/koa-js).

In this article, we will learn the step-by-step guide on how to implement the different HTTP endpoints via the Koa.js framework. However, before going further, you will need to know the fundamentals in [Node.js](https://nodejs.org/en) and [Npm packages](https://www.npmjs.com/).

##
# Setting Up Koa.js
#### Step 1 - Initialize Koa.js
First, you will need to initialize our project with Koa.js. In order to do that make sure you have the [latest version](https://nodejs.org/en/download) of Node.js installed in your system.

#### Step 2 - Create a Folder
Create a folder with the name of your project. Inside that folder, create a "package.json" file with the following content:

```
{
  "name": "koa-http",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.15.2"
  }
}
```

Now, in the same project folder, create a "index.js" file containing the following code:

```
const Koa = require('koa')
const app = new Koa()

app.use(async (ctx) => {
  ctx.body = 'Welcome to Ark-am tutorial!'
})

app.listen(3000)
```

Now it is time to install the dependencies for that type npm install from the terminal. Make sure you are in the same folder via your terminal where your package.json file is located; cmd or bash or zsh. Type "npm start" in the terminal, where the directory is still in the project folder.

#### Step 3 - NPM Install
Install the dependencies for that type of **/npm install** from the terminal. Make sure to be in the same folder within the terminal where your package.json file is located.

Now type **"npm start"** from your terminal. This should give you the output on your browser at the following URL: [http://localhost:3000](http://localhost:3000). The output should be the Hello World text, which indicated you have successfully installed the Koa.js package in your system.

```
Hello World!
```

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+9+-+Image+2.jpg)

##
# Implementation of HTTP Methods
#### Step 4 - GET, POST, PUT & DELETE
Now we are going to add GET, POST, PUT & DELETE endpoints via the koa-router. It is the router middleware for Koa. Insert the following code in the index.js file.

```
const Koa = require('koa')
const Router = require('koa-router')
const bodyParser = require('koa-bodyparser')

const app = new Koa()
app.use(bodyParser())
const router = new Router()

// GET method
router.get('/api', async (ctx) => {
  ctx.body = 'GET request received successfully.'
})

// POST method
router.post('/api', async (ctx) => {
  ctx.body = 'POST request received successfully.'
})

// PUT method
router.put('/api/:id', async (ctx) => {
  const { id } = ctx.params
  const requestBody = ctx.request.body
  ctx.body = {
    message: `PUT request received for resource with id ${id}`,
    requestBody: requestBody,
  }
})

// DELETE method
router.delete('/api/:id', async (ctx) => {
  const { id } = ctx.params
  ctx.body = `DELETE request received for resource with id ${id}`
})

app.use(router.routes())
app.use(router.allowedMethods())

app.use(async (ctx) => {
  ctx.body = 'Welcome to Ark-am tutorial!'
})

app.listen(3000)
```

#### Step 5 - Testing HTTP Methods
#### GET
To test the GET method, go to your locahost URL, [http://localhost:3000](http://localhost:3000), in order to receive the following response:

```
GET request received
```

#### POST
To test the POST method, we can use [Postman](https://www.postman.com/). We can create a new HTTP post method like this one.

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+9+-+POST.png)

#### PUT
The PUT method is used to update any specific resource at the server. We can test this on [Postman](https://www.postman.com/) as well. Here we are giving the ID of 234 at the URL, but any numerical ID can be used, and applying some basic data on the body to update. See image below.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+9+-+PUT.png)

#### DELETE
We use this method to delete something from the server. In order to delete, we need to pass the associated ID. However, no data from the body is required, such as the above PUT request.

![image-5](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+9+-+DELETE.png)

##
# Summary
From this blog, we discussed the 4 most important methods that are frequently used day-to-day. There are more methods, however those can be similarly implemented. If you struggling to understand and/or utilize this method, feel free to [contact us](https://ark-am.com/contact). 

Thank you and happy learning.

HTTP Method: Implementation with Koa.js


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+8+-+Image+1.jpg)

Stripe is a payment bridge between clients and businesses. Through the bridge clients can pay to the business online. It also helps the business to accept payment in various methods. Stripe can act like an accountant for the business which can handle all the transaction processings behind the scene. For these things stripe takes a small charge on each transaction.

Stripe accepts various payment methods like Credit and debit cards, bank transfer or digital wallets like Apple pay or Google pay.

##
# Why should we use stripe payment?
Doesn’t matter if you have a small business or a large stripe is always a good option for you. Stripe gives a smooth payment processing experience for business and customers alike. It provides many ways of integration methods for various platforms. There are some key reasons why you should choose stripe payment for your business.

## Easy Integration with online business
Doesn’t matter if your business is a website or mobile app, stripe provides an easy way of integration for it. 
If it's a website it doesn't matter if you are using a coding solution or no code solution, Stripe can handle both situations very easily to integrate with it. For custom sites Stripe provides API for their services to integrate easily from various programming languages like Node.js, PHP and many more.

## Secure payment and fraud detection
Unauthorized access is not possible at all for stripe payment. While setting up stripes for each business, the owner can take various configuration settings so that the fraud can be prevented during unusual activity. Also robust stripe security takes care of many burdens from business owners so that the business can focus on their own works, and be worry free for security and frauds.

## Easy way to get business money directly at bank
After the customer purchases something via the Stripe. Business owners can directly transfer money to their bank account. This is a very easy step.

This process also can be automated. There is no need to do a manual deposit to the bank account. The stripe system can take the burden out for processing delays & send your money where it needs to be.

## Reach global customers easily
If you want to expand your business from domestic to international then Stripe is a very good choice. Because Stripe can support multiple currencies worldwide with international cards. 

For example, the platform like ShouldertoCryOn initially started for the USA only but when eventually it will hopefully by the will of Allah reach global clients, it can easily get the smallest payment possible via Stripe.

## Payment analytics
If you want to keep track of your business, then Stripe is a ready to go solution. Because it allows users to gain insights for their incoming transactions.

If someone needs to keep track separately then it's a complicated and error prone task. But by using the Stripe solution it is possible to save some time.

![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+8+-+Image+2.png)

##
# Stripe safety
Where there comes the financial matter, the first matter that can come in someone's mind is how is the security there? Certainly, Stripe is very good at maintaining its security. Both the business owner and the end user can trust Stripe without any hesitation.

There are many security measures that are taken by Stripe. Some of them are known and some are maybe only known by the Stripe internal team. Some of the public available informations are discussed below.

## Compliance by PCI
If any company wants the PCI compliance then they must follow the best practices to protect the data provided by the card holders. So we can understand that Stripe must have ensured all the best practices which were required to get PCI compliance.

## Two-Factor Authentication or 2FA
To make the users account extra secure Stripe offers two factor authentication. By using this feature users can easily add an extra layer of security to their account to prevent unauthorized access.

## Bug Bounty
Bug Bounty is a program where security researchers or developers can find bugs in Stripe systems and can report to them so that Stripe can take action or fix that vulnerability. By doing so it can fix unexpected security issues missed by stripe developers while developing the system. 

Stripe in their documentation ( https://stripe.com/docs/security#disclosure-and-reward-program ) says about this program.

## Tokenization
Stripe uses the tokenization system to ensure high security for card information. For example, when a user first adds their card information Stripe replaces their card information via a unique token. So, for recurrent transactions Stripe can use this token.

If somehow the data gets into someone's hand, they will not get the actual card information, instead they will get a useless token which they can’t do much with.

These above are just some popular steps that Stripe took. But there are many more security features available by which you can easily rely on their security precautions.

![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+8+-+Image+3.png)

##
# Ways of, integrating Stripe
Stripe provides different ways of integration. Some methods are discussed as follows.

## Payment Links
If you don’t have any website or app but if you still want to accept payment online, then you can definitely use Payment links provided by Stripe. For this you do not have to write any coding or build anything, you will just have to set up your account and go through the process of accepting payments.

## Stripe Checkout
This is useful if you already have a website where you want to accept the payments. With stripe checkout you can create customizable forms with doing less coding.  If you don’t want to put the payment form in your website, then you can of course redirect the users from your website to a stripped hosted payment page. 

Doesn’t matter if it's a one time payment or subscription both is possible with Stripe checkout.

## Stripe Web Elements
If you don’t want ready to go solutions like Payment links or even if you don’t want to just do little customization with Stripe checkout but you want to fully customize each element of the payment flow, then Stripe element is for you. (https://stripe.com/payments/elements)

It requires a deep level of engineering. This is highly customizable, also it takes a good amount of time if there is a complex design to implement.

Additionally if you have a mobile application then you can also use Stripe Mobile Elements to build custom UI. (https://stripe.com/docs/payments/mobile)


![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+8+-+Image+4.jpg)

Overall, Stripe simplifies the process of accepting payments online, making it an attractive choice for startups, small businesses, and large enterprises alike. Its user-friendly interface, extensive documentation, and robust features have contributed to its popularity in the online payment processing industry.

Why use Stripe?


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+7+-+Image+1.jpg)

# Overview
Javascript Object Notation (JSON) or commonly known as JSON Web Token (JWT) is an unmodified token mechanism to verify the user with the server. This last sentence has a few concepts that need to be further broken down and also is the main reason as to why we chose it for our login authentication process on [ShouldertoCryOn](https://shouldertocryon.health). We will also discuss the advantages and vulnerabilities in using JWTs later in this article.

Firstly, an unmodified token mechanism is a simple token-based authentication system where there is no need for additional modifications and complexities. A token-based authentication is when an application or system uses tokens to verify users. Instead of a username and password approach, an unique token is generated to serve as proof of the user’s identity. This is usually achieved via email or text message where a 4 to 6 digit alpha-numeric string of characters is sent to the user, after which the user can then input that generated code during the log-in portal for validation. This token then becomes signed by the server and grants access. 

To further delve into what is an “unmodified” token, it is essentially a token that is not able to be modified by a third party or middleman. If this token is modified, then it becomes invalid, unable to be used and a new token needs to be created.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+7+-+Image+2.png)

##
# Structure of JWT
JWT consists of 3 parts; header, payload, and signature. There could be other sections in the token, but these are the mandatory or essential components. 

## Header:
The header typically contains two parts; the type and the signing algorithm. Below is an example of what is typically inside the code:
```
{
  “alg”: “HS256”,
  “typ”: “JWT”
}
```
## Payload:
The payload mainly contains the claims, which carry objects about the user, such as the name, date-of-birth, or any other fields entered during the session. Below is an example:
```
{
  “name”: “John Doe”,
  “id”: 01234,
  "dob”: “23-07-21”
}
```
## Signature:
The signature is created by taking the header, the payload, a secret key and the specific algorithm assigned to the header. This is a unique code used to verify the integrity of the token. See examples below:
```
{
  SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
}
```
or
```
{
  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiAiMTIzNDU2Nzg5MCIsICJuYW1lIjogIkpvaG4gRG9lIiwgImlhdCI6IDE1MTYyMzkwMjJ9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
}
```
<p className="pulse"> 
  Why do you need to understand the structure of JWT? Simply because a JWT allows you to verify the content that has not been tampered and it is also a good way to transmit information between two parties; almost like with the local mailing service where the letter or package has to be signed by the recipient with a valid ID. 
</p>

##
# Why is JWT better than a Session Creation?
There are many advantages to using a Javascript Object Notation Web Token, but the main benefits are as follows:
- JWTs are stateless, therefore the server does not need to store the signed JSON token for the client. For session creations on the other hand, the server has to check each instance via its ID and must store this information.
- The server can scale without any hesitation due to not needing to store the session information.
- This further improves the performance of the server side because it does not have to constantly go through the validation process.
- One server generated token can be used on other servers, which can be achieved using a secret key within the token’s signature. This is an arduous process through a Session and cannot be easily implemented. 

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+7+-+Image+3.png)

##
# Vulnerabilities in JWT
1. None Attack: The JSON web token uses various algorithms like HS256, HS384. If the token does not use any algorithm, then it can be under attack.
2. Leak of the Secret key: If anyone can get the key then they can sign a new JWT token of their own. So the server must be secure to store the secret key.
3. Not giving any expiry token: Each token must have its expiry date. Otherwise it is not possible to limit a user to give only a certain period of access to some resource.

After reading this blog, you can understand why we chose this path for [ShouldertoCryOn](https://shouldertocryon.health). Despite the vulnerabilities and despite the other authentication processes, our main priority was to keep the code lean and not waste time on building an application that will inevitably be revised and rewritten. Therefore, we ensure good practices, deploy professional standards, and use sound judgment whenever we are providing a service or producing a product. Javascript Object Notation Web Tokens will suffice for now.

Thank you.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+7+-+Image+4.jpg)

JSON Web Tokens (JWT)


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+6+-+Image+1.jpg)

In modern times, various technologies are used to establish a connection between the servers and clients (end users). Two such technologies are WebSockets and Webhooks.  

# Short Overview
**WebSocket** <br/>
It is a communication protocol to connect with servers of any website or mobile application. By using this, clients (such as a browser) can establish a single long-lived connection with the server. It allows the client and the server to efficiently exchange data. Moreover, it is bidirectional where both the client and server can send and receive data.<br/>
You can read our [previous blog](https://ark-am.com/blog/what-is-websocket), for more information.<br/>

**Webhook** <br/>
This is a useful method of communication between two servers. One server sends a particular data package about an event that happened to the other server. This data can now be used for other purposes. Unidirectional by nature, where the sender notifies the receiver.<br/>
For more information, feel free to read our [first blog](https://ark-am.com/blog/what-is-webhook) post.

**Real-Time vs. Event-Driven** <br/>
<p className="pulse">WebSockets are real-time, suitable for instant updates and interactive applications.<br/>
Webhooks are event-driven, used to notify external systems about specific events once that event has occurred.</p>

**Connection Type** <br/>
WebSockets are persistent, long-lived connections.<br/>
Webhooks are stateless, short-lived, and initiated by the sender. <br/>
We can discuss in more detail about stateless, stateful and persistent connections on a future blog. 

![Image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+6+-+Image+2.png)

##
# What Should You Choose?
Depending on the project requirements and the technology’s use, more questions need to be answered before choosing to implement a WebSocket or a Webhook.<br/>
**Do you need to automate a task based on specific events only?** If yes, then Webhook is a good choice.<br/>
**Do you need real time communication?** If yes, then WebSocket is the best route.<br/>
**Do you want to make the connection between server and the client persistent?** If yes, then again, a WebSocket would be the best option.<br/>
**Do your endpoints allow asynchronous operation?** If yes, you can use Webhooks and it is asynchronous by nature.<br/>
**Does your project need rapid complex interactivity?** If yes, WebSocket does complex interactivity with low latency.<br/>
**Do you have to customize the data on a specific event before sending it to an endpoint?** Webhooks are highly customizable.<br/><br/>
See below for further details on all the above questions.

##
# For and Against
## Pros for WebSocket
-	Real time communication: Applications that require real time data updates that can be achieved by implementing Websockets. Websockets enable real time data exchange between server and client ( like browsers ).
-	Low latency: The initial connection request to establish connection between browser and server is a bit large, after that all the data transfers between server and client are very light. Because these don't need to send all the data like HTTP requests on per request. It reduces the delay in websocket connection.
-	Bi directional: To make an app interactive it is very important to share data between each other at the same time. Websocket allows bidirectional data transfer between the server and the client. So, each other can share data at any given time.

## Cons for WebSocket
-	Complexity: It is a bit more complex to implement Websockets than HTTP. Because it requires some additional work both at server and client side.
-	State Management: To scale the websocket servers, we need to be careful about stateful Websocket connections. If state is not shared or managed between all the servers it will be not scalable at all.
-	Not optimized for all kinds of data: Data like audio and videos is not suitable for websocket. The text based data is more preferable for websocket use case.

![Image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+6+-+Image+3.jpg)

## Webhook Pros
-	Real time updates: Webhooks allow real time updates based on some events. This is important in many scenarios like data changes or some crucial update that happened which can be notified via webhook event to another server.
-	Low cost: For getting updates about any particular event, the traditional way was to simply frequent polling or perform manual checks. However, if Webhook was implemented, then it only sends data when there is an actual update. This reduces the bandwidth cost like in other methods.
-	Customizable: In many events users can define which event triggers Webhooks. And they can also specify the data structure before sending any data.

## Webhook Cons
-	Security: As mentioned in our [first blog](https://ark-am.com/blog/what-is-webhook), webhook endpoints are commonly not exposed, this is because the developers think like they didn’t publicly share the endpoint. But in some cases these endpoints are exposed if unexpected security risks arise.
-	Scalability: Managing a large number of endpoints with different kinds of events is challenging. 
-	Error on failure: If the Webhook system fails to deliver a request to the endpoint, there is a need to resend the request. For this custom implementation is required.


Use cases for WebSockets and Webhooks


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+5+-+Image+1.jpg)

# Introduction
WebSocket is a communication protocol to connect with servers of any website or mobile application. A communication protocol is a system of rules that allow two or more entities to transmit information through various measures. These are a set of governed rules, syntax, semantics, and synchronization of communication, all of which can be implemented by the combination of both hardware and/or software. Some examples of WebSockets are real-time chat messaging, online/offline status, activity updates and notifications.

To further elaborate on this topic, WebSockets maintain an open connection between the client and the server. Using a PING/PONG mechanism, the server sends a PING packet to the client, then the client’s browser sends a PONG packet back to the server. If the server does not receive the PONG packet within a specified time frame, then it will invoke another set of protocols or close the connection. This is a better approach than simply relaying the packet without waiting for the response.

![image-pingpong](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+5+-+Image+2.png)

##
# Benefits
Like we mentioned above, WebSockets keep the connection active between the server and the client. Below is a list of benefits from this use case scenario:
-	Real time communication. Both the client and server can communicate without any interruption at the same time, such as a full duplex communication.
- New data can be pushed to all the connected clients from the server, as soon as the data has arrived. This is called server push, which is useful because the client does not have to constantly check for data updates. 
- Due to the low latency, the delay of each data transfer between client and server is quicker.
- WebSockets can be secured with TLS/SSL (Transport Layer Security / Secure Sockets Layer) encryption. Sensitive data can also be easily transferred.

##
# HTTP & WebSockets
HTTP (Hypertext Transfer Protocol) is a communication protocol used in browsers, much like a WebSocket. There are some key differences between them as discussed below:

![image-comparison_table](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+5+-+Image+3.png)

##
# Scalability 
The WebSocket protocol has been in existence since 2008. With support and new improvements, this technology is still competitive in 2023. Scalability is a key factor when developing an application. Typically, REST (Representational State Transfer) APIs (Application Programming Interface) are used because RESTful HTTP are stateless and can be easily scaled. 

Since WebSockets are stateful, meaning it has perfect memory or knowledge of the previous requests, this approach becomes memory intensive, and the server bears a considerable burden for the functionality of the application. Therefore, adding more powerful servers may not be a favorable practice. One workaround is to create additional components in the process, such as a load balancer. A load balancer evenly redirects traffic to available servers if the previous server is overloaded or defective. This is when request timeouts are configured, such that if the request to the server is not answered within 5 seconds, then another request is made to a different server. Once more, deploying multiple servers may not be a favorable practice, but if the servers are performing numerous requests from numerous different applications, then the cost to benefit ratio becomes satisfactory.

![image-load_balancer](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+5+-+Image+4.png)

## 
# Conclusion
We used this technology on the [ShouldertoCryOn](https://shouldertocryon.health) (web)app. The messaging segment in the application uses a WebSocket to seamlessly allow users to chat with one another. Furthermore, notifications and alerts also use a WebSocket. The WebSocket enables the communication protocol to alert the user, instead of refreshing the page or reloading the app, thereby creating a better User Experience (UX). If you have any confusion about using this technology for your next project, feel free to [contact us](https://ark-am.com/contact). 

What is a WebSocket?


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+4+-+Image+1.jpg)

# Introduction
Koa.js (Koa) is a Javascript framework for Node.js, where Node.js is a cross-platform, open-source server environment that can run on MacOS, Windows, Linux, and Unix. Koa was developed to make life easier when writing scalable server-side web applications. The same team that created the Express.js framework, built Koa but with an alternative philosophy. That said philosophy was to build an un-opinionated framework, allowing the developers freedom to structure their code in their manner and build a more robust foundation for web applications and APIs (Application Programming Interface).

##
# Benefits
One of the main reasons why Ark-am used Koa is due to its middleware architecture. Middleware architecture executes code in sequence for incoming HTTP (Hypertext Transfer Protocol) requests. This enables developers to build modular and reusable components for applications, thereby adding functionality on a needs basis. Moreover, the incoming HTTP requests use modern Javascript features such as async/await functions. These functions make writing asynchronous code more intuitive and less error prone, keeping the logic on the server-side less complex and more scalable. 

##
# Understanding Koa.js Middleware
Thinking from an analogy point of view, picture the assembly line in a factory. Raw materials enter at one end and finished products emerge at the other end. In between, several stations perform specific tasks on the material, one after the other, gradually transforming it into a finished product. Koa's middleware is very much like this assembly line. It's a series of processing stations, each handling a specific task on the incoming HTTP data.

Another analogical example, imagine you are ordering a sandwich online. You click on the ingredients you want, and this selection (your HTTP request) is passed through various middleware functions: one checks the availability of ingredients, another calculates the price, and a third organizes delivery. All these functions are interlinked and form a streamlined process. This is what Koa's middleware architecture is all about - a chain of functions where each link has a specific role.

![image-sandwiches](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+4+-+Image+2.png)

##
# Koa.js Vs Express.js
You might wonder about the differences between Koa.js and Express.js, especially since both were created by the same team. To use travel as an analogy, if Express.js is like a guided tour with a pre-planned itinerary, Koa.js is like backpacking with a map and compass.

Express.js comes with a lot of features out of the box and has a more defined structure. It's like a guided tour where your path is mostly set for you. Whereas Koa.js is much more flexible and minimalist. It gives you the basic tools (the map and compass), but leaves the route entirely up to you. This flexibility allows developers to tailor their applications more precisely according to their needs.

![image-travel](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+4+-+Image+3.png)

##
# Conclusion
All in all, Koa.js is like an advanced toolbox for web developers, offering a range of modern, efficient tools for building web applications. It has a unique and flexible design that allows developers to construct their applications exactly as they envision. Whether you're looking to build a small, lightweight application, or a large, high-performance one, Koa.js has the tools and the flexibility to make it happen.


An overview on Koa.js


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+3+-+Image+1.jpg)

# The purpose behind React JS in Front-End Development
React JS (React) is a JavaScript library which was developed by Facebook and released in 2013. It is used to build User Interfaces (UI) in web applications. Although it can also be used to build desktop applications by incorporating other frameworks such as Electron JS, the focus behind this library is to deploy fast and scalable UI.

So why do we need React libraries to build UI? Can’t we just build it with regular HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)?

Short answer, **Yes**.

Long answer, **No**.

TLDR (**too long didn’t read**) answer, who has the time to write extensive code for just one project. Reduce, reuse, and recycle the code.

##
# Why is React a library and not a framework?
We can build a UI with regular HTML, CSS, and JavaScript. However, the React library provides many more functionalities and ultimately, streamlines the workload to make it easy. See our previous blog, [Tailwind CSS](https://ark-am.com/blog/tailwind-css-for-modern-development), as an example behind this explanation. Furthermore, we can create stylings for web pages using CSS. However, instead of writing extensive lines of code, we can use frameworks like Tailwind CSS, making the code concise, structured, and most importantly, fast.

In the software development industry, there are two technological approaches when developing code: frameworks and libraries. A library is a set of additional components or code that was previously written and then it is requested by a program. It can be modified in its own way based on the requirements from the project. On the other hand, a framework is a library that does not possess any finished functions, but rather it provides a blueprint to build projects. 

<p className="pulse"> 
  In other words, imagine a library in terms of a ‘room containing books’, where the books are a set of completed functions ready to use off the shelf. Whereas frameworks are the shelves and cataloging system that hold and categorize the books, a structured and organized approach to build projects.
</p>

The React library can provide us with the above mentioned beneficial utilities for Front-End Development. For example, in the modern version of React, they provide a useful hook to easily perform sophisticated operations; see our blog on [Webhooks](https://ark-am.com/blog/what-is-webhook) as an expansion on this notion. The outcome is by and large the same, but the only difference being time and effort.

Taking it back to a ‘room containing books’ analogy, we can write the words on the pages of each book, then build the shelves that store the books and finally deploy them for each individual project. Not only does this take time but an immense amount of effort, especially for every single assignment. Instead, we are now able to deploy code using a mix-match bundle or as a coherent package, reusing components or code from various sources based on our needs.

<p className="pulse">
  Now, taking the analogy one step further. Imagine if you needed a book but new information came out that only required one additional page. Instead of rewriting the entire book, you would simply add that page onto the book you possess; components added onto the project. Furthermore, imagine if there was no need for the pages you never read or used. In that case, simply take them away and thereby keeping the book slimmer and lighter; less data for storage, making the components lean.
</p>

This is hard to imagine in the conventional sense, but an analogy is a comparison of two things; may not be the best comparison, but a comparison nonetheless.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+3+-+Image+2.jpg)

##
# Most useful feature of React
In the React library, there are many useful features to make developing easier and more efficient. Below are some of the key features:

- **Component-Based**: This is one of the main attributes which is incorporated on their official React Library website. Due to React being component based, this library allows people to build applications in a modular way. That is why it is easy to reuse components throughout the application.

- **Virtual DOM** (Document Object Model): This is an important core feature from the React library and a difficult topic to comprehend. In short, whatever we see as HTML on a website is traditionally Real DOM. Instead of creating Real DOM, React uses Virtual DOM to avoid expensive Real DOM manipulation. A topic we can discuss further on a future blog.

- **Server-side rendering**: When content on the web page is rendered on the server and not the browser using JavaScript. This feature improves the Search Engine Optimization (SEO) of an application.

- **State Management**: It is a process for managing the data that the components need in order to render. This is easy to integrate with React applications, which is very helpful for large applications to pass data throughout the program.

- **Performance**:Many people love React for this reason. For instance, if we compare it with Angular, then they perform a two-way data binding and use Real DOM. However in React, they use a one-way data binding process and use Virtual DOM. Also the size is much smaller when an application is built.

- **Community support**: Although every active library and framework provides community support on its development, from our point of view, React is very much ahead and has extensive community resources, such as System Developer Kits (SDK), blog posts, glossary, etcetera.

These are not the only benefits of the React library. If we dive deeper, we learn examples such as JSX (Javascript XML), a method to easily write HTML in React, or Testing, a library set to help test React components without relying on their implementation details and many other examples which we can discourse on a future blog.

##
# Conclusion
Our approach to building the [Ark-am website](https://ark-am.com/) was based on the above information. We wanted a website that was lean, responsive, and modern. Using React, we were able to build reusable components throughout the site which were based on our needs. Using Next.js, we were able to leverage off the framework and allow for customizability. Not only is Next.js easy to integrate into React, but by combining the two, we were able to benefit from the Server-Side Rendering and attain a more responsive website. Other key factors, such as State Management, or Component-Based code also contributed to our decision.

With a deeper understanding, React is a powerful library at our disposal. For beginner developers, React is a very good choice. For senior developers, React requires less keystrokes and allows them to efficiently build complex projects. There is a lot to learn in the React ecosystem and we recommend you get started as soon as feasible.

Thank you and happy learning.

React in real world application


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+2+-+Image+1.jpg)

# Why use Tailwind CSS?
Simply stated, [Tailwind CSS](https://tailwindcss.com/) is a Cascading Style Sheet (CSS) framework, which aids in a faster and easier development in User Interface (UI) components. It is not the first or the most used CSS framework, however there are great advantages in deploying this framework.

##
# Overview
Traditionally, one would need to write individual lines of code from scratch in the CSS library in order to create the layout of the UI. Such a layout could be anything from a web page to a mobile application to a proprietary software.

Writing these lines of code from scratch can not only consume time but data, and the CSS library file can become quite large in Megabytes. This is where Tailwind CSS shines. Having a smaller file size footprint (typically around 10 Kilobytes) allows for faster downloads and a more responsive experience. The reason behind such a small footprint is due to minification, compression and generating only the CSS code needed for the project.

Furthermore, the Tailwind CSS library is also highly customizable and allows for dynamic change. This can be accomplished by adding a parameter in the HTML (Hypertext Markup Language) element and not needing to invent class names (see example below).

In summary, not only can Tailwind CSS provide a faster, more comprehensive experience, but also allow the developer to adapt and change the code according to the end user.

### Below we will see an example of a regular CSS writing and the same code written in Tailwind CSS.
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <style>
      h1 {
        color: #fff;
        background-color: #000;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-1](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+2+-+example-1.png)

The above code can be written in Tailwind CSS as follows:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-black text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+2+-+example-2.png)

And also if we want to customize more in Tailwind CSS, we can do it as follows:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-orange-800 text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+2+-+example-3.png)

> Here above by just adding **bg-orange-800** in the class, we can change the background color from black to orange.

##
# Advantages of Tailwind CSS
As mentioned earlier, Tailwind CSS is not the only framework, but the rise in popularity is a noteworthy factor. Frameworks such as Bootstrap and Materialize are well versed in the web development community. Blueprint was the first CSS framework, which was released in 2007. These frameworks have their individual advantages and disadvantages. We can explore them in more detail on a future blog, but for now, Tailwind CSS is slowly gaining momentum and the following points are the reasons behind the increase in popularity:

- **Ease of use** – With great documentation and community support, learning the syntax becomes effortless; a significant factor as to why developers from all levels are adopting this framework.

- **Low-level API** – Having a low-level Application Programming Interface (API) allows for more detailed control, especially when manipulating functions.

- **Customizability** – Possessing an extensive library where each component is changeable, the fear of being restricted by the framework is of little concern.

- **Performance** – The introduction of just-in-time compiler allows one to generate the style real-time rather than in advance during the initial build.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+2+-+Image+2.png)

##
# Conclusion
As a CSS framework, Tailwind CSS offers a great ecosystem for design and development. From the comprehensive documentation and online support to the customizability and performance levels, this framework has few limitations for those using it for their applications. Hence why we used this for the Ark-am website. We were able to rapidly change components in the UI and adjust the layout for all screen sizes with very little effort.

Tailwind CSS for modern development


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+1+-+Image+1.jpg)

What are webhooks and how do they operate? Essentially, webhooks accept a request from another server, which then validates that request in order to accomplish a certain task. That said task can vary but one component that differs webhooks from polling is the automation factor.

##
# Introduction
Webhooks connect two applications together. Our Ark-am website uses an automated deployment process where we do not deploy our site directly to the server, but rather, we push our application to a code hosting platform, such as GitLab or in our case, Github. So, whenever a new change in the code is pushed to Github, the platform then sends a request to our server to let it know about those changes and thus, a new version should be deployed for our website (see diagram below).

![Image-diagram](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Week+1+-+Image+2.png)

##
# Comparision with Polling
Polling on the other hand is less automated, where the communication between the two applications need constant confirmation for each step.

A great analogy when explaining this concept is like a neighbor asking for sugar. The neighbor knocks on your door (request), asks if you have any sugar (information), and then sends over the sugar (delivery).

Webhooks automate by sending the sugar straight to your house whenever you run low on supply, and this request only needs to be set up once between the two neighbors. Therefore, since only one request is made, users don’t have to send multiple requests in order to acquire the information, thus saving time, steps and data.

##
# Conclusion
One important note to mention is to properly secure webhooks. Due to its automation nature, if any webhooks does not validate the incoming request to perform the task, then this can cause a security breach. We delve more into this topic on a [future blog](https://ark-am.com/blog/WebSocket_Webhook), but for now, we thank you for reading and hope that this has helped in some shape or form.
