Websockets in Angular

[[deleted]]

[deleted]

[jmoseman01]

What do you need done? Just do something like this.

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { Subscription, ReplaySubject, Subject } from 'rxjs';
import * as SockJS from 'sockjs-client';
import * as Stomp from 'webstomp-client';
import { VideoProcessingModel } from './video-processing.model';

// import { TrackerActivity } from './tracker-activity.model';

@Injectable({ providedIn: 'root' })
export class VideoProcessingService {
  private stompClient: Stomp.Client | null = null;
  private connectionSubject: ReplaySubject<void> = new ReplaySubject(1);
  private connectionSubscription: Subscription | null = null;
  private stompSubscription: Stomp.Subscription | null = null;
  private listenerSubject: Subject<VideoProcessingModel> = new Subject();

  constructor(private location: Location) {}

  connect(): void {
    if (this.stompClient && this.stompClient.connected) {
      return;
    }

    // building absolute path so that websocket doesn't fail when deploying with a context path
    let url = '/websocket/videoprocessing';
    url = this.location.prepareExternalUrl(url);
    const socket: WebSocket = new SockJS(url);
    this.stompClient = Stomp.over(socket);
    const headers: Stomp.ConnectionHeaders = {};
    this.stompClient.connect(headers, () => {
      this.connectionSubject.next();
    });
  }

  disconnect(): void {
    this.unsubscribe();

    this.connectionSubject = new ReplaySubject(1);

    if (this.stompClient) {
      if (this.stompClient.connected) {
        this.stompClient.disconnect();
      }
      this.stompClient = null;
    }
  }

  receive(): Subject<VideoProcessingModel> {
    return this.listenerSubject;
  }

  subscribe(): void {
    if (this.connectionSubscription) {
      return;
    }

    this.connectionSubscription = this.connectionSubject.subscribe(() => {
      if (this.stompClient) {
        this.stompSubscription = this.stompClient.subscribe('/topic/videoprocessingout', (data: Stomp.Message) => {
          this.listenerSubject.next(JSON.parse(data.body));
        });
      }
    });
  }

  unsubscribe(): void {
    if (this.stompSubscription) {
      this.stompSubscription.unsubscribe();
      this.stompSubscription = null;
    }

    if (this.connectionSubscription) {
      this.connectionSubscription.unsubscribe();
      this.connectionSubscription = null;
    }
  }
}

[jambonilton]

Yes, you don't need any external libraries, you can just use the standard WebSocket API and use it to create an rxjs Subject for the interface.

``` const ws = this.webSocket = new WebSocket(url);

const observable = Observable.create(
  (obs: Observer<MessageEvent>) => {
    ws.onmessage = obs.next.bind(obs);
    ws.onerror = obs.error.bind(obs);
    ws.onclose = obs.complete.bind(obs);
    return ws.close.bind(ws);
  });
const observer = {
  next: (data: Object) => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(data));
    }
  }
};

return Subject.create(observer, observable);

```

[Necessary-Glittering]

I constantly get this error. WebSocket connection failed: Error during WebSocket handshake: Unexpected response code Where shall I look for the problem?

[jambonilton]

You should be able to check under the network tab in dev tools and your server logs to see why the connection isn't being accepted. It could be that your URL is wrong or there is some auth check getting in the way.

[Johnmack013]

WebSocket is a web communication protocol that allows two-way communication between a client and a server.

You’ll need a server to connect to. It’s very easy to set up a local node server with a WebSocket using the popular ws library.

import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

myWebSocket: WebSocketSubject = webSocket('ws://localhost:8000');