Angular中如何通过Subject实现跨窗口数据传递？求指导

我要制作一个包含两种视图的小型问答游戏：玩家端在Node.js服务器上投注积分答题，主播端用于观察游戏进程。需要实现**不同浏览器窗口（玩家与观察者不在同一位置，无法使用Cookie或LocalStorage）**间的数据传递功能，尝试用RxJS的Subject实现，已编写以下代码，不确定实现是否正确，寻求技术建议。

现有代码 #

SharedService服务 #

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {  
    private dataSubject = new Subject<any>();
  
    sendData(data: any) {
      this.dataSubject.next(data);
    }
  
    clearData() {
      this.dataSubject.next();
    }
  
    getData() {
      return this.dataSubject.asObservable();
    }
}

玩家端（发送数据）组件 #

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared-service.service';

@Component({
  selector: 'app-page1',
  templateUrl: '<button (click)="click()">Send data</button>',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit{
  
  constructor(private sharedService: SharedService) { }

  ngOnInit(): void {
    this.sharedService.getData().subscribe((data) => {
      console.log(data)
    });
  }

  click(){
    this.sharedService.sendData('test');
  }
}

主播端（接收数据）组件 #

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared-service.service';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.css']
})
export class Page2Component implements OnInit{

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.getData().subscribe((data) => {
      console.log(data)
    });
  }
}

技术建议 #

• 当前方案的核心局限：你使用的Subject是内存级别的观察者对象，仅能在**同一个Angular应用实例（即同一个浏览器标签/窗口）**内传递数据。跨窗口场景下，每个窗口是独立的应用实例，服务完全隔离，数据根本无法跨窗口同步，所以当前方案不适用你的需求。

• 跨客户端数据同步的正确方案：由于玩家和主播不在同一位置，本质是跨客户端通信，必须通过Node.js服务器中转：

  • WebSocket（推荐）：Node.js端可使用socket.io或原生WebSocket实现，Angular端搭配ngx-socket-io或原生WebSocket API。玩家操作时，前端将数据发送至服务器，服务器再主动推送给主播端的连接，实现实时同步。
  • 轮询（备选）：若WebSocket难以实现，可让主播端定时调用Node.js API拉取最新数据，但实时性远不如WebSocket。

• 同设备跨窗口的补充方案（非你的场景）：如果是同一设备上的两个窗口，可使用window.postMessage()实现跨窗口通信，结合Angular服务处理消息，但你的场景是跨位置，此方案不适用。

• 代码优化建议（调整方案后）：

  • 避免使用any类型，定义具体的游戏数据接口（如GameData），包含投注积分、答题结果等字段，提升类型安全性。
  • 若使用Subject类，推荐用BehaviorSubject替代普通Subject，它会保存最新值，新订阅的组件能直接获取最后一条数据，更适合游戏状态同步。
  • 组件订阅Observable后，需在销毁时取消订阅（如使用takeUntil操作符或async管道），避免内存泄漏。

内容的提问来源于stack exchange，提问作者SoeyTCG