Angular 5 socket.io 未收到其他组件中的更新

Posted 2023-03-13

【中文标题】Angular 5 socket.io 未收到其他组件中的更新

【英文标题】：Angular 5 socket.io not recieving update in other component

【发布时间】：2018-10-26 21:54:52

【问题描述】：

上下文：我在 nodejs 中有一个带有后端的 Angular 应用程序。我有一个提要，当我收到来自服务器的消息时会更新。当插入新数据时，服务器会收到通知，但我的其他组件没有收到任何内容。我已经在注入两个组件的服务中实现了套接字。

我的服务器是这样构建的：

const port = 3000;
const server = require('http').Server(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => 
console.log('New Connection..')
socket.on('action', (data) => 

switch(data) 
  case 'new_odds':
  socket.emit('refresh_odds', 'UPDATE FEED! (FROM SERVER)')
  break;
  case 'new_results':
  break; 

);
);
//listen on port omitted

我的角度服务：

const SERVER_URL = 'http://localhost:3000';

@Injectable()
export class SocketService 

constructor() 




private socket;

public initSocket(): void 
    this.socket = socketIo(SERVER_URL);


public disconnectSocket(): void 
  this.socket.disconnect();


public send(action: Action): void 
    this.socket.emit('action', action);


public onOddsMessage(): Observable<string> 
    return new Observable<string>(observer => 
        this.socket.on('refresh_odds', (data:string) => 
          observer.next(data)
        );
    );


public onEvent(event: Event): Observable<any> 
    return new Observable<Event>(observer => 
        this.socket.on(event, () => observer.next());
    );

我的提要组件使用套接字服务来监听发射：

constructor(private _socket : SocketService) 


ngOnInit() 

this.initIoConnection();


private initIoConnection(): void 
  this._socket.initSocket();


this.ioConnection = this._socket.onOddsMessage()
  .subscribe((data: string) => 
    console.log('Recieved data from oddsMessage')
    //this.loadBetFeed();
  );

在另一个组件中，也使用了我尝试向服务器上的套接字发出的服务。它确实在服务器上接收消息并发出一条新消息，但我的提要组件没有收到此消息

testSocket() 
  //NOTIFY SERVER THAT IT SHOULD TELL CLIENTS TO REFRESH
  console.log('Test Socket Clicked')
  this._socket.initSocket();
  this._socket.send(Action.ODDS);

我不明白我做错了什么 - 我正在使用共享服务。即使组件使用不同的套接字连接也没关系，因为它们正在监听相同的发射？我已经在 2 个浏览器选项卡和隐身模式中进行了测试。任何帮助表示赞赏！

【参考方案1】：

问题是我发送到 socket 而不是 server 这意味着只有当前连接可以看到它。

新服务器：

 io.on('connect', (socket) => 
console.log('Connected client on port %s.', port);
socket.on('action', (data) => 
    io.emit('refresh_odds', 'UPDATE FEED! (FROM SERVER)') <-- changed socket to io
);