Angular 7,服务器发送事件未接收事件/数据

时间:2020-08-17 01:30:32

标签: node.js angular server-sent-events

我尝试了类似的问题/答案,但没有帮助。我能够与NodeJS服务器建立连接,但发布时无法获取数据。 角度服务:

import { Injectable, NgZone } from "@angular/core";
import { Observable } from "rxjs";
import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';
import * as ES from '../../assets/js/eventsource.min.js'

@Injectable({
  providedIn: "root"
})
export class SseService {
  constructor(private _zone: NgZone) {}

  getServerSentEvent(url: string): Observable<any> {
    return Observable.create(observer => {
      const eventSource = this.getEventSource(url);
     eventSource.onmessage = (event) => {console.log('sse event', event); observer.next(JSON.parse(event.data))};
    });
  }

  private getEventSource(url: string): EventSource {
    return new ES.EventSource(url,{withCredentials:true});
  }
}

角度组件

ngOnInit() {
  this.sseService
      .getServerSentEvent("https://192.168.0.100:64726/events")
      .subscribe(data=> console.log("SSE"+ data),
        error=> console.log("SSE",error))
      
      console.log('init SSE')
}

服务器代码(节点js):

///SSE

// Middleware for GET /events endpoint
function eventsHandler(req, res, next) {
  // Mandatory headers and http status to keep connection open
  const headers = {
    'Access-Control-Allow-Origin': 'https://192.168.0.100.xip.io:4200',
    'Access-Control-Allow-Credentials':true,
    'Content-Type': 'text/event-stream',
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache'
  };
  
  const clientId = Date.now();
  const newClient = {
    id: clientId,
    res
  };
  clients.push(newClient);
  req.on('close', () => {
    console.log(`${clientId} Connection closed`);
    clients = clients.filter(c => c.id !== clientId);
  });

  res.writeHead(200, headers);
  res.setTimeout(0); 
  res.write('\n');
  res.flush()
  
}
function sendEventsToAll(newNest) {
  clients.forEach(c => {console.log("written ",c ); console.log("Data",newNest); c.res.write(JSON.stringify({data: newNest}));c.res.write('\n\n'); c.res.flush()})
}
async function addNest(req, res, next) {
  console.log('nest add called')
  const newNest = req.body;
  nests.push(newNest);
  // Send recently added nest as POST result
  res.json(newNest)
  // Invoke iterate and send function
  return sendEventsToAll(newNest);
}

app.post('/nest', addNest);
app.get('/events', eventsHandler);
app.get('/status', (req, res) => res.json({clients: clients.length}));
let clients = [];
let nests = [{data:"test"}];

我使用CURL命令发布数据,使用chrome浏览器,当我点击事件URL时,我能够直接接收数据,并且面临Angular无法接收数据的问题。

curl -X POST  -H "Content-Type: application/json"  -d '{"momma": "swas://192.168.0.100:64726/nest -kerature": 31}' -s

0 个答案:

没有答案