Question

我的流媒体网络服务在localhost：8080 / stream上运行，当任何新消息添加到订阅的mqtt流时，它会响应。我想在我的Angular2应用程序中使用此Web服务。我使用RxJS在Angular2中使用NodeJS API。我尝试使用以下代码调用localhost：8080 / stream并结束响应。我希望我的观察能够不断地收听网络服务。

[4:7]

Answer 1

如果我理解你的问题，你想要在一段时间内从新的消息到达的流消费数据。

要实现此目的，您需要添加订阅服务。

return this.http.get("http://localhost:8080/stream", options) // ...using post request
   .map((res: Response) => res.json()) // ...and calling .json() on the response to return data
   .catch((error: any) => Observable.throw(error.json().error)
   .subscribe(result => this.result =result));

结果将在新数据到达时更新，您可以按照想要的方式使用它。

注意：最佳做法是在服务中分离http调用并订阅组件中的服务。

为了您的参考，我正在添加一个我为演示目的而工作的例子。

为http来创建服务

@Injectable（）导出类JsonPlaceHolderService {

    constructor(private http:Http){}

    getAllPosts():Observable<Post[]>{

        return this.http.get("https://jsonplaceholder.typicode.com/posts")
        .map(res=>res.json())


    }

}

从您的组件呼叫服务中继续收听更改。

导出类PostsComponent实现OnInit {

constructor(private _service:JsonPlaceHolderService){}

jphPosts:Post[];

title:string="JsonPlaceHolder's Post data";

ngOnInit():void{

    this._service.getAllPosts().subscribe(
        (data) =>this.jphPosts = data,
        (err) => console.log(err),
        ()=>console.log("service call completed")
    );

}

}

Answer 2

使用socket.io

将数据从nodejs流式传输到angular

当我尝试这样做时，这会非常有用。以下内容包含socket.io package for angular赠送给原始作者的代码。这是从一个有效的解决方案中获得的，可能需要进行一些调整。

服务器端

var app     = express(),
    http    = require('http'),
    ioServer    = require('socket.io');

var httpServer = http.createServer(app);
var io = new ioServer();
httpServer.listen(1337, function(){
  console.log('httpServer listening on port 1337');
});

io.attach(httpServer);

io.on('connection', function (socket){
    console.log(Connected socket ' + socket.id);
});


//MQTT subscription
client.on('connect', function () { 
    client.subscribe(topic, function () { 
        console.log("subscribed to " + topic) 
        client.on('message', function (topic, msg, pkt) { 

            io.sockets.emit("message", {topic: topic, msg: msg, pkt: pkt});

        }); 
    }); 
});

客户端

使用以下

创建角度customService

import * as io from 'socket.io-client';

声明

private ioSocket: any;
private subscribersCounter = 0;

内部服务类

constructor() {

    this.ioSocket = io('socketUrl', {});

}

on(eventName: string, callback: Function) {
    this.ioSocket.on(eventName, callback);
}

removeListener(eventName: string, callback?: Function) {
    return this.ioSocket.removeListener.apply(this.ioSocket, arguments);
}

fromEvent<T>(eventName: string): Observable<T> {
    this.subscribersCounter++;
    return Observable.create((observer: any) => {
        this.ioSocket.on(eventName, (data: T) => {
            observer.next(data);
        });
        return () => {
            if (this.subscribersCounter === 1) {
                this.ioSocket.removeListener(eventName);
            }
        };
    }).share();
}

在您的组件中，将customService导入为service

service.on("message", dat => {
 console.log(dat);
});

Answer 3

您应该在angular上使用websocket并使其听取您的服务URL，然后您应该监听其事件（打开，关闭，消息），然后使用Rxjs创建您自己的主题流以将新数据推送到订阅者。

请检查以下网址：

https://medium.com/@lwojciechowski/websockets-with-angular2-and-rxjs-8b6c5be02fac

如何在Angular2中订阅流？

3 个答案: