WebSocket, RxJS and other bad things
Tags: javascript, rxjs, typescript, websocket
Published: 2019-12-12 18:44:56

---
title: WebSocket, RxJS and other bad things
cover_image: https://yon.fun/content/images/2019/12/WebSocket-with-RxJS-2.png
published: true
date: 2019-12-10 20:11:07 UTC
tags: Javascript, rxjs, typescript, WebSocket
canonical_url: https://yon.fun/websocket-with-rxjs/
---

There are so many tutorials over the internet about different JS frameworks, API's 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](https://yon.fun/websocket-with-rxjs)!

**WebSocket**, for more of Javascript developers, is something inexperienced and strange thing, even if they understand how it works, they almost never used it, and it's clear why - _not all of them needs to create web-chats!_ But, if we would look more deeply into this technology, we can understand that WebSocket is not only for "Online Chats" but much more, for example [sending binary data to the server](https://medium.com/samsung-internet-dev/being-fast-and-light-using-binary-data-to-optimise-libraries-on-the-client-and-the-server-5709f06ef105) or [making cool things like this](https://medium.com/outsystems-engineering/making-magic-with-websockets-and-css3-ec22c1dcc8a8)!

These being said, [RxJS](https://rxjs-dev.firebaseapp.com) has the same story, we are used to having it only on [Angular](https://angular.io/guide/rx-library) projects (for developers who write in Angular - for those who not, I am pretty sure they could never use it) and that's it, I haven't seen any other popular libraries to be implemented it - _is it so bad? it weighs so much? it is not reactive enough?_ I would like to know the answers to these questions 😒.

What would be the reasons of un-exploring these two things, we are going today to see an example of integrating both of them and see that it is not so bad, even more - I see it **more efficient and optimised way** to work with WebSockets - of course, we don't talk about simple projects, otherwise is much better to use [the WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).

## RxJS WebSocket Package

Listening for messages from the server:

{% gist https://gist.github.com/wanoo21/7e9714c8a9d41271ce5830307be4c759.js %}

Pushing messages to the server:

{% gist https://gist.github.com/wanoo21/32632cea993bf06be2ec512818d3649b.js %}

All these examples have been taken from [RxJS official documentation](https://rxjs-dev.firebaseapp.com/api/webSocket/webSocket) WebSocket page, so it is available for everyone. If you are a JS developer and haven't tried RxJS yet, it is time to try it, just give it a try - you will see, it'll worth your time.

Begin with surfing this [cool website](https://www.learnrxjs.io/), write some tests, _think as Observable,_ (start writing in TypeScript, **get more sleep**, go to [JS conferences](https://confs.tech/javascript?topics=javascript), read [JS books](https://github.com/getify/You-Dont-Know-JS) and do not stop here) in that way we will build better websites, web-applications, web-servers, mobile-applications and everything which JavaScript allows us to build.

Make the internet a safer and better place.