Question

我是RxJ的新手，我正在努力建立一个简单的客户端websocket。我遵循了这个tutorial，但在ticker.service.ts中遇到了以下错误：

“主题”类型上不存在专有的“地图”

websocket.service.ts

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

import {Observable, Observer, Subject} from 'rxjs';
import {LiveTrade} from '../models/models';

const CHAT_URL = 'ws://localhost:8888';

@Injectable({
    providedIn: 'root'
})

export class WebsocketService {
    public tickerStreamObservableSubject: Subject<LiveTrade>;
    private msgEventStreamObservableSubject: Subject<MessageEvent>;

    public getObservableTicker(url): Subject<MessageEvent> {
        if (!this.msgEventStreamObservableSubject) {
            this.msgEventStreamObservableSubject = this.createObservable(url);
            console.log('Successfully connected: ' + url);
        }
        return this.msgEventStreamObservableSubject;
    }

    private createObservable(url): Subject<MessageEvent> {
        const ws = new WebSocket(url);

        const observable = Observable.create((observer: Observer<MessageEvent>) => {

            ws.onmessage = observer.next.bind(observer);
            ws.onerror = observer.error.bind(observer);
            ws.onclose = observer.complete.bind(observer);
            return ws.close.bind(ws);

        });

        const innerObserverOfSubject: Observer<Object> = {
            next: (data: Object) => {
                console.log('next called on innerObserverOfSubject')
                if (ws.readyState === WebSocket.OPEN) {
                    ws.send(JSON.stringify(data));
                }
            },
            error() {
            },
            complete() {
            },
        };
        return Subject.create(innerObserverOfSubject, observable);
    }

    constructor() {
    }
}

ticker.service.ts

import {Injectable} from '@angular/core';
import {Observable, Subject} from 'rxjs';
import {WebsocketService} from './websocket.service';
import {LiveTrade} from '../models/models';

const CHAT_URL = 'ws://localhost:8888';

export interface LiveTrade {
    id: string; //  Trade unique ID.
    amount: string; //  Trade amount.
    amount_str: string; //  Trade amount represented in string format.
    price: string; //   Trade price.
    price_str: string; //   Trade price represented in string format.
    type: string; //    Trade type (0 - buy; 1 - sell).
    timestamp: string; //   Trade timestamp.
    microtimestamp: string; //  Trade microtimestamp.
    buy_order_id: string; //    Trade buy order ID.
    sell_order_id: string; //   Trade sell order ID.
}


@Injectable({
    providedIn: 'root'
})
export class TickerService {
    public tickerStreamObservableSubject: Subject<LiveTrade>;
    public msgEventStreamObservableSubject: Subject<MessageEvent>;

    constructor(wsService: WebsocketService) {

        this.msgEventStreamObservableSubject = wsService.getObservableTicker(CHAT_URL).map(
            (response: MessageEvent): LiveTrade => {
                let data = JSON.parse(response.data);
                return data;
            }
        );
    }
}

Answer 1

这应该解决您的代码：

this.msgEventStreamObservableSubject = wsService
  .getObservableTicker(CHAT_URL)
  .pipe(
    map(
      (response: MessageEvent): LiveTrade => {
        let data = JSON.parse(response.data);
        return data;
      }
    )
  );

此外，请确保导入：

import { map } from 'rxjs/operators';

类型“主题<消息事件>”上不存在专有的“地图”

1 个答案: