Utilisez JavaScript pour détecter l'état des utilisateurs en ligne / hors ligne

Cet article vise à aider les développeurs à résoudre les problèmes rencontrés lors de l'utilisation de JavaScript pour détecter le statut en ligne / hors ligne des utilisateurs. Nous plongerons sur la façon de tirer parti de la propriété Navigator.online et des événements en ligne / hors ligne, et fournir des exemples de code montrant comment implémenter correctement la détection d'état et comment mettre à jour dynamiquement les icônes de l'état de l'utilisateur via les styles CSS. Grâce à cet article, vous pourrez créer un mécanisme de détection de statut fiable en ligne / hors ligne pour améliorer l'expérience utilisateur.

Comprendre les événements Navigator.online et en ligne / hors ligne

La propriété Navigator.online est une valeur booléenne indiquant si le navigateur est en ligne. Cependant, il convient de noter que cet attribut indique uniquement si le navigateur peut accéder au réseau et ne garantit pas si l'utilisateur peut réellement accéder à Internet. Par exemple, un utilisateur peut être connecté à un LAN sans connexion Internet, et Navigator.online renvoie toujours vrai.

Les événements en ligne et hors ligne sont licenciés lorsque le navigateur se connecte au réseau et déconnecte le réseau, respectivement. En écoutant ces deux événements, nous pouvons mettre à jour le statut en ligne de l'utilisateur en temps réel.

Correction du problème dans le code

Le code d'origine a les problèmes suivants:

1. Mauvais nom de l'événement: l'événement de statut_online inexistant est utilisé et le nom d'événement correct est en ligne.
2. ID d'élément manquant: il n'y a pas d'élément dans HTML avec ID User_Status, ce qui fait que JavaScript ne parvienne pas à obtenir l'élément.
3. Nom de classe incorrect Fonctionnement: Utilisation user_status.classname = condition d'écraser le nom de la classe User_Status d'origine, ce qui entraînera une valide du style CSS.

Exemples de code améliorés

Voici un exemple de code amélioré qui résout le problème ci-dessus:

Javascript:

 const user_status = document.getElementById ("user_status");

fonction updateOnlinestatus (événement) {
  Soit condition = navigator.online? "en ligne": "hors ligne";

  // Utilisez un ensemble de données pour définir l'attribut d'état user_status.dataset.status = condition;

  Console.log ("Event:" Event.Type ", statut:" Condition);
}

window.addeventListener («en ligne», UpdateOnlinestatus);
window.addeventListener ('offline', updateOnlineStatus);

// Définissez l'état initial UpdateOnlineStatus ({});

CSS:

 / * ------------------------------------------------------------------------------------------------------------------------------
/ * Icône de l'état de l'utilisateur
--------------------------------------------------------------------------------------------------------------------------------
.user_status {
  Position: absolue;
  contenu: "";
  hauteur: 14px;
  Largeur: 14px;
  Color d'arrière-plan: # C0C0C0;
  en bas: 0;
  à droite: 0;
  Affichage: bloc;
  Border: 2,5px solide #ffff;
  Border-Radius: 50%;
  / * Visibilité: cachée; peut être supprimé car l'état par défaut a été reflété par la couleur d'arrière-plan * /
}

.user_status [data-status = "en ligne"] {
  Color d'arrière-plan: # 38B653;
  Visibilité: visible;
}

/ * Ignorer ce style, voici juste pour l'exhaustivité * /
.profile_avatar
{
  Affichage: bloc en ligne;
  Position: relative;
}

HTML:

 <div class="profil_avatar">
    <div class="profil_avatar_holder">
        <img src="https://lh3.googleusercontent.com/taykg37gwdgy-fgkdogdvshsjmugrmvkuvrt6yr-5unkkvgrg%20Kerlpgyxlslocs0txlfudgw59jgtzadknxbmqnh6atvcv9exyb8nhp80ysrna0yw%20=%20w102-h68-n-l50-sg-rj%20" alt="">
    </div>
  <div id="user_statu" class="user_status"> </div>
</div>

Explication du code:

• Javascript:
  • Utilisez document.getElementById ("user_status") pour obtenir l'élément d'icône d'état.
  • La fonction UpdateOnlineStatus définit la propriété Data-Status en fonction de la valeur de Navigator.online, avec la valeur "en ligne" ou "hors ligne".
  • Écoutez des événements en ligne et hors ligne et appelez la fonction UpdateOnlinestatus lorsque l'événement est déclenché.
  • Lorsque la page est chargée, appelez UpdateLenestatus ({}) pour définir l'état initial.
• CSS:
  • Utilisez le sélecteur [Data-Status = "Online"] pour définir différents styles en fonction de la valeur de la propriété Data-Status. Lorsque le statut de données est "en ligne", l'icône d'état vert s'affiche.
• HTML:
  • Ajout d'un élément div avec id = "user_status" pour afficher l'icône d'état.

Avantages de l'utilisation de l'attribut de statut de données

L'utilisation de la propriété Data-Status au lieu de modifier le nom de classe a directement les avantages suivants:

• Évitez d'écraser le nom de classe d'origine: il n'affectera pas le nom de classe d'origine de l'élément et assurera l'intégrité du style CSS.
• Facile à développer: si plus d'état est nécessaire, de nouvelles valeurs de statut de données peuvent être facilement ajoutées et des styles correspondants sont ajoutés dans CSS.
• Le code est plus lisible: l'attribut de statut de données peut clairement exprimer l'état d'un élément.

Choses à noter

• L'attribut Navigator.online et l'événement en ligne / hors ligne ne peuvent détecter que si le navigateur peut accéder au réseau et ne peut garantir si l'utilisateur peut réellement accéder à Internet.
• Sur les appareils mobiles, le déclenchement de l'événement en ligne / hors ligne peut être affecté par le mode d'économie d'alimentation de l'appareil.
• Pour améliorer l'expérience utilisateur, vous pouvez ajouter des informations rapides sur l'icône d'état, telles que "en ligne" ou "hors ligne".

Résumer

Cet article décrit comment utiliser JavaScript pour détecter l'état en ligne / hors ligne de l'utilisateur et fournit un exemple de code complet. En utilisant correctement l'attribut Navigator.online et les événements en ligne / hors ligne, et en utilisant rationnellement les styles CSS, nous pouvons créer un mécanisme de détection d'état fiable en ligne / hors ligne pour améliorer l'expérience utilisateur. N'oubliez pas que Navigator.online signifie seulement si le navigateur peut accéder au réseau. Un jugement plus précis exige que le backend coopère avec la détection du rythme cardiaque.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!