Angular, Socket.io : 發出一個對象數組

Question

使用 Angular，我如何訂閱像這樣的對象數組：

[
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
]

目前這不起作用：

this.socketService.onRoom().subscribe(rooms => {
    this.rooms = rooms;
});

使用socketService ：

public onRoom() {
    return new Observable<any>(observer => {
        this.socket.on('room', (data: any) => observer.next(data));
    });
}

編輯：

Mybad，問題似乎來自服務器（NodeJS/express/socket.io）：

chat-server.ts ：

public rooms: Array<{room: string, user:string}> = [];

(...)
this.rooms[room] = {room: room, user: socket.user};
this.io.emit('room', this.rooms)
console.log('[server]rooms :', this.rooms)

服務器端， console.log 打印：

[
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
]

但是在socketService客戶端，如果我在這里做一個 console.log(data) ：

public onRoom() {
    return new Observable<any>(observer => {
        this.socket.on('room', (data: any) => {
            console.log(data)
            observer.next(data)
        });
    });
}

它返回：

[]

但是如果我發出服務器端：

this.io.emit('room', Object.keys(this.rooms))

客戶端返回：

['abc/user2', 'abc/admin']

看起來我無法從 socket.io 發出對象數組？

Answer 1

你不能。 你必須把它變成某種可觀察的..

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class AppComponent implements OnInit {

    private readonly data = [
        {
            'abc/user2': { room: 'abc/user2', user: 'user2' }
        },
        {
            'abc/admin': { room: 'abc/admin', user: 'admin' }
        }
    ];
    private data$;

    ngOnInit() {
        this.data$ = new Observable((observer) => {
            observer.next(this.data);
            observer.complete();
        });
    this.data$.subscribe(data => {
        console.log(data);
    });
}

盡管有許多其他方法（可能還有更好的方法）來做到這一點。 只是一個例子，因為我不知道你到底想完成什么。

Answer 2

您應該創建要在socket.on方法之外返回的socket.on 。

public onRoom(): Observable<any> {
    BehaviorSubject<any> toReturn = new BehaviorSubject();
    this.socket.on('room', (data: any) => toReturn.next(data));
    return toReturn;
}

Answer 3

private myArray = [
    'abc/user2': { room: 'abc/user2', user: 'user2' },
    'abc/admin': { room: 'abc/admin', user: 'admin' }
];
private myObservable= Observable.of(this.myArray);

然后您可以訂閱myObservable 。

Answer 4

我終於通過不發出對象數組，而只是發出一個對象來解決這個問題

chat-server.ts

//public rooms: Array<{room: string, user:string}> = [];
public rooms: any = {};

在客戶端，我將我的對象轉換為數組，以便我可以迭代將它扔到模板中。

chat-list.component.ts

this.socketService.onRoom().subscribe(rooms => {
    this.rooms = rooms;
    this.roomsArr = Object.entries(this.rooms);

});

盡管如此，我還是不明白為什么我無法從 socket.io 發出一個對象數組