Angular 4中的WebSocket
Angular 4中的WebSocket
提问于 2017-12-18 21:09:25
我正在用Angular 4和websocket创建一个聊天应用程序。为此，我遵循了这个Angular websocket tutorial
下面是WebsocketService的源代码：
import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';
@Injectable()
export class WebsocketService {
constructor() { }
private subject: Rx.Subject<MessageEvent>;
public connect(url): Rx.Subject<MessageEvent> {
if (!this.subject) {
this.subject = this.create(url);
console.log("Successfully connected: " + url);
}
return this.subject;
}
private create(url): Rx.Subject<MessageEvent> {
let ws = new WebSocket(url);
let observable = Rx.Observable.create(
(obs: Rx.Observer<MessageEvent>) => {
ws.onmessage = obs.next.bind(obs);
ws.onerror = obs.error.bind(obs);
ws.onclose = obs.complete.bind(obs);
return ws.close.bind(ws);
})
let observer = {
next: (data: Object) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
}
}
}
return Rx.Subject.create(observer, observable);
}
}这是我的ChatService：
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';
const CHAT_URL = 'ws://echo.websocket.org/';
export interface Message {
author: string,
message: string
}
@Injectable()
export class ChatService {
public messages: Subject<Message>;
constructor(wsService: WebsocketService) {
this.messages = <Subject<Message>>wsService
.connect(CHAT_URL)
.map((response: MessageEvent): Message => {
let data = JSON.parse(response.data);
return {
author: data.author,
message: data.message
}
});
}
}它工作得很好，但我想要检测连接状态。我想知道是连接中断了还是服务器宕机了。
为此，我尝试在WebsocketService类中实现一个isServerOn()函数，如下所示：
isServerOn(): Observable<boolean> {
return Observable.of(!!this.subject);
}但它并没有解决这个问题。有没有人也遇到过同样的问题？
提前谢谢你。
回答 2
Stack Overflow用户
发布于 2018-01-06 03:11:48
我建议您在Angular应用程序中使用socket.io-client的类型定义。然后按如下方式定义服务：
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Message } from '../model/message';
import { Event } from '../model/event';
import * as socketIo from 'socket.io-client';
const SERVER_URL = 'https://yourserverhost.com';
@Injectable()
export class SocketService {
private socket;
public initSocket(): void {
this.socket = socketIo(SERVER_URL);
}
public send(message: Message): void {
this.socket.emit('message', message);
}
public onEvent(event: Event): Observable<any> {
return new Observable<Event>(observer => {
this.socket.on(event, () => observer.next());
});
}
}定义事件枚举：
export enum Event {
CONNECT = 'connect',
DISCONNECT = 'disconnect'
}然后从你的Angular组件subscribe到你的服务函数：
export class ChatComponent implements OnInit {
constructor(private socketService: SocketService) { }
ngOnInit(): void {
this.initIoConnection();
}
private initIoConnection(): void {
this.socketService.initSocket();
this.ioConnection = this.socketService.onMessage()
.subscribe((message: Message) => {
this.messages.push(message);
});
this.socketService.onEvent(Event.CONNECT)
.subscribe(() => {
console.log('Connected to the server');
});
this.socketService.onEvent(Event.DISCONNECT)
.subscribe(() => {
console.log('Disconnected');
});
}
}在这里找到使用Node.js、WebSockets和Angular的完整聊天项目：https://github.com/luixaviles/socket-io-typescript-chat
Stack Overflow用户
发布于 2017-12-19 16:37:10
我不知道你想要什么
return Observable.of(!!this.subject);我不认为它做的是你认为的那样。相反，您应该创建自己的BehaviorSubject并返回相应的观察值，如下所示
isServerOn(): Observable<boolean> {
return this.myServerOnSubject.asObservable();
}在相应的联机/脱机代码位置，然后可以使用
this.myServerOnSubject.next(true/false);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47869214
复制相关文章
相似问题
腾讯云开发者
