I've been working with WebSocket for some of my projects in the past. WebSocket is a technology that allow us to have realtime interaction within a platform. Here I will write about basics of WebSocket and barebone setup to try this technology.

In general I'll write about:

1. Realtime functionality requirement
1. What is WebSocket technology
1. Setting up WebSocket server on Node.js
1. Simple scripts in the browser console to interact with the server in realtime

## Realtime functionality requirement

Think about WhatsApp chat, Telegram chat, or Facebook Notifications. These are features that require realtime interactions where the users of the application expect to send/receive information without delay. There are a few ways we can achieve this.

1. Long polling

 The client ask if there is any new updates to the server. This can be in periodic intervals. Here the client need to handle when to ask for an updates to the server.

1. Server sent events [(MDN link)](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

 Server sent new informations to the client. However the client can't send information to the server (one way communication).

1. WebSocket

 This technology will allow client and server send and receive information (bi-directional).

On some cases we might choose one solution to another. For example when we need notifications for new update it might be better to do **_server sent events_** rather than wiring up WebSocket as the client doesn't need to send information to the server.

## What is WebSocket technology

WebSocket is a techology that allows client and server to send and receive informations through events. These events are fired-up on client side and the server side. The client and server then can handle these events in realtime.

WebSocket connection is initiated with `GET 1.1 UPGRADE` request from the client side, when the WebSocket server accept the request the it will give `101 Switching Protocols` response. After these handshakes that the client and WebSocket server can send and receive data in realtime.

<img
 src="/images/2021-05-09---client-and-websocket-interaction-diagram.svg"
 alt="Web socket interaction"
 width={400}
 height={400}
/>

[(MDN Reference for WebSocket)](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)

## Setting up WebSocket server on Node.js

Here I'll use node and [websocket package](https://www.npmjs.com/package/websocket) to wire-up WebSocket server.

1. Create a project folder

 ```
 mkdir websocket-server
 ```

1. Initialize node project

 ```shell
 npm init -y
 ```

1. Install `websocket` package

 ```shell
 npm install websocket
 ```

1. Create the index file

 ```shell
 touch index.js
 ```

1. Edit the index.js file and create basic webserver

 ```javascript
 const http = require('http');

 const httpServer = http.createServer((req, res) => {
 console.log('we have received a request');
 });

 httpServer.listen(8080, () =>
 console.log('Server is listening to http://localhost:8080')
 );
 ```

 This will create a basic server that we can run using this command:

 ```shell
 node index.js
 ```

 When we try to open `http://localhost:8080` in the browser, the script will log `we have received a request` in the command line.

1. Next lets add websocket server in the index.js

 ```javascript
 const http = require('http');
 const WebSocketServer = require('websocket').server;

 const httpServer = http.createServer((req, res) => {
 console.log('we have received a request');
 });

 httpServer.listen(8080, () => console.log('Server is listening to 8080'));

 const websocket = new WebSocketServer({
 httpServer: httpServer,
 });
 ```

 These will initialize the WebSocket for us using the `websocket` package and wire-it up to our http server

1. Next we'll need to add the WebSocket events handling

 ```javascript
 const http = require('http');
 const WebSocketServer = require('websocket').server;

 const httpServer = http.createServer((req, res) => {
 console.log('we have received a request');
 });

 httpServer.listen(8080, () => console.log('Server is listening to 8080'));

 const websocket = new WebSocketServer({
 httpServer: httpServer,
 });

 let connection = null;

 websocket.on('request', (request) => {
 connection = request.accept(null, request.origin);
 connection.on('close', () => console.log('WebSocket is Closed!'));

 connection.on('message', (message) => {
 console.log(`Received message: ${message.utf8Data}`);
 });
 });
 ```

 These will handle the WebSocket events that we receive from client.

1. To show how the server send the information in realtime lets add a function that trigger periodically to the client.

 ```javascript
 const http = require('http');
 const WebSocketServer = require('websocket').server;

 const httpServer = http.createServer((req, res) => {
 console.log('we have received a request');
 });

 httpServer.listen(8080, () => console.log('Server is listening to 8080'));

 const websocket = new WebSocketServer({
 httpServer: httpServer,
 });

 let connection = null;

 websocket.on('request', (request) => {
 connection = request.accept(null, request.origin);
 connection.on('close', () => console.log('WebSocket is Closed!'));

 connection.on('message', (message) => {
 console.log(`Received message: ${message.utf8Data}`);
 });

 serverSendMessage();
 });

 const serverSendMessage = () => {
 connection.send(`Server send message at ${new Date().toISOString()}`);

 setTimeout(serverSendMessage, 5000);
 };
 ```

 These will send a message with the date every 5 seconds to the client after the WebSocket connection is established.

## Simple script in the browser console to interact with WebSocket server in realtime

To try the WebSocket on the client side we can use browser console DevTools directly without writing any extra html stuff. So this will be pure JavaScript codes using API that are already build-in within the browser.

1. Don't forget to run the WebSocket server in command line:

 ```shell
 node index.js
 ```

1. Open your browser and the DevTools (for Chrome based browser usually we can open by pressing F12 key)

1. Then write this in the console:

 ```javascript
 let ws = new WebSocket('http://localhost:8080');
 ```

 This will initialize the WebSocket on the client side

1. Next lets log the messages that are sent by the Server

 ```javascript
 ws.onmessage = (message) => console.log(`Server: ${message.data}`);
 ```

 This will add an event listener to the `onmessage`, so everytime there is a new message from the server we will log it.

1. Next lets try sending a message from the client

 ```javascript
 ws.send('Hello server, this is from client');
 ```

 You will see the message in the command line. Now we have barebone realtime interactions between client and WebSocket server. You can play with this and send modified texts to the WebSocket server.

1. To end the connections execute this on the browser console:

 ```javascript
 ws.close();
 ```

## Summary

This write-up shows you how to code barebone WebSocket server and interact with it from client side with browser console. Obviously this is not production ready codes. These shows the basics of WebSocket interactions. We'll need to handle a lot more cases when we really want to implement realtime interactions with WebSocket.

For me personally I'd work with library such as Socket.io if I want to implement realtime feature because there are a lot of cases that are covered by the library already. Hopefully this post help you learn something new. Thanks for reading.

Barebone WebSocket with Node and Browser Console


Tahun 2021 mulai hari ini. Tahun lalu banyak capaian, juga tidak-capaian. Saya tidak punya resolusi yang konkret untuk dimulai tahun ini. Hanya saja ada beberapa keinginan yang ingin saya wujudkan.

- Mempelajari framework selain React

Saya sudah lumayan banyak berkecimpung di pengembangan aplikasi dengan basis React. Saya sadar masih banyak yang masih perlu saya sempurnakan. Tapi mungkin perlu beralih di framework lain juga untuk memperluas pandangan. Framework yang lumayan menarik bagi saya adalah Svelte.js. Entah mungkin kalau ada kesempatan situs ini saya rombak dengan Svelte.js

- Aktualisasi intelektualitas

Saya agak sulit mencari istilah yang cocok untuk ini. Tapi pada praktiknya saya ingin menuntaskan draft buku dan video tutorial yang pernah saya inisiasi.

- Belajar investasi lebih jauh

Portofolio investasi saya masih minim lebih banyak di tabungan. Sudah ada rekening saham, reksadana, dsb tapi belum saya maksimalkan. Mungkin tahun ini akan lebih banyak belajar finansial lagi.

- Intermittent fasting

Saya sudah di umur kepala tiga, dan kesehatan sudah tidak seperti dekade sebelumnya. Dari riset yang sudah saya lakukan sesuatu yang sangat besar manfaatnya untuk kesehatan saya yang bisa saya lakukan adalah puasa, mengurangi apa yang saya makan. Dampaknya akan jauh lebih besar dari olah raga (untuk saya saat ini) bila bisa mengimplementasikan dengan baik. Mungkin akan saya coba pola intermittent fasting atau puasa sunah seperti biasa. Mungkin nanti hambatan terbesar adalah mengurangi kopi waktu puasa, soalnya kalau kerja biasa ditemani kopi.

Dan mungkin beberapa yang lain.

Situs ini juga mungkin akan beralih fokus lagi untuk tahun ini. Awalnya situs ini saya desain sebagai catatan personal untuk software engineering yang saya dalami. Mungkin nanti akan saya alihkan fokusnya menjadi protofolio/branding, tuangan-tuangan pikiran, catatan-catatan, dsb.

Bahasa juga awalnya banyak menulis dengan bahasa Inggris karena saya ingin mengasah kemampuan menulis saya dalam bahasa tersebut. Tapi mungkin saya akan banyak menulis lagi dalam bahasa Indonesia, entah lihat nanti mungkin.


Permulaan di 2021

Part of my posts on learning regular expressions

## Match characters occured **zero** or more times

This trips me up. Matching character that occurede **zero** or more times using the star `*`.

```javascript
const yes = 'yattaaaaaa!'
const goodbye = 'tata'
const sheepSays = 'baba'

const taRegex = /ta*/gi

cconst yesResult = yes.match(taRegex)
console.log(yesResult) //will result ["t", "taaaaa"]

const goodbyeResults = goodbye.match(taRegex)
console.log(goodbyeResults) // will result ["ta", "ta"]

const sheepSaysResults = sheepSays.match(taRegex)
console.log(sheepSaysResults) // will result null
```

## Find characters with Lazy Matching

Regex default to greedy matching for example

```javascript
const span = "this is element"
const spanRegex = /<.*>/
const results = span.match(spanRegex)

console.log(results) // will return ["this is element"]
```

the results will return `this is element` because the regex will match the longest string.

If we want to match the shortest string we use question mark `?`

```javascript
const span = "this is element"
const spanRegex = /<.*?>/
const results = span.match(spanRegex)

console.log(results) // will return [""]
```