Cet article présente principalement Vue combinée à SignalR pour réaliser la synchronisation des messages en temps réel front-end et back-end. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.
Récemment, en entreprise, il est nécessaire de réaliser la fonction de communication en temps réel entre le serveur et le client, j'ai donc fait un résumé et un agencement de Signalr.
SignalR, en tant que bibliothèque d'ASP.NET, peut facilement et commodément fournir des fonctions de communication bidirectionnelles en temps réel côté serveur et côté client pour les applications.
SignalR dispose de deux API côté client : Connexions et Hubs.
Dans des cas particuliers, comme lorsque le format du message envoyé est spécifique et inchangé, utilisez l'API Connections.
Les hubs sont utilisés dans la plupart des cas car il s'agit d'une implémentation plus avancée de l'API Connections, permettant au client et au serveur d'appeler directement des méthodes les uns sur les autres. Un scénario spécifique d'application pratique, par exemple, lorsque le serveur obtient une nouvelle commande, il appelle la méthode d'impression du client. Une fois l'impression terminée, il appelle la méthode de mise à jour de l'état de la commande du serveur.
Ce qui suit présente l'API des Hubs sur le front-end
proxy généré
Lors de l'utilisation d'un proxy généré, il est plus facile d'appeler les services au niveau niveau de syntaxe Méthode latérale, tout comme l'appeler directement côté serveur.
Ce qui suit est le code du serveur, ce qui signifie ajouter un message de chat à la liste
1 2 3 4 5 6 7 |
|
Lors de l'appel du client :
1 2 3 4 5 6 7 8 9 10 |
|
Lorsque le proxy généré n'est pas utilisé, lorsque le client l'appelle, c'est
1 2 3 4 5 6 7 8 9 10 |
|
Mais en le projet Vue, Si les front et back end sont séparés, ils ne seront pas référencés comme ceci :
1 |
|
Et si vous souhaitez utiliser plusieurs gestionnaires d'événements dans le méthode client, vous ne pouvez pas utiliser le proxy généré.
Par conséquent, les exemples suivants n'utilisent pas de proxy généré.
1. Comment établir une connexion
1 2 3 4 5 6 7 8 |
|
Il convient de noter qu'avant de démarrer la connexion ( appeler la méthode start avant), il est préférable d'enregistrer au moins une méthode de gestion d'événement Si elle n'est pas enregistrée, la méthode OnConnected des Hubs ne sera pas appelée, alors la méthode du client ne peut pas être appelée par le serveur (cela. est facile d'avoir des ennuis, alors inscrivez-vous à l'avance).
2. Comment le client appelle la méthode côté serveur
Utilisez l'invocation Notez que la première lettre du nom de la méthode lors de l'appel du serveur n'a pas besoin d'être. en majuscule. Si le nom de la méthode est restreint, il doit être en majuscule. La configuration du backend est requise.
1 |
|
3. Le serveur appelle la méthode client
Le client doit d'abord enregistrer la méthode avant le Le serveur peut être appelé à la fin, utilisez la méthode on pour vous inscrire.
1 2 3 |
|
4 Utilisation de SignalR dans un projet Vue
Installez d'abord le package SignalR, veuillez noter que SignalR s'appuie sur jQuery.
npm i signalr,jquery
Pour plus de commodité, enregistrez jQuery global dans webpack.base.conf.js
1 2 3 4 5 6 7 |
|
Ensuite, introduisez SignalR dans main.js
import 'signalr'
À ce stade, vous pouvez l'ajouter au Le projet Vue SignalR est utilisé et la configuration associée du backend est temporairement ignorée.
Créez un nouveau signalr.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
|
De cette façon, après avoir introduit signalr.js dans le composant, appelez la méthode startConnection pour établir un connexion.
Recommandations associées :
Python implémente un robot de synchronisation des messages de groupe WeChat basé sur itchat
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!