Vue combine la méthode de mise en œuvre de la synchronisation des messages en temps réel front-end et front-end SignalR

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

public class DemoChatHub : Hub
{
  public void NewChatMessage(string name, string message)
  {
    Clients.All.addMessageToList(name, message);
  }
}

Lors de l'appel du client :

var demoChatHubProxy = $.connection.DemoChatHub;
demoChatHubProxy.client.addMessageToList = function (name, message) {
  console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
 
  $('#newChatMessage').click(function () {
     demoChatHubProxy.server.newChatMessage($('#displayname').val(), $('#message').val());
   });
});

Lorsque le proxy généré n'est pas utilisé, lorsque le client l'appelle, c'est

var connection = $.hubConnection();
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
demoChatHubProxy.on('addMessageToList', function(name, message) {
  console.log(name + ' ' + message);
});
connection.start().done(function() {
  $('#newChatMessage').click(function () {
    demoChatHubProxy.invoke('newChatMessage', $('#displayname').val(), $('#message').val());
    });
});

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 :

<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

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

var connection = $.hubConnection('localhost:23123');//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
demoChatHubProxy.on('addMessageToList', function(userName, message) {
  console.log(userName + ' ' + message);
}); 
connection.start()
  .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
  .fail(function(){ console.log('Could not connect'); });

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.

demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'});

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.

demoChatHubProxy.on('addMessageToList', function(userName, message) {
  console.log(userName + ' ' + message);
});

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

plugins: [new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'root.jQuery': 'jquery'
    })
  ]

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

import { Message } from 'element-ui';
const HUBNAME = 'DefaultHub';

/*客户端调用服务器端方法*/
//更新订单打印次数
const updateOrderPrint = {
  name:'updateOrderPrint',
  method:function(data){
    console.log(data)
  }
}

/*服务器调用客户端方法*/
// 打印新订单
const printNewOrder = {
  name:'printNewOrder',
  method:function(data){
    console.log(data)
  }
}
const get = {
  name:'Get',
  method:function(data){
    console.log(data)
  }
}

//服务器端的方法
const serverMethodSets = [updateOrderPrint];
//客户端的方法
const clientMethodSets = [printNewOrder,get]; //将需要注册的方法放进集合

// 建立连接
export function startConnection() {
  let hub = $.hubConnection(process.env.HUB_API)
  let proxy = createHubProxy(hub) //需要先注册方法再连接
  hub.start().done((connection) =>{
    console.log('Now connected, connection ID=' + connection.id)
  }).fail(()=>{
    Message('连接失败' + error);
    console.log('Could not connect');
  })
  hub.error(function (error) {
    Message('SignalR error: ' + error);
    console.log('SignalR error: ' + error)
  })
  hub.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
  });
  hub.disconnected(function () {
    console.log('disconnected')
  });
  return proxy
}
// 手动创建proxy
export function createHubProxy(hub){
  let proxy = hub.createHubProxy(HUBNAME)
  // 注册客户端方法
  clientMethodSets.map((item)=>{
    proxy.on(item.name,item.method)
  })
  return proxy
}

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!