代码之家  ›  专栏  ›  技术社区  ›  Kaigo

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

  •  0
  • Kaigo  · 技术社区  · 8 年前

    发送 启动数据流 从服务器。

    {"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);
        }
    }
    

    这是我调用服务的组件

    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() {
        }
    
    }
    

    所以我有个问题。

    0 回复  |  直到 8 年前
    推荐文章