web-dev-qa-db-fra.com

AngularJS et WebSockets au-delà

Je viens de lire ceci post , et je comprends quelle est la différence. Mais toujours dans ma tête, j'ai la question. Puis-je/devrais-je l'utiliser dans la même application/site Web? Supposons que je souhaite que les AngularJ récupèrent le contenu et mettent à jour ma page, en se connectant à une api REST et tout le reste. Mais en plus de cela, je veux également une conversation en temps réel ou déclencher des événements sur d'autres clients lorsqu'une mise à jour ou un message est reçu.

Angular supporte-t-il cela? Ou dois-je utiliser quelque chose comme Socket.io pour déclencher ces événements? Est-il sensé d'utiliser les deux? Si quelqu'un pourrait m'aider ou me diriger vers une bonne lecture sur que s'il y a un but à utiliser les deux ensemble.

J'espère que je suis assez clair. merci pour toute aide.

javascriptangularjswebsocketsocket.io
22
Diogo Barroso

Javascript prend en charge WebSocket, vous n'avez donc pas besoin d'un framework côté client supplémentaire pour l'utiliser. Veuillez jeter un œil à ce service de connexion $ déclaré dans ce application AngularJS basée sur WebSocket .

Fondamentalement, vous pouvez écouter les messages:

   $connection.listen(function (msg) { return msg.type == "CreatedTerminalEvent"; }, 
        function (msg) {
            addTerminal(msg);
            $scope.$$phase || $scope.$apply();
   });

Écoutez une fois (idéal pour les demandes/réponses):

    $connection.listenOnce(function (data) {
        return data.correlationId && data.correlationId == crrId;
    }).then(function (data) {
        $rootScope.addAlert({ msg: "Console " + data.terminalType + " created", type: "success" });
    });

Et envoyer des messages:

    $connection.send({
        type: "TerminalInputRequest",
        input: cmd,
        terminalId: $scope.terminalId,
        correlationId: $connection.nextCorrelationId()
    });

Habituellement, étant donné qu'une connexion WebSocket est bidirectionnelle et a un bon support , vous pouvez également l'utiliser pour obtenir des données du serveur dans le modèle de demande/réponse. Vous pouvez avoir les deux modèles:

  • Éditeur/abonné : où le client déclare son intérêt pour certains sujets et définit des gestionnaires de messages avec ce sujet, puis le serveur publie (ou envoie) des messages quand bon lui semble.

  • Requête/réponse : où le client envoie un message avec un requestID (ou correlationId) et écoute une seule réponse pour ce requestId.

Néanmoins, vous pouvez avoir les deux si vous le souhaitez et utiliser REST pour obtenir des données et WebSocket pour obtenir des mises à jour.

Côté serveur, vous devrez peut-être utiliser Socket.io ou tout autre framework côté serveur afin d'avoir un backend avec le support WebSocket.

16
vtortola

Comme indiqué dans la réponse de votre message lié, Angular ne prend actuellement pas en charge les Websockets. Par conséquent, vous devez utiliser directement l'API Websockets, ou utilisez une bibliothèque supplémentaire comme Socket.io.

Cependant, pour répondre à votre question de savoir si vous devez utiliser à la fois une REST api et Websockets dans une seule application Angular angulaire, il n'y a aucune raison que vous ne puissiez pas avoir les deux requêtes XmlHttpRequest standard pour interagir avec une API REST, en utilisant $ http ou une autre bibliothèque de couches de données telle que BreezeJS, pour certaines fonctionnalités incluses dans diverses parties de l'application et également utiliser Wesockets pour une autre partie ( par exemple, chat en temps réel).

Angular est conçu pour aider à gérer ce type de scénario. Une solution typique consiste à créer un ou plusieurs contrôleurs pour gérer les fonctionnalités de l'application et à mettre à jour votre page, puis à créer des services ou des usines distincts qui encapsulent la gestion des données de chacun de vos points de terminaison de données (c'est-à-dire le REST api et le serveur de chat en temps réel), qui sont ensuite injectés dans les contrôleurs.

De nombreuses informations sont disponibles sur l'utilisation de angular angulaires pour la gestion des connexions de données. Si vous recherchez une ressource pour vous guider dans la création d'un Angular et où les services de données pourraient s'intégrer, je recommanderais de consulter AngularJS Styleguide de John Papa, qui comprend une section sur Data Services .

Pour plus d'informations sur les usines et les services, vous pouvez consulter AngularJS: quand utiliser le service au lieu de l'usine

7
JeremyE