snw

simple-ng-websocket

Simple WebSocket client for Angular4+

Showing:

Popularity

Downloads/wk

10

GitHub Stars

3

Maintenance

Last Commit

1mo ago

Contributors

0

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

simple-ng-websocket

NPM Build Status MIT License

This is simple WebSocket client for Angular4+. simple-ng-websocket is thin wrapper at Browser's WebSocket.

Install

To install simple-ng-websocket in the current directory, run:

npm install simple-ng-websocket

Usage

simple-ng-websocket can be use to Angular provider.

First, you must define it in the providers.

import { NgModule } from '@angular/core';
import { SimpleNgWebSocket, CONNECT_URL, LOGGER } from 'simple-ng-websocket';

@NgModule({
    providers: [
        { provide: CONNECT_URL, useValue: 'ws://' + window.location.host + '/ws/' },
        { provide: LOGGER, useValue: (level, message) => console.log(message) },
        SimpleNgWebSocket,
    ],
})
export class AppModule { }

You can inject CONNECT_URL and LOGGER parameters.

  • CONNECT_URL : The URL to which to connect. If CONNECT_URL is not specified, the client connect to 'ws://' + window.location.host + '/' or 'wss://' + window.location.host + '/'.
  • LOGGER : The logger for this client's log event such as OPEN, CLOSE, SEND, RECEIVE and ERROR.

Then, you can use it on your logic code.

import { Injectable } from '@angular/core';
import { SimpleNgWebSocket } from 'simple-ng-websocket';

@Injectable()
export class SampleService {
    constructor(private ngws: SimpleNgWebSocket) {
        this.ngws.on('message', (msg) => {
            console.log(msg);
        });
    }

    sendMessage(msg: string): void {
        this.ngws.send(msg);
    }
}

API

Class: SimpleNgWebSocket

new SimpleNgWebSocket([url, logger])

  • url {String} It is the same as CONNECT_URL.
  • logger {Function} It is the same as LOGGER.

Create a new websocket connection. The constructor call connect() automatically.

Event: 'open'

  • ev {Event}
  • ngws {SimpleNgWebSocket}

Emitted when the handshake is complete. ev is through from Browser's WebSocket.

Event: 'message'

  • ev {MessageEvent}
  • ngws {SimpleNgWebSocket}

Emitted when a message is received from the server. ev is through from Browser's WebSocket.

Event: 'close'

  • ev {CloseEvent}
  • ngws {SimpleNgWebSocket}

Emitted when the connection is closed. ev is through from Browser's WebSocket.

Event: 'error'

  • ev {ErrorEvent}
  • ngws {SimpleNgWebSocket}

Emitted when an error occurs. ev is through from Browser's WebSocket.

ngws.connect()

Open a new websocket connection.

ngws.close()

  • code {Number} A numeric value indicating the status code explaining why the connection is being closed.
  • reason {String} A human-readable string explaining why the connection is closing.

Close the websocket connection.

ngws.send(message[, toJson])

  • message {String} The data to send to the server.
  • toJson {Boolean} Specifies whether message should be JSON.stringify() or not. Defaults to true.

Sends message through the connection. If the connection was not opend, send() call connect() automatically.

ngws.url

  • {String}

The URL of the WebSocket server.

ngws.ws

  • {WebSocket}

The connection instance of the raw WebSocket.

Example

You can find a example web application here.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100