Partager une websocket entre plusieurs onglets de navigateur ?

Question

Nous voulons avoir un socket par navigateur plutôt qu'un par onglet dans un navigateur. Comment pouvons-nous y parvenir ? J'ai lu des articles sur les travailleurs web partagés qui étaient prometteurs. Une référence pour cela aussi serait appréciée. Malheureusement, les travailleurs web partagés ne sont pas encore implémentés par Mozilla ou Internet Explorer à ma connaissance. Que faire dans ce cas ? Nous travaillons sur node.js du côté serveur.

Answer 1

Après avoir vu cette question, j'ai finalement mis en œuvre la prise de partage et l'ai ajoutée à ma bibliothèque il y a quelques jours. Cela semble fonctionner dans la plupart des navigateurs, y compris IE6, mais pas dans Opera. Pour Opera, vous pouvez utiliser la vérification régulière au lieu de l'événement unload.

Consultez le numéro correspondant à l'adresse suivante https://github.com/flowersinthesand/portal/issues/21

Laisser un cookie

1. Définir le cookie pour informer qu'il y a un socket partagé.
2. Lorsque le socket se ferme, supprimez ce cookie pour informer qu'il n'y a plus de socket partagé.

Voir, https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L629-L650

Partage et utilisation d'une socket partagée

1. Utilisation de l'événement de stockage et du localStorage - Le localStorage déclenche l'événement de stockage lorsqu'une valeur est fixée et supprimée.
2. Vérifiez que StorageEvent et localStorage sont pris en charge.
3. Ajouter un gestionnaire d'événement de stockage qui filtre l'événement par clé. J'ai utilisé l'url de la socket comme clé
4. Ajout d'un événement de fermeture de socket qui supprime les attributs de stockage
5. Pour signaler, mettre les données en mémoire à l'aide de la touche précédente.

Partage : https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L531-L568

Utilisation partagée : https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L851-L893

1. Utilisation de la méthode window.open - Si nous connaissons le nom d'une fenêtre partagée, nous pouvons obtenir la référence de cette fenêtre et accéder à ses propriétés.
2. Tous les navigateurs supportent la méthode window.open, mais certains navigateurs comme Chrome interdisent l'accès aux propriétés de la fenêtre retournée.
3. Obtenir ou créer un iframe dont l'attribut name est key. J'ai utilisé l'url du socket, mais notez qu'IE ne permet pas d'utiliser des caractères non-mots dans l'attribut name de la balise iframe.
4. La ContentWindow d'Iframe est une référence de fenêtre partagée. Définissez la variable callbacks pour stocker l'écouteur de chaque fenêtre.
5. Pour signaler, il suffit d'envoyer des données aux callbacks. Notez que IE 8 et moins permettent de passer seulement une chaîne de caractères à la fonction d'une autre fenêtre, et la fenêtre partagée peut être détruite.

Partage : https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L571-L605

Utilisation partagée : https://github.com/flowersinthesand/portal/blob/7c2ce4bb61d05d80580e6cde6c94a78238a67345/jquery.socket.js#L894-L929

Note

1. Dans l'implémentation ci-dessus, la signalisation est la diffusion, donc les données doivent indiquer la cible. J'ai utilisé la propriété cible, p pour parent et c pour enfant.
2. J'ai utilisé des variables supplémentaires pour partager le socket : opened - si le socket partagé est ouvert, children - liste des partageurs. Les codes et les commentaires vous aideront à comprendre les détails.

J'espère que ma réponse a été utile.

Answer 2

J'ai utilisé l'objet localStorage pour la communication entre les onglets dans certaines occasions. L'objet localStorage dispose d'un système d'événements permettant d'informer un autre onglet ou une autre fenêtre de la même origine que certaines données ont été modifiées ( http://www.codediesel.com/javascript/sharing-messages-and-data-across-Windows-using-localstorage/ ). L'idée est de laisser l'onglet avec la socket écrire un horodatage et les données reçues dans le stockage local. Si l'horodatage devient trop vieux - peut-être parce que l'onglet avec la socket a été fermé - un autre onglet peut démarrer une connexion socket et mettre à jour les données et l'horodatage.

Answer 3

J'utilise localStorage comme canal de communication partagé afin d'envoyer des données entre les onglets en utilisant une interface identique à EventEmitters. Couplé à un algorithme d'élection du leader qui décide quel onglet sera celui connecté au serveur, je relaie tous les événements de socket vers l'onglet leader à partir de tous les onglets suiveurs et vice versa. Et enfin, l'onglet leader transmet tous les événements au serveur, et diffuse tous les événements reçus à tous les autres clients. Voici le code :

• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/itc.js
• https://github.com/majestic3/athena-online-judge/blob/master/source/client/core/socket.js

Answer 4

C'est loin d'être idéal, mais vous pouvez utiliser une connexion locale flash pour établir une connexion websocket et la partager entre plusieurs onglets et navigateurs.

Voir http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/LocalConnection.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6 pour plus d'informations.

Answer 5

Lightstreamer ( http://www.lightstreamer.com ) est déjà capable de partager la même socket entre plusieurs onglets pour le streaming HTTP (Comet). Les mêmes mécanismes seront appliqués aux WebSockets, attendus dans quelques semaines avec Lightstreamer Colosseo. [Divulgation complète : je suis le CTO de Lightstreamer].

Essayez-le en attendant, pour voir comment se comporte le partage automatique de la connexion. Rendez-vous sur la page de démonstration ( http://www.lightstreamer.com/demos.htm ) et cliquez sur "Run" sur le Stock-List Demo. Un nouvel onglet s'ouvrira avec la démo en cours. Continuez à cliquer sur "Run" plusieurs fois, jusqu'à ce que vous ayez le nombre d'onglets souhaité. Tous les onglets partageront la même prise physique. Un seul onglet contiendra le point de terminaison réel de la socket. Vous pouvez l'identifier en regardant l'indicateur d'état en haut à gauche (avec le voyant vert). S'il est ovale (et que le roll-over indique "Master page"), il s'agit de l'onglet principal contenant la connexion partagée.

Maintenant, la magie... Que se passe-t-il si vous fermez l'onglet Maître ? Eh bien, les autres onglets vont le repérer et faire une éléction pour choisir un nouveau maître, ce qui créera une nouvelle connexion et récupérera l'état. Essayez, c'est amusant...