https://github.com/ktanakaj/simple-ng-websocket

Simple WebSocket client for Angular
https://github.com/ktanakaj/simple-ng-websocket

angular npm-package websocket-client

Last synced: 7 months ago
JSON representation

Simple WebSocket client for Angular

• Host: GitHub
• URL: https://github.com/ktanakaj/simple-ng-websocket
• Owner: ktanakaj
• License: mit
• Created: 2017-02-21T14:34:45.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-01-10T06:41:13.000Z (about 2 years ago)
• Last Synced: 2025-09-01T21:46:54.580Z (7 months ago)
• Topics: angular, npm-package, websocket-client
• Language: TypeScript
• Homepage:
• Size: 2.29 MB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# simple-ng-websocket

[![NPM](https://nodei.co/npm/simple-ng-websocket.png?downloads=true)](https://nodei.co/npm/simple-ng-websocket/)

[![Test](https://github.com/ktanakaj/simple-ng-websocket/actions/workflows/test.yml/badge.svg)](https://github.com/ktanakaj/simple-ng-websocket/actions/workflows/test.yml)

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

This is simple WebSocket client for [Angular](https://angular.io/). simple-ng-websocket is thin wrapper at Browser's [WebSocket](https://developer.mozilla.org/en/docs/Web/API/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.

* [ktanakaj/ws-chat-sample](https://github.com/ktanakaj/ws-chat-sample)

## License

[MIT](https://github.com/ktanakaj/simple-ng-websocket/blob/master/LICENSE)