Angular 从服务器向websocket连接发送数据

Angular 从服务器向websocket连接发送数据,angular,websocket,rxjs,Angular,Websocket,Rxjs,我不知道如何通过websocket连接发送以下json,以便启动服务器的数据流 {"type": 1, "productId":"1234"} 我已经为websocket创建了一个服务。这就是我正在创建一个可观察对象来发送数据流的地方 import {Subject} from "rxjs/subject"; import { Subscription } from 'rxjs/Subscription'; import { Observable } from 'rxjs/Observable

我不知道如何通过websocket连接发送以下json,以便启动服务器的数据流

{"type": 1, "productId":"1234"}
我已经为websocket创建了一个服务。这就是我正在创建一个可观察对象来发送数据流的地方

import {Subject} from "rxjs/subject";
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Injectable } from '@angular/core';

import 'rxjs/add/observable/dom/webSocket';

@Injectable()
export class WebsocketService {
    private socket: Subject<MessageEvent>;

    constructor() { }

    public connect(url): Subject<MessageEvent> {
        if(!this.socket) {
          this.socket = this.create(url);
        }
        return this.socket;
    }

    private create(url): Subject<MessageEvent> {
        let ws = new WebSocket(url);
        let 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);
            }
        );
        let observer = {
            next: (data: Object) => {
                if (ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify(data));
                }
            },
        };
        return Subject.create(observer, observable);
    }
}
因此,我有一个问题

我在哪里执行ws.send(json),在服务中还是在组件中?

Umm,2美分——可能在服务中,然后组件应该有一个函数或onSubmit来触发/调用函数以发送负载。
import { Component, OnInit, ViewChild } from '@angular/core';
import { WebsocketService } from '../../services/websocket.service';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
import homeChartData from '../../../assets/json/home-chart-data';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

    constructor(private _socket: WebsocketService) {
        this._socket.connect('ws://localhost:5000/ws').subscribe(({ data }) => {
        const dataDetails = JSON.parse(data);
        const chartDataSet = [
          {
            label: 'Offer',
            lineTension: 0, 
            data: dataDetails.offers
          }
        ]
        const labels = Array.apply(null, {length: dataDetails.offers.length}).map(Number.call, Number);
        this.chartArray = [{data: chartDataSet, labels}];
      })
    }

    ngOnInit() {
    }

}