Angular可以使用WebSocket和服务器端推送技术来实现实时的数据更新和通知。这可以通过socket.io来实现。
首先在Angular应用程序中,创建一个WebSocket服务来建立与服务器的WebSocket连接:
import { Injectable } from '@angular/core'; import * as io from 'socket.io-client'; import { Observable } from 'rxjs/Observable';
@Injectable() export class SocketService { private url = 'http://localhost:3000'; private socket;
constructor() { this.socket = io(this.url); }
public sendMessage(message) { this.socket.emit('message', message); }
public getMessages() { let observable = new Observable(observer => { this.socket.on('message', (data) => { observer.next(data); }); return () => { this.socket.disconnect(); }; }) return observable; } }
然后在组件中订阅服务器的通知,并在数据更改时触发刷新操作:
import { Component } from '@angular/core'; import { SocketService } from './socket.service';
@Component({
selector: 'app-root',
template:
,
styleUrls: ['./app.component.css']
})
export class AppComponent {
messages = [];
constructor(private socketService: SocketService) { this.socketService.getMessages().subscribe(message => { this.messages.push(message); //trigger refresh of data }); } }
在服务器端(基于Node.js),可以使用socket.io来将连接的客户端订阅到某个数据库表的更改事件上,并在每次更改时向客户端发送通知:
var app = require('express')(); var http = require('http').createServer(app); var io = require('socket.io')(http); var pg = require('pg'); const { Pool, Client } = require('pg')
const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'test',