Angular 5 socket.io not recieving update in other component - node.js

Question

Context: I have an angular application with a backend in nodejs. I have a feed that will update when I recieve a message from the server. When new data is inserted the server is notified, but my other component does not recieve anything. I have implemented the socket in a service that is injected into both components.
My server is build like this:
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
My service in angular:
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());
});
}
}
My feed component uses the socket service to listen for emits:
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();
});
}
In a different component also using the service I'm trying to emit to the socket on the server. It does recieve the message on the server and emit a new message but my feed component does NOT pick up on this
testSocket() {
//NOTIFY SERVER THAT IT SHOULD TELL CLIENTS TO REFRESH
console.log('Test Socket Clicked')
this._socket.initSocket();
this._socket.send(Action.ODDS);
}
I don't understand what I'm doing wrong - I am using a shared service. Even if the components use different socket connections it shouldn't matter since they're listening for the same emits? I've tested in 2 browser tabs and also in incognito. Any help is appreciated!

Answer 1

The issue was I was emitting to the socket instead of the server which means only the current connection could see it.
New 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
});
}