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

Posted 2023-02-16

【中文标题】angular2项目在firefox上加载时websocket中断

【英文标题】：websocket interrupted while angular2 project is loading on firefox

【发布时间】：2016-02-25 09:27:59

【问题描述】：

我刚刚开始 angular 2。我已经完成了 https://angular.io/guide/quickstart 中给出的 angular2 示例

当我在 Firefox 中使用

运行项目时

npm 开始

终端中的命令，输出显示一次后连接断开。错误显示如下

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

关于如何解决此问题的任何想法？

【问题讨论】：

能否添加用于在 Web 套接字上初始化和注册事件处理程序的代码？谢谢！

我见过这几次，browser-sync 有时会感到困惑（：尝试重新加载页面几次，brsync 最终应该会赶上并连接。如果没有尝试重新启动或终止 nodejs 进程'。

【参考方案1】：

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

为此，您可以使用如下服务。 initializeWebSocket 将创建一个共享的 observable（热）来包装 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 运算符处理了断开连接。

【讨论】：

你没有在 OP 中看到“快速入门”吗？ :-D