Vue kombiniert SignalR-Front-End- und Front-End-Echtzeit-Nachrichtensynchronisierungsimplementierungsmethoden

In diesem Artikel wird hauptsächlich Vue in Kombination mit SignalR vorgestellt, um eine Echtzeit-Nachrichtensynchronisierung zu erreichen. Interessierte Freunde können darauf verweisen.

In letzter Zeit ist es im Geschäftsleben notwendig, die Echtzeitkommunikationsfunktion zwischen dem Server und dem Client zu realisieren, daher habe ich eine Zusammenfassung und Anordnung von Signalr erstellt.

SignalR kann als Bibliothek von ASP.NET einfach und bequem serverseitige und clientseitige Zwei-Wege-Kommunikationsfunktionen in Echtzeit für Anwendungen bereitstellen.

SignalR verfügt auf der Clientseite über zwei APIs: Verbindungen und Hubs.

In besonderen Fällen, beispielsweise wenn das Format der gesendeten Nachricht spezifisch und unverändert ist, verwenden Sie die Connections-API.

Hubs werden in den meisten Fällen verwendet, da es sich um eine fortgeschrittenere Implementierung der Connections-API handelt, die es dem Client und dem Server ermöglicht, Methoden direkt gegenseitig aufzurufen. Ein spezifisches Szenario für die praktische Anwendung: Wenn der Server beispielsweise eine neue Bestellung erhält, ruft er die Druckmethode des Clients auf. Nachdem der Client den Druckvorgang abgeschlossen hat, ruft er die Aktualisierungsmethode für den Bestellstatus des Servers auf.

Im Folgenden wird die API von Hubs am Frontend vorgestellt

generierter Proxy

Bei Verwendung eines generierten Proxys ist es einfacher, Dienste am anzurufen Syntaxebene Nebenmethode, genau wie der direkte Aufruf auf der Serverseite.

Das Folgende ist der Servercode, der das Hinzufügen einer Chat-Nachricht zur Liste bedeutet

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

Beim Aufruf durch den 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());
   });
});

Wenn der generierte Proxy nicht verwendet wird und der Client ihn aufruft, ist er

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());
    });
});

Aber in Das Vue-Projekt. Wenn das Front- und Back-End getrennt sind, werden sie nicht wie folgt referenziert:

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

Und wenn Sie mehrere Event-Handler im verwenden möchten Bei der Client-Methode können Sie keinen generierten Proxy verwenden.

Daher verwenden die folgenden Beispiele keinen generierten Proxy.

1. So stellen Sie eine Verbindung her

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'); });

Vor dem Verbindungsaufbau ist zu beachten ( Rufen Sie vorher die Startmethode auf. Es ist am besten, mindestens eine Ereignisbehandlungsmethode zu registrieren. Wenn sie nicht registriert ist, wird die OnConnected-Methode von Hubs nicht aufgerufen, und die Methode des Clients kann nicht vom Server aufgerufen werden (dies). es ist leicht, in Schwierigkeiten zu geraten, also registrieren Sie sich im Voraus.

2. Wie der Client die serverseitige Methode aufruft
Beachten Sie, dass der erste Buchstabe des Methodennamens beim Aufrufen des Servers nicht erforderlich ist Wenn der Methodenname eingeschränkt ist, muss er in der Backend-Konfiguration großgeschrieben werden.

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

3. Der Server ruft die Client-Methode auf

Zuerst muss der Client die Methode registrieren Der Server kann am Ende aufgerufen werden und die On-Methode zum Registrieren verwenden.

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

4 Verwenden von SignalR in einem Vue-Projekt

Installieren Sie zuerst das SignalR-Paket. Bitte beachten Sie, dass SignalR basiert auf jQuery.

npm i signalr,jquery

Der Einfachheit halber registrieren Sie globale jQuery in webpack.base.conf.js

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

Dann führen Sie SignalR in main.js ein

import 'signalr'

Zu diesem Zeitpunkt können Sie es dem hinzufügen Das Vue-Projekt SignalR wird verwendet und die entsprechende Konfiguration des Backends wird vorübergehend übersprungen.

Erstellen Sie eine neue 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
}

Auf diese Weise rufen Sie nach der Einführung von signalr.js in die Komponente die startConnection-Methode auf, um eine einzurichten Verbindung.

Verwandte Empfehlungen:

Python implementiert WeChat-Gruppennachrichten-Synchronisierungsroboter basierend auf itchat

Das obige ist der detaillierte Inhalt vonVue kombiniert SignalR-Front-End- und Front-End-Echtzeit-Nachrichtensynchronisierungsimplementierungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!