Immortality – A mission worth pursuing

I recently had a chat with my colleague Ben over the coffee. He discussed his mission for life and why having one is important ( by the way for him it raising children with great characters ). Frankly, although I did always had short-term goals till then but never gave any serious thought to the so-called mission of life. However, the question did keep me restless for a few nights and forced me to give serious thought about what I actually really wanted in my life. Everytime, the thought train stopped at Immortality junction in one form or another. Still, I just ignored it as frivolous thinking. Then this morning, I came across this article by Alex Pearlman and reading it somehow made the pursuit for Immortality more important for me. The first part of this article my brief critique of Alex’s post and the second is my own thought on immortality.

Please do note that these are my personal opinions and not intended to insult/hurt anyone’s sentiment. Also, as I am a neither a native English speaker nor a journalist, please forgive any errors in grammar or language constructs.

I do strongly agree with a lot of Alex’s concerns, especially regarding pro-choice and better healthcare. But I felt a lot of inconsistencies and hidden conflicts in her opinions around Immortality and its artificial connection with the rest of her concerns. If her thoughts were limited only to the political climate in the US, I wouldn’t have bothered. But some of the opinions in her article treaded into the territory of pure science and technology, which I am concerned about.

To begin with, you can’t be choosy which path science and technology would take. Since ages, humans have ventured in different unknown areas and did many questionable (both ethically and morally) experiments to satisfy their curiosity or greed. Humanity owes a lot of its progress to many such inquisitive transgressions, be it the first attempts to dissect human bodies illegally or creating the nuclear bomb. None of such developments were done with socialist ideals of sharing benefits with all or bringing equality. To heck with it, some of these were downright intended for destruction but later tamed for prosperity. Most others were to satisfy personal curiosities (Galileo, Newton, Einstein) sans any altruism or fuelled by selfish individuals/organizations with big bank accounts (think of AI boom fuelled by giants of silicon valley). Though none of them had socialistic agendas, the did bring humanity to the next level.

I believe, development is required on all the fronts, from curing polio globally to finding the cure for death (and anti-vaxxers if possible 😉 ). But enforcing a populist opinion on the rich won’t do any good. Most of them would rather spend these extra billions on some more private jets and islands rather than these humane causes which they aren’t personally affected from. Pragmatically, it would be better if they at least dump on these selfish motive, such as Immortality, which will at least brings humans as a species more nearer to its final victory over nature.

I think it’s the right time now to explain why I personally think the goal of Immortality is vitally important or why I would rather be the misguided idiot as per Alex ( although as I am neither a billionaire nor a transhuman cultist, so perhaps I have an immunity from her all criticism).

As said earlier, this is the last bastion to win over nature. I don’t know about religious people, but for me, death is a dark unknown end. Like a mother who has no surety of future or desire for the unborn inside her, I have no desire of facing such unknown end. As a pro-choice believer, I am also strongly convinced, that every human has the right over their life ( and death) similar to the way a mother has over the life in her. All effort done to achieve it either for altruistic or personal desire is legitimate. Immortality might definitely not cure the personal madness but inhibiting the active research on cancer just because the whimsical President has it wouldn’t make sense too. We might have the choice of abortion, but we are still far away from having a choice over the timespan of our own life. I don’t mean immortality to live compulsorily forever, but still, death should be my own choice, not an unwanted gift. Even from viewpoint of humanity overall, just imagine what would we achieved till now if we had people like Einstein or Marie Curie living till now? Perhaps humanity would have crossed the boundary of Universe and cured all possible diseases. All the knowledge, training, intuition, learning and ideas they had, ended.

