WebSocketSubjectConfig

WebSocketSubjectConfig es un Objeto sencillo que permite configurar un WebSocket

interface WebSocketSubjectConfig<T> {
  url: string
  protocol?: string | Array<string>
  resultSelector?: (e: MessageEvent) => T
  serializer?: (value: T) => WebSocketMessage
  deserializer?: (e: MessageEvent) => T
  openObserver?: NextObserver<Event>
  closeObserver?: NextObserver<CloseEvent>
  closingObserver?: NextObserver<void>
  WebSocketCtor?: {...}
  binaryType?: 'blob' | 'arraybuffer'
}

Descripciṕn

Proporciona flexibilidad a webSocket.

It defines a set of properties to provide custom behavior in specific moments of the socket's lifecycle. When the connection opens we can use openObserver, when the connection is closed closeObserver, if we are interested in listening for data comming from server: deserializer, which allows us to customize the deserialization strategy of data before passing it to the socket client. By default deserializer is going to apply JSON.parse to each message comming from the Server.

Ejemplos

deserializer, the default for this property is JSON.parse but since there are just two options for incomming data, either be text or binarydata. We can apply a custom deserialization strategy or just simply skip the default behaviour.

import { webSocket } from 'rxjs/webSocket';

const wsSubject = webSocket({
url: 'ws://localhost:8081',
//Apply any transformation of your choice.
deserializer: ({data}) => data
});

wsSubject.subscribe(console.log);

// Let's suppose we have this on the Server: ws.send("This is a msg from the server")
//output
//
// This is a msg from the server
serializer allows us tom apply custom serialization strategy but for the outgoing messages

import { webSocket } from 'rxjs/webSocket';

const wsSubject = webSocket({
url: 'ws://localhost:8081',
//Apply any transformation of your choice.
serializer: msg => JSON.stringify({channel: "webDevelopment", msg: msg})
});

wsSubject.subscribe(() => subject.next("msg to the server"));

// Let's suppose we have this on the Server: ws.send("This is a msg from the server")
//output
//
// {"channel":"webDevelopment","msg":"msg to the server"}
closeObserver allows us to set a custom error when an error raise up.

import { webSocket } from "rxjs/webSocket";

const wsSubject = webSocket({
  url: "ws://localhost:8081",
  closeObserver: {
    next(closeEvent) {
      const customError = { code: 6666, reason: "Custom evil reason" };
      console.log(`code: ${customError.code}, reason: ${customError.reason}`);
    },
  },
});

//output
// code: 6666, reason: Custom evil reason

openObserver, Let's say we need to make some kind of init task before sending/receiving msgs to the webSocket or sending notification that the connection was successful, this is when openObserver is usefull for.

import { webSocket } from "rxjs/webSocket";

const wsSubject = webSocket({
  url: "ws://localhost:8081",
  openObserver: {
    next: () => {
      console.log("Conexión OK");
    },
  },
});

// Salida:
// Conexión OK`

Propiedades

Propiedad	Tipo	Descripción
url	string	La url del servidor al que conectarse.
protocol	string | Array	El protocolo a utilizar para conectar.
resultSelector	(e: MessageEvent) => T
serializer	(value: T) => WebSocketMessage	El serializador utilizado para crear mensajes a partir de los valores proporcionados antes de que los mensajes se envían al servidor. Por defecto es JSON.stringify
deserializer	(e: MessageEvent) => T	El deserialiador utilizado para los mensajes que llegan al socket desde el servidor. Por defecto es JSON.parse
openObserver	NextObserver	Un Observador que observa los eventos open que ocurran en el webSocket subyacente.
closeObserver	NextObserver	Un Observador que observa los eventos close que ocurran en el webSocket subyacente.
closingObserver	NextObserver	Un Observador que observa el momento en el que un evnto close va a ocurrir debido a una cancelación de suscripción.
WebSocketCtor	{ new (url: string, protocols?: string | string[]): WebSocket; }	El constructor WebSocket que utilizar. Esto puede resultar útil para utilizar una implementación de WebSocket en Node (WebSocket es una API del DOM) o para falsificar (mock) un WebSocket en un entorno de testing.
binaryType	'blob' | 'arraybuffer'	Especifica la propiedad binaryType del WebSocket subyacente.

Recursos adicionales

Documentación oficial en inglés