RxJs SocketIO

An abstraction of socket-io with RxJs, it does this by separating the concerns of connection and event handling into two, IO and ioEvent.

Installation

$ npm install --save rxjs-socket.io

Quickstart

import {IO} from 'rxjs-socket.io';

// Assign a provider for the RxJs-Socket.io class
const Socket = new IO();

// Listen to and subscribe to an event
Socket.listenToEvent('event-name').event$.subscribe(data => console.log('event-name data:', data));

// Connect
Socket.connect(`http://localhost:1337`);

In depth

import {IO, ioEvent} from 'rxjs-socket.io';
import {merge} from 'rxjs';
import {filter, map, takeUntil} from 'rxjs/operators';

// Assign a provider for the RxJs-Socket.io class
const Socket = new IO();

// Assign a pointer to the connection Observable, it will be hot when we connect. it's cold until then.
const connection = Socket.event$;

// Create an assignment to the pipe of the sockets' connection which emits only when we are disconnected
const connectedClosed$ = connection.pipe(filter(({connected}) => !connected));

// Create new Events to be listened to
const HelloWorldEvent = new ioEvent(`HelloWorld`);
const FooBar = new ioEvent('FooBar');

// (optional) assign the cold obserables to a variable
const HelloWorldEvent$ = HelloWorldEvent.event$;

// Do fancy stuff with the Subjects provided
merge(
  ...[HelloWorldEvent, FooBar]
    .map(({name, event$}) =>
           event$.pipe(map(data => ({name, data})))))
  .pipe(takeUntil(connectedClosed$))
  .subscribe(({name: eventName, data: eventData}) => {
    console.log(`event: ${eventName}, data: ${JSON.stringify(eventData)}`);
  });

// Or do some more basic stuff,
HelloWorldEvent$.subscribe(data => console.log(`HelloWorldEvent$:`, data));


// Finally, listen and connect to the provided events
Socket.listenToEvent(HelloWorldEvent);
Socket.listenToEvent(FooBar);

Socket.connect(`http://localhost:1337`);


// You can make events and hook them later too!
const BarFoo = new ioEvent(`BarFoo`);

// You can even mess up the order on the listening and subscribing
Socket.listenToEvent(BarFoo);

BarFoo.event$.subscribe(data => console.log(`BarFoo`, data));

// If you don't need the pointer to the event to refer to it later,
Socket.listenToEvent(new ioEvent<string>(`FooBarBarFoo`)).event$.subscribe(data => console.log(`FooBarBarFoo`, data));

// And you can deconstruct the creation of new ioEvents and get their observables
const [foo, bar, baz] = Socket.listen(['foo', 'bar', 'baz']);
merge(foo, bar, baz).subscribe(data => console.log(`foo, bar, baz`, data));

// IF you need a side-effect but don't want to subscribe you can always access
BarFoo.onUpdate = (newState) => console.log(`BarFoo newState`, newState);

| links | | |--- |--- | | repo | https://gitlab.com/moshmage/rxjs-socket.io/ | | examples | -todo- | | documentation | https://moshmage.gitlab.io/rxjs-socket.io/