In fact, research in Immortality needs more active research and interest. To prove this, I would like to draw parlance from my own profession (Software development). Anyone who is professionally or academically involved in this industry will have a lot of understanding about the multiple areas under this field: Web development, System programming, AI/ML etc. But to a very certain degree, we also know which areas are currently the hotbed for innovation and which are nearly dormant ( I won’t say stagnant as there is always possibilities of improvements, but I would measure the innovation on the scale of the number of unknowns.)
Just to compare, web development is nearly discovered. A newcomer can become expert following certain curriculum and best practices, experience and create awesome products (which benefit humanity). Thus this disease is nearly cured, however, its application is still under active propagation. Then there are fields like AI/ML, which have undergone multiple iterations of active research but still have lots of unknowns. Despite all hype in media, we are still far beyond in achieving real human-like intelligence.
Focusing more on it:

  • Is this field consuming a lot of research time/attention – Check
  • Are a lot of billionaires investing handsomely on it for selfish reasons- Check
  • Will it benefit humanity in the long run – Definitely Check

AI/ML might have gobbled up the resources from the other areas of research in Computer Science, but this hasn’t dampened their progress. Contrarily, they too benefit more from the active research in AI/ML. Equality is not always effective, but synergy is.

Now, compare this with active research in Immortality. It’s a goal which very far from completion. Humanity has found the cure for lot’s of diseases but nature still defeats us in the game of life. Human rights/Equality might be delivered to everyone in due course of time, but it gives us no reasons to abort the progress to find solution for something as known but as certain as death. In fact, I believe it’s the humongous goal which need to be tackled on multiple levels and layers. And what less we have achieved till now has been very hilariously detailed by Alex herself in her article.

According to me, Immortality is a combination following Trinity, in order of importance:

  • Death of death
  • Agelessness
  • Indestructibility

Death of death is definitely the primal goal. Somehow our consciousness, the identity we associate with, should survive. However, that won’t be very useful if what we survive with is a fragile, old body bedridden. So avoiding ageing in nearly as important. Indestructibility is perhaps of the toughest and most elusive of them. Avoiding any destruction to the body made of purely biological materials is too difficult. What good would be immortality if you could be mowed down by a van?

Now, let’s test out what options we have till now over these goals, and see what seems really promising. To begin with, just like Alex, I will right away discard all such funny but useless solutions such as cryonics. Might work for fishes but good luck Disney! Also these are just measure of delay not the actual cure.

Let us consider biological approaches such as genetic mutation. I sincerely believe had we not had so much ethical barricade around it, we would have already achieved both immortality and agelessness by now. There are two ways of approaching the Immortality here:

  • Eliminating all possibilities of diseases (either genetic or post birth)
  • Extension of the telomeres or the time keepers and discovering/eliminating other possible ticking time bombs in our genetics

Great progress has been made on both the ways, with claims such as curing the cancer in near future and mutating telomere lengths. As Alex pointed out, these do seem the most promising. But all the moral/ethical knots around the research in these area needs to be untied to make serious progress. Also, this approach solely won’t give us indestructibility. A minor slit in our throat or accidental fall could still kill us. Also, repair is still an issue. Unless we gain some regenerative powers too like the lizard, we won’t be able to repair any damage done to our body.

Coming to the next approach, Transcendence, or to put it colloquially as Alex, uploading your brain to the machine. I would think over it more seriously. Perhaps, might be because this is what got me interested in Computer Science first place. I always felt the possibility of uploading the human brain to machine achievable in near future. Initial research in neural networks started with mimicking the behaviours of the human neurons but later diverted to pure mathematical/statistical models suitable to our limited computing infrastructure. However, the day is not far when we will be able to unlock all the mysterious patterns of thought and memory in the human brain and emulate them in models suitable for machines. Also, till then I believe, we can take a piecemeal approach. We can look forward to taking up certain biological components, program till we can exactly replicate them mechanically. Meanwhile, we can also focus on developing artificial bodies or vessels with which our artificial selves would interact with the world.

Transcendence thus not only gives the possibility of avoiding the death, but also provides the possibility of Agelessness and Indestructibility. Our minds can then reside in vessels made of materials much resilient then biological material indirectly allowing us to live in more harsher extraterrestrial environments. We might also have some capabilities never thought of such vision/audio reception beyond currently biologically limited bandwidth. Repair would be as easy as replacing new components. It might also help us in traveling far greater distances across the universe, at least up to the speed of light from one vessel on one planet to others. It will also give rise to beautiful and challenging conundrums such multiplicity of our individuality. Moreover, in the long run, it does solve lot’s of current issues of humanity overall be it diseases, lack of space of this planet etc.
However, all such research for Immortality needs active attention, funds and infrastructure. It’s a prodigy which needs a lot of attention but has the potential of far-reaching achievements.

A simple text highlighting component with React

In this post, we would create a simple React component which would allow a user to highlight selected text using a mouse. Also, it would also allow an optional callback function, which will receive the selection details.

Research on existing solutions

It’s always a good idea to search for existing well-tested components which may meet our requirements. After some quick search, all similar existing solutions seem to fall into the following categories:

  1. They accept text to be searched as props thus acting more like search/replace utilities, not allowing dynamic selection using mouse.
  2. They are part of bigger and complicated component libraries thus needlessly increasing dependencies.
    We don’t want both. So let’s create our own solution.

Ironing out the requirements

Our component will support the following props (inputs to the component):

  • text: Text to be shown to the user
  • selectionHandler (optional): A callback function. It will receive an object containing following details about selection.
    • selected text
    • selection start index
    • selection end index
  • customClass (optional): A user-provided CSS class to style the selected text

Component Code

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const propTypes = {
    text: PropTypes.string.isRequired,
    customClass: PropTypes.string,
    selectionHandler: PropTypes.func
};

/**
 * Highlighter component.
 * 
 * Allows highlighting of the text selected by mouse with given custom class (or default)
 * and calls optional callback function with the following selection details:
 * - selected text
 * - selection start index 
 * - selection end index
 */
export default class HighLighter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.text,
            isDirty: false,
            selection: '',
            anchorNode: '?',
            focusNode: '?',
            selectionStart: '?',
            selectionEnd: '?',
            first: '',
            middle: '',
            last: ''
        };
        this.onMouseUpHandler = this.onMouseUpHandler.bind(this);
    }

    onMouseUpHandler(e) {
        e.preventDefault();
        const selectionObj = (window.getSelection && window.getSelection());
        const selection = selectionObj.toString();
        const anchorNode = selectionObj.anchorNode;
        const focusNode = selectionObj.focusNode;
        const anchorOffset = selectionObj.anchorOffset;
        const focusOffset = selectionObj.focusOffset;
        const position = anchorNode.compareDocumentPosition(focusNode);
        let forward = false;

        if (position === anchorNode.DOCUMENT_POSITION_FOLLOWING) {
            forward = true;
        } else if (position === 0) {
            forward = (focusOffset - anchorOffset) > 0;
        }

        let selectionStart = forward ? anchorOffset : focusOffset;

        if (forward) {
            if (anchorNode.parentNode.getAttribute('data-order')
                && anchorNode.parentNode.getAttribute('data-order') === 'middle') {
                selectionStart += this.state.selectionStart;
            }
            if (anchorNode.parentNode.getAttribute('data-order')
                && anchorNode.parentNode.getAttribute('data-order') === 'last') {
                selectionStart += this.state.selectionEnd;
            }
        } else {
            if (focusNode.parentNode.getAttribute('data-order')
                && focusNode.parentNode.getAttribute('data-order') === 'middle') {
                selectionStart += this.state.selectionStart;
            }
            if (focusNode.parentNode.getAttribute('data-order')
                && focusNode.parentNode.getAttribute('data-order') === 'last') {
                selectionStart += this.state.selectionEnd;
            }
        }

        const selectionEnd = selectionStart + selection.length;
        const first = this.state.text.slice(0, selectionStart);
        const middle = this.state.text.slice(selectionStart, selectionEnd);
        const last = this.state.text.slice(selectionEnd);

        this.setState({
            selection,
            anchorNode,
            focusNode,
            selectionStart,
            selectionEnd,
            first,
            middle,
            last
        });

        if (this.props.selectionHandler) {
            this.props.selectionHandler({
                selection,
                selectionStart,
                selectionEnd
            });
        }

    }

    render() {
        if (!this.state.selection) {
            return (
                <span
                    onMouseUp={this.onMouseUpHandler}>{this.state.text}
                </span>
            )
        } else {
            return (
                <span
                    onMouseUp={this.onMouseUpHandler}>
                    <span
                        data-order="first" >
                        {this.state.first}
                    </span>
                    <span
                        data-order="middle"
                        className={this.props.customClass || "default"}>
                        {this.state.middle}
                    </span>
                    <span
                        data-order="last">
                        {this.state.last}
                    </span>
                </span>
            )
        }

    }
}

