WebSockets implémente la communication bidirectionnelle frontale et back-end, qui est plus réel et à faible co?t que le sondage. Lorsque vous l'utilisez, vous devez créer une instance et écouter pour des événements ouverts, message, fermer et d'erreur. Les données de transfert sont généralement codées et codées au format JSON. Lorsque la connexion est anormale, le mécanisme de reconnexion doit être déclenché et la stratégie de backoff exponentielle doit être utilisée pour contr?ler l'intervalle et limiter le nombre maximum de fois. Combiné avec Vuex / Redux, il peut gérer uniformément les mises à jour de l'état et des messages.

WebSockets permet au frontal d'établir des connexions persistantes avec le serveur, une véritable communication bidirectionnelle. Si vous avez déjà utilisé des sondages ou des sondages longs, vous constaterez que WebSocket a non seulement de meilleures performances en temps réel, mais a également une consommation de ressources plus faible.

Méthode d'utilisation de base

Il n'est en fait pas difficile d'utiliser WebSocket sur l'avant. Le noyau est de créer une instance WebSocket , puis d'écouter des événements et d'envoyer des données.

 const socket = new WebSocket ('wss: //example.com/socket');

socket.addeventListener ('open', fonction (événement) {
    socket.send (?Hello Server!?);
});

socket.addeventListener ('message', fonction (événement) {
    console.log ('Message re?u:', event.data);
});

Les événements communs incluent open (connexion établi), message (message re?u), close (connexion fermée) et error (erreur s'est produite). Il est recommandé de gérer au moins ces quatre événements, afin qu'il soit plus facile de résoudre les problèmes.

Remarque: L'adresse WebSocket doit être ws:// ou wss:// , et les adresses HTTP ordinaires ne peuvent pas être connectées.

Traitement des formats de données re?us et envoyés

WebSocket transmet des cha?nes, par défaut, le message que vous recevez est un texte d'origine. Habituellement, nous utilisons le format JSON pour organiser les données:

 socket.addeventListener ('message', fonction (événement) {
    const data = JSON.Parse (event.data);
    console.log (data.type, data.payload);
});

Inversement, n'oubliez pas de convertir l'objet en une cha?ne lors de l'envoi:

 socket.send (json.stringify ({
    Type: ?chat?,
    charge utile: ?bonjour?
}));

Si les données sont fréquemment envoyées et re?ues dans le projet, vous pouvez encapsuler une fonction d'outil pour traiter uniformément la logique du code pour éviter le code en double.

Exception de connexion et mécanisme de reconnexion

Lorsque le réseau est instable, le WebSocket peut être déconnecté. Le front-end doit considérer la reconnexion automatique, sinon l'utilisateur peut être coincé tout le temps.

• Déclencher la logique de reconnexion dans les événements close et error
• Utilisez une stratégie de backoff exponentielle pour contr?ler l'intervalle de réessayer (comme l'attente de 1 seconde pour la première fois, 2 secondes pour le deuxième, 4 secondes pour la troisième fois)
• Définissez le nombre maximum de réessais pour empêcher les boucles infinies

Exemple:

 Laissez RetryCount = 0;
const MAXRESTRES = 5;

fonction connect () {
    const socket = new WebSocket ('wss: //example.com/socket');

    socket.addeventListener ('close', () => {
        if (retRyCount <maxretrie) {
            setTimeout (() => {
                RetryCount;
                connecter();
            }, 1000 * Math.Pow (2, RetryCount));
        }
    });

    // D&#39;autres auditeurs ...
}

Cependant, il convient de noter que certains frameworks backend ont déjà des rythmes cardiaques intégrés et de la déconnexion de reconnexion, vous n'avez donc pas besoin de les implémenter à partir de zéro.

Utilisé en conjonction avec la gestion de l'état (comme Vuex / Redux)

Si vous utilisez Vuex ou Redux pour gérer l'état, vous pouvez intégrer WebSocket dans le magasin pour gérer l'état de la connexion et les mises à jour des messages uniformément.

L'idée de base est:

• établir une connexion lorsque le magasin est initialisé
• Mettre à jour l'état via la validation / répartition après avoir re?u le message
• Les modifications de l'état de surveillance des composants de la page réagissent

Par exemple dans Vuex:

 const Store = new Vuex.Store ({{
    état: {
        Messages: []
    },
    Mutations: {
        addMessage (état, message) {
            state.messages.push (message);
        }
    },
    Actions: {
        initsocket ({commit}) {
            const socket = new WebSocket ('...');
            socket.addeventListener ('message', événement => {
                const data = JSON.Parse (event.data);
                commit (?addMessage?, données);
            });
        }
    }
});

Cette structure rend le flux de données plus clair et facilite le débogage et les tests.

Fondamentalement, c'est tout. La clé pour faire bon usage des lignes Web est de stabiliser les connexions, de gérer correctement les messages et des exceptions, et de coopérer avec les outils de gestion de l'état modernes pour améliorer encore la maintenabilité.

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!