Question

我刚开始有角度2.我已经完成了https://angular.io/guide/quickstart

中给出的angular2样本

当我使用

在Firefox中运行项目时

npm start

终端中的

命令，输出显示一次后连接断开。错误显示为

The connection to ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=6YFGHWy7oD7T7qioAAAA was interrupted while the page was loading

有关如何解决此问题的想法吗？

Answer 1

我不知道如何管理您的网络套接字，但您可以考虑使用以下代码。这个想法是将Web套接字包装成一个可观察的。

为此您可以使用如下服务。 initializeWebSocket将创建一个共享的observable（hot）来包装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();
  }
}

您可以添加sendData以在网络套接字上发送数据：

export class WebSocketService {
  (...)

  sendData(message) {
    this.ws.send(JSON.stringify(message));
  }
}

最后一点是使事情变得有点健壮，即根据标准过滤接收的消息，并在断开连接时实施重试。为此，您需要将我们的初始websocket observable包装到另一个中。这样我们可以在连接丢失时支持重试，并在客户端标识符等条件上集成过滤（在示例中，接收的数据是JSON并包含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);
    });
  }
}

您可以看到使用observable的retryWhen运算符在此代码中处理了断开连接。

websocket在firefox上加载angular2项目时被中断

1 个答案: