https://github.com/AlexDaSoul/angular-websocket-starter

https://github.com/AlexDaSoul/angular-websocket-starter

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/AlexDaSoul/angular-websocket-starter
• Owner: AlexDaSoul
• License: mit
• Created: 2018-10-02T15:45:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-03-17T13:04:27.000Z (over 5 years ago)
• Last Synced: 2024-01-28T09:44:06.848Z (5 months ago)
• Language: TypeScript
• Size: 104 KB
• Stars: 56
• Watchers: 3
• Forks: 27
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-angular-ru - angular-websocket-starter - Стартер для WebSocket-клиента с использованием WebSocketSubject (Кодогенерация)

README

        
# Angular WebSocket starter

> Angular service for WebSocket. Used Rx WebSocketSubject

## Installation

For angular 6:

```bash

$ git clone https://github.com/AlexDaSoul/angular-websocket-starter.git

$ cd angular-websocket-starter

$ npm install

$ npm run start

$ npm run server

```

## Example

#### Add WebSockets on your project

> in app module

Config:

- url: string (server websocket url)

- reconnectInterval: number (pause between connections)

- reconnectAttempts: number (number of connection attempts)

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { WebsocketModule } from './websocket';

@NgModule({

    declarations: [

        AppComponent

    ],

    imports: [

        WebsocketModule.config({

            url: 'http:localhost:8080'

        })

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {

}

```

> in components

```typescript

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs';

import { WebsocketService } from './websocket';

import { WS } from './websocket.events';

export interface IMessage {

    id: number;

    text: string;

}

@Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

    styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

    private messages$: Observable;

    constructor(private wsService: WebsocketService) {

    }

    ngOnInit() {

        // get messages

        this.messages$ = this.wsService.on(WS.ON.MESSAGES);

    }

    public sendMessge(): void {

        this.wsService.send(WS.SEND.SEND_TEXT, 'My Message Text');

    }

}

```

> config for message names

Open src/app/websocket.events.ts and edit names

```typescript

export const WS = {

    ON: {

        MESSAGES: 'messages',

        COUNTER: 'counter',

        UPDATE_TEXTS: 'update-texts'

    },

    SEND: {

        SEND_TEXT: 'set-text',

        REMOVE_TEXT: 'remove-text'

    }

};

```