NoSignalR.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public code: string;
  private wSocket: WebSocket;

  ngOnInit(): void {
    const URL = 'ws://localhost:9090/PreviewHub';

    this.wSocket = new WebSocket(URL);

    this.wSocket.onopen = function ($ev) {
        console.log('handshake successfully established.', $ev);
    };

    this.wSocket.onclose = function ($ev) {
        console.log('connection closed', $ev);
    };

    this.wSocket.onmessage = function ($ev) {
      var message = JSON.parse($ev.data) as WebSocketMessage;

      this[message.method](...message.parameters);
    };

    window.addEventListener('keydown', this.onKeyDown.bind(this), false)
  }

  receivePreviewUrl(previewUrl: string) {
    console.log(previewUrl);
  }

  onSaveHandler() {
    let message: WebSocketMessage = {
      method :'PushMailAsync',
      parameters: [this.code]
    }

    this.wSocket.send(JSON.stringify(message))
  }

  onKeyDown($event: KeyboardEvent): void {
   let charCode = String.fromCharCode($event.which).toLowerCase();
   if ($event.ctrlKey && charCode === 's') {
      $event.preventDefault()

      this.onSaveHandler()
    }
  }
}