Connect to the WebSocket with RxJS

There are many tutorials over the internet about different JS frameworks, APIs, and technologies, each day I come across to different JS articles, but almost none of them are about RxJS, even more about WebSockets with RxJS!

WebSocket, for more Javascript developers, is something new and unfamiliar subject, even if all guess how it works, they seldom practiced it; it's obvious why - not all of them need to create web chats!

If we'd look more profoundly inside this technology, we'd realize that the WebSocket isn't only for "Online Chats," but much more, for example - sending binary data to the server or making cool things like this!

That said, RxJS has the same story as WebSocket because we are used to using it only inside Angular projects (for developers who write Angular, for those who do not, I am sure they could never do it);

That's it;

I haven't seen any other big libraries to use RxJS.

• Is it too bad?
• It weighs so much?
• Is it not reactive enough?
• What would be the causes of un-exploring these two technologies?

I would like to know the answers to these questions 😒.

I'm going to show now an example of connecting to the WebSocket with RxJS, as I see it efficient enough to work with WebSockets; of course, I don't talk about simple projects. Otherwise, it's much better to use WebSocket API.

RxJS WebSocket Package

Here I'm going to show just two examples taken from the official documentation page.

Listening for messages from the server

import { webSocket } from "rxjs/webSocket";
const subject = webSocket("ws://localhost:8081");

subject.subscribe(
   msg => console.log('message received: ' + msg), // Called whenever there is a message from the server.
   err => console.log(err), // Called if at any point WebSocket API signals some kind of error.
   () => console.log('complete') // Called when connection is closed (for whatever reason).
 );

For more info about what is a subject in Angular, read this and what's const, read this.

Pushing messages to the server:

import { webSocket } from "rxjs/webSocket";
const subject = webSocket('ws://localhost:8081');

subject.subscribe();
// Note that at least one consumer has to subscribe to the created subject - otherwise "nexted" values will be just buffered and not sent,
// since no connection was established!

subject.next({message: 'some message'});
// This will send a message to the server once a connection is made. Remember value is serialized with JSON.stringify by default!

subject.complete(); // Closes the connection.

subject.error({code: 4000, reason: 'I think our app just broke!'});
// Also closes the connection, but let's the server know that this closing is caused by some error.

As I replied, these examples are from the RxJS official documentation WebSocket page, which is available for everyone.

If you are a JS developer and haven't tried RxJS yet, it's time to try; give it a try that it'll be worth your time.

Begin with surfing this cool website;

• Write some tests;
• Think as Observable;
• Start writing in TypeScript;
• Get more sleep;
• Go to JS conferences;
• Read JS books;
• Use best ES2020 features;
• Don't stop here;

Make the internet a safer and better place.