Angular 2 - 关闭窗口时执行代码

Posted 2023-04-18

【中文标题】Angular 2 - 关闭窗口时执行代码

【英文标题】：Angular 2 - Execute code when closing window

【发布时间】：2016-12-24 07:13:22

【问题描述】：

我正在使用 Angular 2 开发一个聊天应用程序。

当用户关闭窗口时，如何将完成聊天命令发送到后端？

我的组件有一个方法调用后端服务以如下方式结束聊天

 endChat() 
        this.chatService.endChat(this.chatSessionInfo).subscribe(
            result => this.OnGetMessages(result),
            error => this.OnChatEndError(error)
        );
    

关闭窗口时如何执行该代码？如何检测窗口关闭事件？

我尝试使用 ngOnDestroy，但由于某种原因代码没有被执行。

在我的 Component.ts 中有。

import  Component, OnInit, AfterViewChecked, ElementRef, ViewChild,OnDestroy from '@angular/core';

export class ChatComponent implements OnInit, AfterViewChecked,OnDestroy  

最后

 ngOnDestroy()  
    this.endChat();
 

谢谢！

【问题讨论】：

你用socket.io实现了后端吗？

不，我使用的是 WebApi 2

我不知道你是如何在后台连接你的聊天的，但我建议使用SignalR 进行聊天之类的事情。断开连接时，服务器上将有fired an event。看看这里的例子：github.com/F***Gosebrink/…

使用 jquery 来检查这个答案***.com/questions/1631959/…

@rinukkusu 我正在使用 socket.io。您有针对此的 socket.io 特定解决方案吗？

【参考方案1】：

感谢大家的帮助。我能够根据不同的建议创建解决方案。

首先我在组件中使用了 beforeunload 事件

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) 
    this.endChat();

在哪里

endChat() 
    this.chatService.endChatSync(this.chatSessionInfo);

然后，诀窍是使 http 调用同步不异步。

以前，聊天服务的endchat方法是

    endChat(chatSessionInfo: ChatSessionInfo)  : Observable<ChatTranscription> 
    console.log("Ending chat..");
    let body = JSON.stringify(chatSessionInfo);
    let headers = new Headers( 'Content-Type': 'application/json' );
    let options = new RequestOptions( headers: headers );
    return this.http.delete(this.apiUrl + "Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,options)
             .map(this.extractData)
            .catch(this.handleError);

我可以让它工作

endChatSync(chatSessionInfo: ChatSessionInfo)  
    console.log("Ending chat..");
     let xhr = new XMLHttpRequest()
     xhr.open("DELETE",this.apiUrl +"Chat?userId="+chatSessionInfo.UserId+"&secureKey="+chatSessionInfo.SecureKey,false);
     xhr.send();

希望这会有所帮助！

【讨论】：

你在所有浏览器中测试过new XMLHttpRequest()吗？

【参考方案2】：

@HostListener('window:unload', ['$event'])
unloadHandler(event) 
  ...

另见javascript to check when the browser window is close

【讨论】：

这是超时还是阻塞直到处理程序完成？

见developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/…，developer.mozilla.org/de/docs/Web/Events/beforeunload。我自己已经有一段时间没有使用它们了，不记得细节了。

这种情况下的问题是窗口在发送服务调用之前就关闭了..

我知道这很棘手，但 Angular 对此无能为力。这是浏览器的限制。

@HostListener('window:unload', ['$event']) 不适用于我 (Angular2 v2.4.6) 通过设置 e.returnValue 来显示确认对话框。然而，所做的是@HostListener('window:beforeunload', ['$event'])。

【参考方案3】：

Chrome 现在不允许在页面被用户导航离开或关闭页面时在页面关闭期间进行同步 XHR。

https://www.chromestatus.com/feature/4664843055398912

那么现在要怎么做才能对这个事件进行同步调用。