angular2websocket

Based on https://github.com/AngularClass/angular-websocket and migrated to Angular2

Installation

npm install angular2-websocket

Usage:

import {$WebSocket} from 'angular2-websocket/angular2-websocket'
var ws = new $WebSocket("url");
ws.send(event);

also ws.getDataStream() returns Subject to which you can attach an Observer (https://github.com/Reactive-Extensions/RxJS)

Compilation

npm run typings
npm run compile

The default value for binary type is ‘arrayBuffer’.

example

import {$WebSocket, WebSocketSendMode} from 'angular2-websocket/angular2-websocket';

// connect
var ws = new $WebSocket("ws://127.0.0.1:7000");
// you can send immediately after connect, 
// data will cached until connect open and immediately send or connect fail.

// when connect fail, websocket will reconnect or not,
// you can set {WebSocketConfig.reconnectIfNotNormalClose = true} to enable auto reconnect
// all cached data will lost when connect close if not reconnect


// set received message callback
ws.onMessage(
    (msg: MessageEvent)=> {
        console.log("onMessage ", msg.data);
    },
    {autoApply: false}
);

// set received message stream
ws.getDataStream().subscribe(
    (msg)=> {
        console.log("next", msg.data);
        ws.close(false);
    },
    (msg)=> {
        console.log("error", msg);
    },
    ()=> {
        console.log("complete");
    }
);

// send with default send mode (now default send mode is Observer)
ws.send("some thing").subscribe(
        (msg)=> {
            console.log("next", msg.data);
        },
        (msg)=> {
            console.log("error", msg);
        },
        ()=> {
            console.log("complete");
        }
    );

ws.send("by default, this will never be sent, because Observer is cold.");
ws.send("by default, this will be sent, because Observer is hot.").publish().connect();

ws.setSendMode(WebSocketSendMode.Direct);
ws.send("this will be sent Direct, because send mode is set to Direct.");

ws.send("this will be sent and return Promise.", WebSocketSendMode.Promise).then(
        (T) => {
            console.log("is send");
        },
        (T) => {
            console.log("not send");
        }
    );

ws.send("this will be sent and return Observer.").subscribe(
        (msg)=> {
            console.log("next", msg.data);
        },
        (msg)=> {
            console.log("error", msg);
        },
        ()=> {
            console.log("complete");
        }
    );

ws.close(false);    // close
ws.close(true);    // close immediately

Binary type

To set the binary type for the websocket one can provide it as string in the constructor. Allowed types are:

• ‘blob’ (default)
• ‘arraybuffer’

var ws = new $WebSocket("ws://127.0.0.1:7000", null, null, 'arraybuffer');

Reconnect Websocket Connection

const webSocketConfig = { reconnectIfNotNormalClose: true } as WebSocketConfig;
this.ws = new $WebSocket(url, null, webSocketConfig);

app.component.ts code:

import { Component, OnInit } from '@angular/core';
import { $WebSocket, WebSocketSendMode } from 'angular2-websocket/angular2-websocket';
import { WebsocketService } from '../../../services/websocket.service';

@Component({
  selector: 'app-init',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private websocket:WebsocketService) { }
  ngOnInit() {
      this.fnGraphInit("ws://10.1.40.117:5555");
  }

  fnGraphInit(url){
    const webSocketConfig = { reconnectIfNotNormalClose: true } as WebSocketConfig;
    let ws = new $WebSocket(url,null,webSocketConfig);
    ws.getDataStream().subscribe(
      (msg) => { 
        console.log(msg.data);

        (msg) => {
          console.log("error", msg);

        },
        () => {
          console.log("complete");
        }
    );
  }
}