Angular2/typescript и SSE (EventSource)

Во-первых, я новичок в ng2 и машинописном тексте.

Я пытаюсь реализовать события Server-Sent в компоненте Angular2. Я следовал примерам, упомянутым в предыдущих сообщениях здесь, но моя проблема в том, что объект «EventSource» не распознан (красное подчеркивание в VS Code).

Я не уверен, что мне не хватает некоторых ссылок... Мои ссылки:

<!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Вот как я реализовал клиент источника событий:

   ngOnInit() {
      const observable = Observable.create(observer => {
        const eventSource = new EventSource(/API_URL); //Cannot find EventSource
        eventSource.onmessage = x => observer.next(x.data);
        eventSource.onerror = x => observer.error(x);

        return () => {
            eventSource.close();
        };
    });

    observable.subscribe({
        next: guid => {
            this.zone.run(() => this.someStrings.push(guid));
        },
        error: err => console.error('something wrong occurred: ' + err)
    });

person Dunderdon    schedule 03.05.2016    source источник


Ответы (3)


На самом деле в TypeScript есть две вещи:

  • Время компиляции. Компилятор проверяет наличие синтаксических ошибок и типов. Что касается типов, то он опирается на d.ts файлы, которые можно увидеть в файлах, описывающих контракты объектов/классов.
  • Время выполнения. Если объект присутствует в вашей среде выполнения, код будет выполнен.

В вашем случае проблема во время компиляции.

Вот пример файла d.ts для EventSource: https://github.com/sbergot/orgmodeserver/blob/master/src/ts/deps/EventSource.d.ts

Вы можете получить его и сослаться на него в самом начале вашего файла TypeScript следующим образом:

/// <reference path="../<path-to>EventSource.d.ts"/>
person Thierry Templier    schedule 03.05.2016

let eventSource = window['EventSource'];

TypeScript не знает о EventSource, который является частью окна. Так что сначала нужно извлечь.

См.: https://github.com/OasisDigital/sse-a2-example/blob/master/src/app/sse.ts

person Ondrej Machala    schedule 30.08.2017
comment
Можете ли вы сказать мне, как я могу добавить полифилл для источника событий? - person Akshay Busa; 28.06.2019

Вам нужно указать, что EventSource является функцией окна, а также передать с ним параметр.

const eventSource = new window['EventSource']("http://url")
person Akshay Busa    schedule 27.06.2019