Question

在我的有角度的应用程序中，我正在使用Web套接字从后端接收异步消息。因此，我创建了一个角度服务来处理此问题：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as SocketIO from 'socket.io-client';

@Injectable({
    providedIn: 'root'
})

export class EventService {
    private socket;

    constructor() {
        this.socket = SocketIO();
    }

    onMessage(): Observable<any> {
        return new Observable<any>(observer => {
            this.socket.on('message', (message: string) => {
                observer.next(JSON.parse(message))
            });
        });
    }
}

我的消息具有不同的类型，并且以JSON格式设置：

{
    "type": "HELLO",
    "data": "hello world !"
}

当前，我使用EventService.onMessage().subscribe(...)函数来处理唯一需要它们的组件中的消息。

现在，我需要具有多种消息类型。它将由多个组件使用。

我想创建一个返回消息类型为Observable的方法。像这样：

export class EventService {
    ...

    onHello(): Observable<any> { ... }

    onFoo(): Observable<any> { ... }

    onBar(): Observable<any> { ... }
}

有可能吗？怎么做？后端体系结构是否正确（也许我应该拆分为多个Web套接字）？

Answer 1

可以尝试以其他方式：为每种消息类型创建主题，然后在onMessage方法中将消息应用于特定主题

onHello() = new Subject()/new BehaviorSubject(initialValue)
...

onMessage() {
  this.socket.on('message', message => {
    let msg = JSON.parse(message);
    if(msg.type === 'hello'){
      this.onHello.next(msg);
    }
    ...
  }
}

Answer 2

事实上，当我使用socket.io时，有一个简单的解决方案。

我正在使用send()函数在后端发送数据：

const io = require('socket.io');
const ws = io(...);

ws.on('connection', function(socket) {
    ...

    socket.send(JSON.stringify({
        type: "HELLO",
        data: "hello world !"
    }));
});

发送'message'，可以使用on('message', ...)接收。

但是我应该使用emit()函数来设置事件名称：

const io = require('socket.io');
const ws = io(...);

ws.on('connection', function(socket) {
    ...

    socket.emit('hello', JSON.stringify({
        data: "hello world !"
    }));
});

所以现在我的角度服务可能是：

export class EventService {
   ...

    onHello(): Observable<any> {
        return new Observable<any>(observer => {
            this.socket.on('hello', (message: string) => {
                observer.next(JSON.parse(message))
            });
        });
    }
}

将Web套接字消息过滤到多个Observable中

2 个答案: