当我在 Angular 中调用 API 后初始化套接字时，Websocket 不起作用答案

【问题标题】：Websocket not working when I initialize socket after API call in Angular当我在 Angular 中调用 API 后初始化套接字时，Websocket 不起作用
【发布时间】：2019-04-21 02:24:29
【问题描述】：

我正在尝试将 websockets 与 Angular 一起使用。

这是我的代码

ngOnInit(){
    const self = this;
    self.authService.init();
    self.socket = self.authService.getSocket();
    if(self.socket){
        self.socket.on("new-message", (data) => {
            console.log(data);
        });
    }
}

这很好用，每当使用new-message 发出数据时，我都会在此处接收。

但是现在我改变了逻辑并且只有当用户是authenticated时才初始化套接字。这是我的新代码：

ngOnInit(){
    const self = this;
 this.authService.isUserAuthenticatedbyType().then(function(isAuthenticated){
        if(isAuthenticated){
            self.authService.init();
            self.socket = self.authService.getSocket();
            if(self.socket){
                self.socket.on("new-message", (data) => {
                console.log(data);
            });
        }
    });
}

这里，isUserAuthenticatedbyType 有一个 API 调用，它根据用户是否为 authenticated 返回一个布尔 Promise。

现在，在authenticated 用户的情况下，我的套接字已正确初始化，即使发出消息后仍然没有收到消息。我不确定这两种方法之间出了什么问题。任何帮助将不胜感激。

【问题讨论】：

你应该有 init 在 const self = this;
ngOnInit() 仅在初始化时运行。如果在初始化时isAuthenticated为假，那么代码将不会再次运行。您需要有一种方法来跟踪 isAuthenticated 的更改。

标签： angular sockets websocket

【解决方案1】：

不确定，这实际上是问题所在，但是您错过了大括号：

ngOnInit(){
    const self = this;
 this.authService.isUserAuthenticatedbyType().then(function(isAuthenticated){
        if(isAuthenticated){
            self.authService.init();
            self.socket = self.authService.getSocket();
            if(self.socket){
                self.socket.on("new-message", (data) => {
                console.log(data);
            });
            } // this one ends if(self.socket)
        }
    });
}

【讨论】：

谢谢，但这不是问题所在。在这里输入问题时只是一个错字。
您是否尝试过使用 Chrome 内置的 websocket 跟踪？是否正确打开？消息是否到达那里？如果不是 => 它的发件人问题。如果是，那是你的 ja 层中的东西......
谢谢，我发现了我的问题。实际上这段代码在 app.component.ts 中。因此，在启动应用程序时，用户未经身份验证，因此套接字未初始化。登录后，未调用此流程。但是，如果我刷新页面，它曾经可以工作，因为用户之前已经登录并且详细信息保存在本地存储中。还是谢谢。

【解决方案2】：

尝试从isUserAuthenticatedbyType() 返回一个 observable，然后订阅它。然后您可以跟踪isAuthenticated 的更改。

ngOnInit(){
  const self = this;
  this.authService.isUserAuthenticatedbyType()
    .subscribe((isAuthenticated) => {
      if(isAuthenticated){
        self.authService.init();
        self.socket = self.authService.getSocket();
        if(self.socket){
            self.socket.on("new-message", (data) => {
            console.log(data);
        });
      } // this one ends if(self.socket)
    }
  });
}

【讨论】：