HighLighter.propTypes = propTypes;

Component Logic

Our challenge here is to get the text which got selected when the user selects a certain portion with the mouse. We use DOM’s window.getSelectionAPI for this. This API is called in the mouseup event. It returns a Selection object with many useful attributes and methods for our selection. The ones which are useful to us are:

  • anchorNode Node in which the selection begins.
  • anchorOffset A number representing the offset of the selection’s anchor within the anchorNode.
  • focusNode The Node in which the selection ends.
  • focusOffset A number representing the offset of the selection’s anchor within the focusNode.
  • toString() The selected text.

The anchor node and anchor offset give us the distance of start of the selection in terms of character. The end of the selection can be determined by adding the length of selection itself (given by toString method on the Selection object). These start and end point are then used to split our original text into three separate spans identified by unique data-attributes:

  • first text before the selection
  • middle selection text (style applied to this span to highlight it)
  • last text after selection

All these key info including endpoints, offsets, nodes, and text portions are kept in the components state. If an optional callback is provided, we call it with an object argument containing selection text and endpoints.

Although quite simpler on the surface, there are following hidden complexities in this selection logic:

  1. After the initial selection, new span nodes get introduced (to mark the highlighted text using CSS styling). These changes introduce new anchorNode/focusNode for each span along with relative offsets. For any further selections, we may then have to do relative adjustments depending on which span we started from using the earlier selection endpoints.
  2. Users might do the selection in reverse order. We then have to do our calculations with response to focusNode/focusOffset (shown in previous snippets). We use DOM’s compareDocumentPosition API (which gives us relative position nodes) along with the difference in the offsets to determine the direction of selection.

Note

There are few alternate ways to do the highlight, including Range.surroundContents API. However, these directly modify the DOM which is discouraged in React. We want to have as limited direct interaction with DOM as possible.

You can find the complete source code here, NPM package here and test it live here.

An Easy and Fun Guide to Redux – Intro and Immutability

Hi!

I must admit that I am quite late to the party, but I am quite enjoying my journey in React/Redux universe. One thing, however, always bugs me: most of the online tutorials about React/Redux are seems like a tour de force of all the packages, tools and concepts in the React/Redux ecosystem. Although, I sincerely respect and admire the effort they put into these but such an approach doesn’t suit me well. I believe people learn in different ways. Some prefer the whole picture approach, while others piecemeal. This guide takes the second approach. In each chapter, we build a layer of concepts, focusing on a single framework/tools or particular functionalities of it, building the foundation for the next. Also, I intend to do it in most unofficial, fun way loaded with practical examples.

In this chapter, we would be just covering the basic introduction of Redux and in-length discussion of Immutability. We will end with bare essential setup required for redux. Other than that, there won’t be any code specific to redux in this chapter. We will do that from the next chapter.

So what’s Redux?

From the landing page of redux.js.org : 


A predictable state container for JavaScript apps. 

Let’s decipher it.
A state is simply an object containing your app’s data in one place. The container is the storage where this state is kept. For those familiar with RDBMS like MySQL, container loosely equals database and state the data in it (say a row in the table). However, there is a unique restriction: State must be immutable. In our RDBMS analogy, it’s somewhat like creating a new row for each change rather than editing an existing one. Let’s detour a little to understand the concept of Immutability further.

