Angulaire 2 - Exécuter du code lors de la fermeture de la fenêtre

Je suis en train de travailler sur une application de chat en utilisant angulaire 2.

Comment puis-je envoyer de l'arrivée de chat de commande à l'arrière-plan lorsque l'utilisateur ferme la fenêtre?

Mon composant a une méthode qui appelle le service principal pour mettre fin à la conversation de la manière suivante

JS:

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

Comment puis-je exécuter ce code lors de la fermeture de la fenêtre? Comment puis-je détecter la fermeture de fenêtre de l'événement?

J'ai essayé avec ngOnDestroy mais pour une raison quelconque, le code n'est pas exécuté.

Dans mon Composant.ts j'ai.

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

export class ChatComponent implements OnInit, AfterViewChecked,OnDestroy  {

et enfin

 ngOnDestroy() { 
    this.endChat();
 }

Merci!

  • Avez-vous mis en œuvre le backend avec la prise.io?
  • Non, je suis en utilisant WebApi 2
  • Je ne sais pas comment vous avez branché votre chat dans le fond, mais je vous suggère d'utiliser SignalR quelque chose comme un chat. Lors de la déconnexion, il y aura a tiré un événement sur le serveur. Jetez un oeil ici pour un exemple: github.com/FabianGosebrink/...
  • utilisation de jquery pour vérifier cette réponse stackoverflow.com/questions/1631959/...
  • Je suis à l'aide d'une douille.io. Avez-vous un socket.io solution spécifique pour cela?
  • Non, j'irais avec Günter la réponse! MAIS si vous avez juste besoin d'exécuter du code sur votre arrière-plan, puis il y a le 'disconnect' événement.

InformationsquelleAutor federom | 2016-08-17
  1. 49

    Merci à tous pour l'aide. J'ai été en mesure de créer une solution basée sur proposition différente.

    J'ai d'abord utilisé le beforeunload événement dans le composant

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

    où

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

    Alors, l'astuce est de faire de l'appel http sync pas async.

    Avant, le endchat méthode au service de chat a été

        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);
}

    J'ai été capable de le faire fonctionner avec

    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();
}

    Espérons que cette aide!

    • Avez-vous testé new XMLHttpRequest() dans tous les navigateurs?
    InformationsquelleAutor federom
  2. 20
    @HostListener('window:unload', ['$event'])
unloadHandler(event) {
  ...
}

    Voir aussi javascript pour vérifier lorsque la fenêtre du navigateur est proche

    • Est ce que cela a un délai d'attente ou de ne pas bloquer jusqu'à ce que le gestionnaire de finitions?
    • Voir developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/..., developer.mozilla.org/de/docs/Web/Events/beforeunload. Je n'ai pas utilisé moi-même pendant un certain temps et ne pas se souvenir des détails.
    • Le problème dans ce cas est que la fenêtre fermé avant l'appel de service est envoyé..
    • Je sais thos est délicat, mais il n'y a rien Angulaire pouvez faire à ce sujet. C'est un navigateur limitation.
    • Où dois-je écrire ce code?
    • @HostListener('window:unload', ['$event']) ne fonctionne pas pour moi (Angular2 v2.4.6) pour afficher la boîte de dialogue de confirmation par le réglage de la e.returnValue. Ce n'était @HostListener('window:beforeunload', ['$event']), cependant.
    • Jetez un oeil à mon post précédent. Qui fonctionne pour Angulaires 2
    • pourriez-vous m'aider à résoudre ce stackoverflow.com/questions/50266974/...
    • J'ai utilisé unloadHandler et beforeUnloadHandler.. parfois il ne journalisation et parfois, il manque.. j'ai besoin de log à chaque fois lorsque l'application est fermée...

    InformationsquelleAutor Günter Zöchbauer