Acabo de comenzar angular 2. He hecho una muestra angular2 como se indica en https://angular.io/guide/quickstart
cuando ejecuto el proyecto en Firefox usando
inicio de npm
comando en la terminal, la conexión se desconecta después de mostrar la salida una vez. Error que muestra como
The connection to ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=6YFGHWy7oD7T7qioAAAA was interrupted while the page was loading¿Alguna idea sobre cómo solucionar este problema?
No sé cómo administra su socket web, pero podría considerar usar el siguiente código. Esta idea es envolver el socket web en un observable.
Para esto, podría usar un servicio como el siguiente. initializeWebSocket creará un observable compartido (caliente) para envolver un objeto WebSocket .
export class WebSocketService { initializeWebSocket(url) { this.wsObservable = Observable.create((observer) => { this.ws = new WebSocket(url); this.ws.onopen = (e) => { (...) }; this.ws.onclose = (e) => { if (e.wasClean) { observer.complete(); } else { observer.error(e); } }; this.ws.onerror = (e) => { observer.error(e); } this.ws.onmessage = (e) => { observer.next(JSON.parse(e.data)); } return () => { this.ws.close(); }; }).share(); } } Puede agregar un sendData para enviar datos en el socket web:
export class WebSocketService { (...) sendData(message) { this.ws.send(JSON.stringify(message)); } } El último punto es hacer las cosas un poco más sólidas, es decir, filtrar los mensajes recibidos en función de un criterio e implementar un reintento cuando haya una desconexión. Para esto, debe envolver nuestro observable websocket inicial en otro. De esta manera, podemos admitir reintentos cuando se pierde la conexión e integrar el filtrado en criterios como el identificador del cliente (en la muestra, los datos recibidos son JSON y contienen un atributo de sender ).
export class WebSocketService { (...) createClientObservable(clientId) { return Observable.create((observer) => { let subscription = this.wsObservable .filter((data) => data.sender!==clientId) .subscribe(observer); return () => { subscription.unsubscribe(); }; }).retryWhen((errors) => { return Observable.timer(3000); }); } }Puede ver que las desconexiones se manejan en este código usando el operador retryWhen de observable.