So what’s Immutability?

Rather than bore you with exact definitions, let me explain it with the following set of examples:

Chess Vignette
Imagine if you are punished to record a boring chess game. You have two options:

  • note each move (e.g. King e1-e4)
  • take a snap of the board after every move like a lazy, spoiled brat

Of course, all of you whose childhood was disciplined by the economy of resources would go for the first option.

But you are now dealt with another punishment. After the completion of the game, you may be required to set up the board to any particular move in the game. Now, which approach of recording game do you think would have made life easier for you?

For the responsible first approach, you will have to start from an initial board each time and executing all the moves till the required one (or do some clever relative slicing of moves]. For the irresponsible second approach, you could just take out the snap of given move and set up the board immediately. It pays to be a spoiled brat sometimes.

The first approach here mutates the existing state of the board on each move, whereas the second approach gives us an immutable snapshot at every move. The immutable approach, although being more wasteful of resources, provides us with following cool benefits :

  • The capability of easily rolling back to any point in time. This is what predictability meant earlier. We can reproduce any state (for any move) at will with surety.
  • Ease of maintenance and reducing the risk of errors. There might be a possibility we record one of the moves wrong. This might cause confusion for all further set of moves. We might need separate book-keeping to add additional surety. (Most modern systems use special audit tables for this purpose, which normally keep both new and old records for each possible change, and are themselves immutable (changing existing audit record is a big NO)).

Coming back to JavaScript, let’s go through an example. Let’s say you have the following array of users, with each item containing the user’s name, email, and age. You later realized that you had entered the wrong age for the user John Galt. If mutations are allowed, you would change the age directly on the original object. In the immutable approach, you would rather return a fresh copy of users. You now need to send an apology email to this user. Thus, you need to identify him first. Below, we show the code samples for both the scenarios.

Mutable Version

let users = [
    {
        name: {
            first: 'John',
            last: 'Galt'
        },
        email: 'john.galt@whois.com',
        age: 30
    },
    {
        name: {
            first: 'Mickey',
            last: 'Mouse'
        },
        email: 'mickey.mouse@didney.com',
        age: 90
    },
    {
        name: {
            first: 'Charlie',
            last: 'Chaplin'
        },
        email: 'charlie.chaplin@hollywood.com',
        age: 129
    },
];

const ChangeUserFirstName = 'John',
    ChangeUserLastName = 'Galt',
    ChangeAge = 38;

// Following change spoils the existing object for everyone. Other users won't 
// have any way of knowing the original state.
users.forEach(user => {
    if (user.name.first === ChangeUserFirstName &&
        user.name.last === ChangeUserLastName) {
        user.age = 38;
    }
});

console.log('users', users);

// Find the changed record.
const changedRecord = users.filter(user => (user.name.first === ChangeUserFirstName &&
    user.name.last === ChangeUserLastName));
console.log('changedRecord', changedRecord);
// No way to retrieve original record now :(
// const originalRecord = users.filter(user=>user.name.first === ChangeUserFirstName &&
//         user.name.last === ChangeUserLastName);
// console.log('originalRecord', originalRecord);
// returns same record as changedRecord
users [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 38 },
{ name: { first: 'Mickey', last: 'Mouse' },
email: 'mickey.mouse@didney.com',
age: 90 },
{ name: { first: 'Charlie', last: 'Chaplin' },
email: 'charlie.chaplin@hollywood.com',
age: 129 } ]
changedRecord [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 38 } ]

Immutable Version

let users = [
    {
        name: {
            first: 'John',
            last: 'Galt'
        },
        email: 'john.galt@whois.com',
        age: 30
    },
    {
        name: {
            first: 'Mickey',
            last: 'Mouse'
        },
        email: 'mickey.mouse@didney.com',
        age: 90
    },
    {
        name: {
            first: 'Charlie',
            last: 'Chaplin'
        },
        email: 'charlie.chaplin@hollywood.com',
        age: 129
    },
];

const ChangeUserFirstName = 'John',
    ChangeUserLastName = 'Galt',
    ChangeAge = 38;

let CurrentDayOfBirth = null;

// Following change spoils the existing object for everyone. Other users won't 
// have any way of knowing the original state.
const freshUsers = users.map(user => {
    if (user.name.first === ChangeUserFirstName &&
        user.name.last === ChangeUserLastName) {
        // Create a fresh user record. All the key from both the existing object
        // are copied in the empty object follwed by overwriting from incoming changes.
        return Object.assign({}, user, { age: ChangeAge });
    }
    // Unmodified records.
    return user;
});

console.log('users', users);
console.log('freshUsers', freshUsers);

// Find the changed record.
const changedRecord = freshUsers.filter(user => !users.includes(user));
const originalRecord = users.filter(user => user.name.first === ChangeUserFirstName &&
    user.name.last === ChangeUserLastName);
console.log('changedRecord', changedRecord);
console.log('originalRecord', originalRecord);
users [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 30 },
{ name: { first: 'Mickey', last: 'Mouse' },
email: 'mickey.mouse@didney.com',
age: 90 },
{ name: { first: 'Charlie', last: 'Chaplin' },
email: 'charlie.chaplin@hollywood.com',
age: 129 } ]
freshUsers [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 38 },
{ name: { first: 'Mickey', last: 'Mouse' },
email: 'mickey.mouse@didney.com',
age: 90 },
{ name: { first: 'Charlie', last: 'Chaplin' },
email: 'charlie.chaplin@hollywood.com',
age: 129 } ]
changedRecord [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 38 } ]
originalRecord [ { name: { first: 'John', last: 'Galt' },
email: 'john.galt@whois.com',
age: 30 } ]

Clearly, we see some immediate benefits for the second approach:

  • Original records have not tampered. So let’s say if John Galt disapproves of our change, we can immediately roll back to his original record.
  • Identifying the record which changed is super easy. This is because we now need to just check for object reference rather than delving deeper in it.

I hope these examples would have made the basics of Immutability quite clear, especially its benefits. Also, we now a better understanding of each of the cryptic terms in the terse definition of Redux and it’s the relationship with Immutability.

Bare-Bone Redux setup

I will now end this chapter with the basic setup required for our future Redux experiments.

Few key points about the setup:

  • We would focus only on the very basics of redux here. We won’t be dealing with any starter-kits, non-essential tools like Webpack or other libraries like React except some bare essential.
  • I believe you have Node/NPM already set up on your system and are familiar with common ES6 features. If not, don’t worry. Following links will get you started:

As promised, I won’t be adding loads of dependencies or tools. Only extra packages required would be those needed for babel-node. babel-node is quite similar to the node, except that it supports all missing ES6 features in node including ES6 imports. You can even avoid this and just install the redux package. You may need to do a minor modification to code samples to use Node’s CommonJS module. Just run following commands:

cd app
npm init
npm install --save-dev @babel/core @babel/node @babel/preset-env
npx babel-node index.js --presets=@babel/preset-env

Or you can pull this repository and just do

cd medium-redux
npm install

Next Chapter: Actions, Store, Reducers, and Pure Functions

Please share your valuable comments, suggestion or criticism in response, or applaud/share if you liked the article. You can also follow me for updates on future chapters.

Happy Hacking!

Implementing Publisher-Subscriber Pattern Using JavaScript, NodeJS and WebSockets

Recently I ticked off an item from my bucket list:
Do a quick and dirty implementation of the Publisher-Subscriber pattern.

For the uninitiated, Publisher-Subscriber pattern is a quite common messaging pattern. Following is a brief explanation of this pattern in very plain language. You can find a more detailed explanation including various possible implementation here.

In the Publisher-Subscriber pattern, publishers publish messages without bothering about who receives it. Similarly, the subscribers can be blissfully unaware of publishers, just consuming messages from topics of interest to them. This pattern is quite commonly confused with other similar patterns like a message queue and observer pattern. However, in both of these, publisher (or producer) is aware of the subscriber (or consumers). 

