angular调用sse重服务端拉数据

最新推荐文章于 2024-05-08 09:00:00 发布

zwjapple

最新推荐文章于 2024-05-08 09:00:00 发布

阅读量267

点赞数

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/zwjapple/article/details/129927003

版权

该文章展示了一个Angular服务类(SseService)，用于建立和断开与服务器的Server-SentEvents连接。服务利用RxJS的Observable来处理接收到的消息事件和错误。在组件(TestComponent)中订阅此服务，接收来自http://localhost:5000/send的实时数据并在ngOnInit中初始化，同时在ngOnDestroy时清理资源并断开连接。

摘要由CSDN通过智能技术生成

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

@Injectable({
  providedIn: 'root'
})
export class SseService {
  private eventSource!: EventSource;

  constructor() {}

  connect(): Observable<MessageEvent> {
    this.eventSource = new EventSource('http://localhost:5000/send');
    return new Observable((observer) => {
      this.eventSource.onmessage = (event: MessageEvent) => {
        observer.next(event);
      };
      this.eventSource.onerror = (error: Event) => {
        observer.error(error);
      };
    });
  }

  disconnect(): void {
    this.eventSource.close();
  }
}

组件中使用

import {Component, OnInit} from '@angular/core';
import {SseService} from 'src/app/services/sse.service';
import {Subscription} from 'rxjs';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  content = 'home';
  subscription!: Subscription;
  constructor(private sseService: SseService) {}

  ngOnInit(): void {
    this.subscription = this.sseService.connect().subscribe(
      (event) => {
        console.log('data', event.data);
      },
      (error) => {
        console.log('error', error);
      }
    );
  }

  ngOnDestroy(): void {
    this.sseService.disconnect();
    this.subscription.unsubscribe();
  }
}