Decoupling

This decoupling of the publishers and subscribers is achieved by introducing an intermediary, also known as a broker. Publishers publish the message to this broker, typically under a certain topic. Subscribers can subscribe to specific categories on this broker. Whenever a new message arrives under a certain topic, broker delivers them to subscribers subscribed to that topic.

A real-life example of Publisher-Subscriber pattern would be cable television. Different media companies create content and dump them on their respective channels. Viewers then consume content from the channels of interests to them, say sports or movies channel. Cable services here act as the broker.

Now, let’s get our hand dirty by implementing this pattern using NodeJS and client-side JavaScript. We would need a few extra packages too to get the ball rolling:

  • ws – A robust but simple implementation of WebSocket Server/Client for NodeJS
  • express – To serve static HTML content (publishers, subscribers)

Don’t be worried if you came across WebSockets for the first time or have never used them. WebSockets is a communication protocol, which allows two-way communication between server and client (browser in our case), as opposed to one-way protocols like HTTP. In our case, WebSockets allows us to both send messages from server to browser (subscribers) and from browser to the server (publishers). There are other ways and supporting protocols for doing this two-way communication, like long polling using Comet or Bayeux protocols, but none of them is as simple and straight-forward as WebSockets.

const WebSocketServer = require('ws').Server;
const express = require('express');
const path = require('path');
const server = require('http').createServer();
const PubSubManager = require('./pubsub');

const app = express();
const pubSubManager = new PubSubManager();

app.use(express.static(path.join(__dirname, '/public')));
const wss = new WebSocketServer({ server: server });
wss.on('connection', (ws, req) => {
    console.log(`Connection request from: ${req.connection.remoteAddress}`);
    ws.on('message', (data) => {
        console.log('data: ' + data);
        const json = JSON.parse(data);
        const request = json.request;
        const message = json.message;
        const channel = json.channel;

        switch (request) {
            case 'PUBLISH':
                pubSubManager.publish(ws, channel, message);
                break;
            case 'SUBSCRIBE':
                pubSubManager.subscribe(ws, channel);
                break;
        }
    });
    ws.on('close', () => {
        console.log('Stopping client connection.');
    });
});

server.on('request', app);
server.listen(8080, () => {
    console.log('Server listening on http://localhost:8080');
});

We first prepare the our WebSocket server using  ws. It provides multiple ways of creating WebSocket server. The approach which we use here is running it over an existing NodeJS server. We also run an Express app on the same server. As WebSockets are designed to work over HTTP ports and support HTTP proxies, we exploit it to our advantage by the same endpoint for both our WebSocket server and Express app. All normal HTTP requests are forwarded to Express app, which currently serves only the static content: static HTML files containing code for publisher and subscriber. All WebSocket specific requests are transferred over to our WebSocket server.
The server can receives data from the client on successful connection and respond back. It differentiates between the publishers and subscribers on the basis of a key provided in the incoming data (request).

class PubSubManager {
    constructor() {
        this.channels = {
            weather: {
                message: '',
                subscribers: []
            },
            sports: {
                message: '',
                subscribers: []
            }
        }
        this.brokerId = setInterval(() => { this.broker() }, 1000);
    }
    subscribe(subscriber, channel) {
        console.log(`subscribing to ${channel}`);
        this.channels[channel].subscribers.push(subscriber);
    }

    removeBroker() {
        clearInterval(this.brokerId);
    }

    publish(publisher, channel, message) {
        this.channels[channel].message = message;
    }

    broker() {
        for (const channel in this.channels) {
            if (this.channels.hasOwnProperty(channel)) {
                const channelObj = this.channels[channel];
                if (channelObj.message) {
                    console.log(`found message: ${channelObj.message} in ${channel}`);

                    channelObj.subscribers.forEach(subscriber => {
                        subscriber.send(JSON.stringify({
                            message: channelObj.message
                        }));
                    });
                    
                    channelObj.message = '';
                }
            }
        }
    }
}
module.exports = PubSubManager;

The Publisher-Subscriber pattern is implemented here using the PubSubManager class. This class provides APIs to publish a message to certain channel (topic), add subscribers to certain channel, a data structure to hold the channels and its messages and subscribers and finally a broker which continuously polls (naively using setInterval) this data structure for any new message. If any new message is published to any channel, it’s delivered by the broker on the following poll to this channel’s subscribers and removed immediately from the store.

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Tahoma, Geneva, sans-serif;
        }

        div {
            display: inline;
        }
    </style>
    <script>
        function publish() {
            var message = document.getElementById('message').value;
            var channel = document.getElementById('channel').value;

            var host = window.document.location.host.replace(/:.*/, '');
            var ws = new WebSocket('ws://' + host + ':8080');
            ws.onopen = function () {
                ws.send(JSON.stringify({
                    request: 'PUBLISH',
                    message: message,
                    channel: channel
                }));
                ws.close();
            };
        }
    </script>
</head>

<body>
    <h1>Publisher</h1>
    <input type="text" id="channel" placeholder="Channel (weather, sports etc.)" />
    <input type="text" id="message" placeholder="What you want to publish?" />
    <button onclick="publish()">Publish</button>
</body>

</html>

In our implementation, the publisher is provided by pub.html, served statically by express. It can publish message under any channel (currently limited to weather and sports). To do so, it creates a connection with our WebSocket server, sends the channel, message and a request key to identify itself as publisher. It then immediately closes the connection. The server, on the other hand, parses this data and publishes the message under relevant topic through PubSubManager’s publish method.

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Tahoma, Geneva, sans-serif;
        }

        div {
            display: inline;
        }
    </style>
    <script>
        function subscribe() {
            var message = document.getElementById('message');
            var channel = document.getElementById('channel').value;
            var host = window.document.location.host.replace(/:.*/, '');
            var ws = new WebSocket('ws://' + host + ':8080');
            ws.onopen = function () {
                ws.send(JSON.stringify({
                    request: 'SUBSCRIBE',
                    message: '',
                    channel: channel
                }));
                ws.onmessage = function(event){
                    data = JSON.parse(event.data);
                    message.innerHTML = data.message;
                };
            };
        }
    </script>
</head>

<body>
    <h1>Subscriber</h1>
    <input type="text" id="channel" placeholder="Channel (weather, sports etc.)" />
    <button onclick="subscribe()">Subscribe</button>
    <div>
        <h1>Message:</h1>
        <div id="message"></div>
    </div>
</body>

</html>

The subscriber implementation, provided by sub.html, works quite similarly to pub.html except the following differences:

  • No message is sent to the server, only the channel of interest. The server subscribes it to the relevant channel using the subscribe method of PubSubManager.
  • The connection with the server is kept indefinitely active, to allow any incoming update from the WebServer. The subscription happens through the subscribe method of PubSubManager by the server.

You can get the complete demo app here. Following are the steps to run the demo:

  • Go to app folder and get the server running:
    • cd pubsub
    • npm install
    • node index.js
  • By default the server runs on http://localhost:8080.
  • Open the subscriber at http://localhost:8080/sub.html. Input channel to subscribe to (say weather). Click Subscribe.
  • Open the publisher at http://localhost:8080/pub.html. Input channel (say weather) and message ( say Cloudy with brief showers). Press Publish.
  • The subscriber receives message under Message heading.
  • You can run multiple publishers and subscribers over different channels (currently limited to weather and sports).

There are many improvements possible in this demo implementation, right from a securing WebSocket server to persisting message queue. However, the goal here was to create a quick and working implementation. Please feel free to improve and build upon it. For those who love challenges, I would suggest implementing own WebSocket server using NodeJS (Next item on my bucket list 😉 ). You can get started with this MDN link and this RFC. 

Related useful links: