Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne

Usa SignalR per creare app moderne

Rachel Appel

Scaricare il codice di esempio

Rachel AppelCon ampio accesso a Internet a banda larga e dispositivi wireless, c'è una domanda considerevole per le applicazioni in tempo reale. Siti popolari come Facebook e Twitter, giochi multiplayer e applicazioni di collaborazione aziendale hanno l'UX migliori quando sono applicazioni dal vivo, in tempo reale. Molti altri tipi di applicazioni sono numerosi candidati per esperienze in tempo reale, ad esempio applicazioni di finanza e delle azione, aste, vendite cruscotti, e-commerce e applicazioni educative. Anche siti Web e applicazioni dove i dati dal vivo non sono una necessità possono beneficiare di comunicazioni in tempo reale, full duplex con SignalR.

Che cosa è SignalR e perché dovrei usarlo?

SignalR è un insieme di librerie client e server che facilitano le comunicazioni semplici, in tempo reale, a due vie tra server e client. Non solo può il contatto avviare client con il server, come avviene nello sviluppo Web, ma il server può anche contattare il client. Quelli non sono semplici risposte HTTP, neanche. Queste sono chiamate al metodo effettivo dal server al client, come spingere la tecnologia. I clienti possono anche contattare altri client attraverso il componente lato server SignalR. Tutto questo è possibile perché SignalR crea una connessione permanente tra il server e il client.

Tutti vogliono creare software moderno — e non ottiene affatto più moderno di comunicazione full duplex. Ci sono diversi motivi per utilizzare SignalR. La facilità d'uso per la scrittura di applicazioni e siti Web è una buona ragione. Un altro è che se hai bisogno di comunicazione dal vivo nel vostro software. In tali casi, SignalR è la strada da percorrere. Potresti farlo voi stessi utilizzando un numero qualsiasi di tecniche come polling WebSockets o AJAX. Tuttavia, si dovrà riscrivere tutte le basi, che il team di SignalR ha già fatto. Questo fondamento è abbastanza ampia e comprende diverse caratteristiche chiave:

  • Negoziazione di trasporto: SignalR rileva il trasporto migliore per ottenere più vicino alla comunicazione in tempo reale come possibile. WebSockets utilizza per impostazione predefinita, come quello è il modo più moderno e veloce per scrivere applicazioni Web in tempo reale. Gestione trasporto automatico è dietro l'idea di comunicazione in tempo reale in SignalR. Che negozia un trasporto per ogni cliente come si connette.
  • SignalR host server: È possibile scegliere tra leggero self-hosting ovunque, comprese le piattaforme non Microsoft, o gancio SignalR alla pipeline di IIS.
  • Sul lato client librerie: Incluse le librerie JavaScript, Microsoft .NET Framework e Windows Store.
  • Proxy JavaScript: Questo fornisce un modo per chiamare i metodi in località remote in JavaScript, mentre lo sviluppo come se tutto il codice è in esecuzione nello stesso processo sulla stessa macchina.
  • Protezione: SignalR ganci in modelli di protezione esistenti ASP.NET e supporta molti fornitori di sicurezza popolare di terze parti quali Microsoft Live, OpenAuth, Google, Facebook e Twitter.

Gli sviluppatori Web tradizionalmente scrivano codice secondo il modello di richiesta/risposta di HTTP. Non c'è nulla di intrinsecamente cattivo con questo, ma manca il vantaggio principale del SignalR — una connessione permanente tra server e client. In HTTP, fai una richiesta, ottenere una risposta e poi hai finito. In uno scenario in tempo reale, la pipeline rimane aperta tra il client e il server. Questo ti permette di creare UXes più ricco e meglio che sentirsi vivo e collegato.

In SignalR, ci sono due livelli di astrazione sopra i trasporti a basso livello — mozzi e connessioni persistenti. Questo articolo riguarderà soli mozzi per ragioni di brevità. I mozzi sono le API di livello superiore che è la parte "incredibilmente semplice" di SignalR. Connessioni persistenti prendono più tempo e sforzo per codice e SignalR li utilizza come base per mozzi. Generalmente userai mozzi per la maggior parte delle vostre attività, a meno che non si hanno buone ragioni per fare altrimenti.

Per iniziare con SignalR in applicazioni Windows

Come molte altre librerie .NET, SignalR si presenta come un pacchetto di NuGet. È possibile installarlo con il Gestione pacchetti di NuGet o la Console di Gestione pacchetti . Entrambi sono caratteristiche di Visual Studio 2012 e Visual Studio 2013. Ci sono diversi SignalR diversi pacchetti disponibili da Microsoft, tra cui:

  • SignalR ASP.NET di Microsoft: Il pacchetto base che installa i componenti di nucleo e Web con JavaScript client
  • Microsoft ASP.NET Core SignalR componenti: Librerie di hosting e nucleo
  • Microsoft ASP.NET SignalR System. Web: SignalR per ASP.NET
  • Microsoft ASP.NET SignalR JavaScript Client: Librerie client JavaScript HTML Apps
  • Client .NET di Microsoft ASP.NET SignalR: Librerie client per altre applicazioni di piattaforma Windows

Quando si installa il pacchetto Microsoft ASP.NET SignalR in uno qualsiasi dei vostri progetti ASP.NET (Web Form o MVC), SignalR installa le dipendenze in ciascuno dei pacchetti elencati tranne il Client .NET. Il Client .NET è per le applicazioni Windows 8 e Windows Phone XAML, Windows Presentation Foundation (WPF), Windows Form e applicazioni Console. Ci sono ulteriori pacchetti SignalR in NuGet Gestione pacchetti di Microsoft e di terze parti. Questi riguardano appena circa tutto compreso, self-hosting, ridimensionamento, dipendenze e MongoDB supporto.

Dopo l'installazione, non sono presenti impostazioni di Web. config per regolare. Tuttavia, è necessario aggiungere un piccolo frammento di codice di avvio per indicare al ASP.NET che potrai inserire SignalR nella sua pipeline:

[assembly: OwinStartup(typeof(VoteR.Startup))]
public partial class Startup
{
  public void Configuration(IAppBuilder app)
  {
    app.MapSignalR();
  }
}

È possibile aggiungere questa classe di avvio per un file. cs nella cartella App_Start. Alcuni dei modelli di progetto ASP.NET includono già una classe di avvio per l'autenticazione basata su form ASP.NET . Se questo è il caso, basta aggiungere il metodo di configurazione per quella classe invece. Una volta fatto questo, può spostare sulla scrittura di codice in tempo reale.

Questa classe di avvio è un'interfaccia Web aperta per avvio .NET (OWIN). Ciò significa che è conforme alle nuove specifiche OWIN. OWIN è uno standard molto simile alle norme disciplinata dal Worldwide Web Consortium (W3C). Microsoft ha implementato OWIN in un progetto chiamato Katana. Che è il motore dietro SignalR che funziona in tandem con IIS, o come un servizio indipendente per facilitare le comunicazioni bidirezionali. Come sviluppatore SignalR utilizzando mozzi, non sarà necessario sapere molto di più su OWIN o Katana. SignalR estrae tutti che così puoi concentrarti su risolvere i problemi di business con SignalR.

Lato Server di hub SignalR

I mozzi sono il nucleo comunicazioni di SignalR. Ricevono le richieste in arrivo e spingere i messaggi ai clienti, dall'hub stesso o per conto di un altro cliente. Si può considerare un hub in SignalR di essere come un hub e spoke di una ruota.

L'hub è solo un gatekeeper per la messaggistica. Mentre sono al centro dell'azione, i mozzi sono solo le classi che ereditano dalla classe Microsoft.AspNet.SignalR.Hub. L'Hub di classe, a sua volta, Sape­menti l'interfaccia IHub nello spazio dei nomi Microsoft.AspNet.SignalR.Hubs. L'interfaccia IHub definisce tre eventi: OnConnected, OnDisconnected e OnReconnected. Definisce inoltre tre proprietà: Clienti, contesto e gruppi. Queste sono le comuni attività o informazioni relative a ogni connessione in tempo reale all'hub.

Il client chiama metodi pubblici sul mozzo, che significa che il codice si presenta come una chiamata al servizio Web. Tuttavia, SignalR mozzi possono avviare contatti con i clienti che hanno registrato con loro. Normalmente non programmare con questo tipo di comportamento in mente, come normalmente si usa il modello tradizionale di richiesta/risposta.

Questo può accadere a causa delle proprietà client che rappresenta una raccolta di tutti i client connessi. Attraverso la proprietà client, è possibile accedere a un singolo client o più client indipendentemente dalla loro piattaforma. Ad esempio, un client iOS può inviare un messaggio a un client di Windows attraverso l'hub come mozzo comunica con il client di Windows per conto del cliente iOS e viceversa.

Per vedere il mozzo in azione, esamino un'applicazione di esempio chiamata elettore che visualizza una serie di elementi e consente agli utenti di votare per il loro preferito. Al centro dell'app, c'è una classe VoteHub. Questo è il mozzo che la corrispondenza tra voti utenti hanno per ogni elemento. Poi notifica al client dei numeri aggiornati. Figura 1 Mostra un esempio di classe VoteHub.

Figura 1 i conteggi VoteHub classe voti

public class VoteHub : Hub
{
  private static List<Item> VoteItems = new List<Item>();
  private static VoteRContext db = new VoteRContext();
  public void Vote(int id)
  {  
    var votes = AddVote(id);
    Clients.All.updateVoteResults(id, votes);
  }
  private static Item AddVote(int id) {
    var voteItem = VoteItems.Find(v => v.Id == id);       
    if (voteItem != null)
    {
      voteItem.Votes++;
      return voteItem;
    }
    else
    {
      var item = db.Items.Find(id);
      item.Votes++;
      VoteItems.Add(item);
      return item;  
    }       
  }
  public override Task OnConnected()
  {       
    Clients.Caller.joinVoting(VoteItems.ToList());
    return base.OnConnected();
  }
}

I due metodi per indagare Figura 1 sono il voto e Add­metodi di votare. Il metodo di voto è quello che chiamano i clienti (coperto nella sezione successiva). L'app, quindi chiama il metodo privato AddVote, che fa il voto effettivo conteggio. Lo fa controllando per vedere se gli elementi sono già nell'elenco VoteItems. Se lo sono, li aggiornerà. Se così non fosse, la prima volta che un utente voti per loro, AddVote aggiungerà quel elemento. Un elenco statico < voto > è un modo semplice per archiviare le informazioni globali semplice come questo senza un database.

Il metodo di votazione in Figura 1 contiene un'interessante linea di codice dopo la chiamata a AddVote:

Clients.All.updateVoteResults(id, votes);

Nel SignalR, si utilizzerà la proprietà client access e chiamata codice sul client. Dalla proprietà client, è possibile destinare i client che si desidera accedere. A volte è tutti i clienti, ad esempio quando si verifica una nuova votazione. A volte è solo un client, ad esempio quando un utente si connette prima. Utilizzando le convenzioni di denominazione lascia SignalR corrispondenza con la chiamata di server con il codice sul client da eseguire. Questa è la prima volta nella storia della ASP.NET che è possibile utilizzare la proprietà dinamiche per chiamare il codice sul client.

Come potete immaginare, perché il VoteHub deve registrare i voti, ha senso che c'è un evento come OnConnected. L'evento OnConnected consente di acquisire nuove connessioni in ingresso. Uno scenario probabile è intercettare l'id di connessione tramite la proprietà ConnectionId dell'oggetto di contesto.

Nel caso l'applicazione dell'elettore, in Figura 1 è in bicicletta attraverso i tre elementi dell'elenco di VoteHub < elemento > oggetto e notificare il cliente quanti voti ciascuno ha elemento tramite la proprietà Clients.caller. In questo modo, clienti appena collegati hanno immediatamente il numero totale di voti per ogni elemento al suo ingresso il partito.

Ci sono molti altri modi per comunicare tra server e client. La proprietà client della classe Hub espone molti diversi modi possiamo accedere codice client, come delineato Figura 2.

Figura 2 diversi modi di comunicare dal Server al Client

// Call method on all clients
Clients.All.clientSideMethod(args, args, ...);
// Call method on specific client       
Clients.Client(Context.ConnectionId). clientSideMethod(args, args, ...);
// Call a method on a list of specific connections
Clients.Clients(ConnectionId1, ConnectionId1, ...).clientSideMethod(args, args, ...);
// Call method on calling connection
Clients.Caller.clientSideMethod(args, args, ...);
// Call method on all clients but the caller
Clients.Others. clientSideMethod(args, args, ...);
// Call method on all in the group except a few select connections
Clients.AllExcept(connectionId1, connectionId2).clientSideMethod(args, args, ...);
// Call method on groups of connections
Clients.Group(groupName).clientSideMethod(args, args, ...);
// Call method on connected clients in a specified group
Clients.Groups(GroupIds).clientSideMethod(args, args, ...);
// Call method on other connected clients in a specified group
Clients.OthersInGroup(groupName).clientSideMethod(args, args, ...);

In Figura 2, il clientSideMethod è definita nel client il server chiama. Nella sezione successiva, si imparerà a definire questi metodi sul client. Come potete vedere, la natura dinamica della proprietà client consente di scrivere codice per una vasta gamma di server-a-­scenari di comunicazione del cliente.

Il lato Client di SignalR: JavaScript client e .NET

È possibile costruire applicazioni in tempo reale su qualsiasi piattaforma con SignalR. Fuori dalla scatola, è possibile utilizzare il client SignalR JavaScript per tutte le cose Web e applicazioni client HTML, tra cui applicazioni WinJS. Plain HTML e JavaScript sono lingue ampiamente supportati. Per la gente di .NET, Microsoft ha rilasciato un client .NET per Windows e applicazioni desktop. Come i componenti del nucleo, si installa il JavaScript o il Client .NET da NuGet, a seconda del tipo di progetto. Perché JavaScript è solo JavaScript, è possibile scaricare gli script da github.com/SignalR/SignalRe aggiungere < script > Tag alla tua pagina, anziché fare riferimento a file. dll, come illustrato di seguito:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
<script src="~/signalr/hubs"></script>

L'ordine di riferimenti a script è importante. È necessario caricare jQuery in primo luogo perché SignalR dipende da esso. Avanti nella linea è il client di SignalR. L'ultimo è il proxy SignalR. SignalR dinamicamente genera un proxy in fase di esecuzione e scende a /signalr/hubs. Questo proxy è quello che consente di scrivere codice su client e server, eppure l'hanno si comportano come se fosse tutto nella stessa posizione.

Script client dell'applicazione dell'elettore definisce metodi per ricevere le chiamate dal server, nonché metodi ordinari ed evento filo-ups. In Figura 3, la prima riga di codice intrappola una variabile denominata voteHub. Questa è una linea diretta a un'istanza della classe VoteHub. SignalR crea un'istanza del mozzo per ogni client che si connette. Il client avvia la connessione con una chiamata a $.conne­ction.hub.start che restituisce una promessa. Questo significa che il codice non verrà eseguito finché è completa. In questo caso, è una chiamata al metodo del server all'interno dell'evento click del pulsante voto voto. Come potete vedere, passa l'id di elemento per il quale l'utente sta votando al server. Allora il server fa il lavoro delineato Figura 1.

Figura 3 codice JavaScript Client

$(function () {
  var voteHub = $.connection.voteHub;
  $.connection.hub.start().done(function () {
    $("button").click(function () {
      voteHub.server.vote(this.id);
        });
  });
  voteHub.client.updateVoteResults = function (id, vote) {
    // Update UI to show each item and how many votes it has
    }
  voteHub.client.joinVoting = function (votes) {
    // Cycle through votes to display current information
    // about each item to newcomer
  }   
});

A questo punto, si potrebbe pensare ci sono errori di battitura nel Figura 3. Ecco perché la denominazione della classe VoteHub e metodo di votazione è incoerente tra server e client. Che non è un errore di battitura, ma piuttosto una convenzione SignalR. Nei client JavaScript, chiamate a hub.server.methodName andare in camelCase per impostazione predefinita. È abbastanza facile da associare l'attributo HubName alla classe Hub con la capitalizzazione esatta che si desidera modificare questo comportamento. L'attributo HubName assomiglia a questo: HubName("VoteHub").

I due pezzi più interessanti del codice in Figura 3 sono i blocchi voteHub.client.updateVoteResults e voteHub.client.joinVoting. Come indicano le loro firme, entrambi i metodi sono membri della proprietà Client della VoteHub sul server. Riflettendo sul Figura 1, il metodo lato client voteHub.client.updateVoteResults da Figura 3 si allinea con il Clients.All.update­VoteResults (id, voti) chiamare da Figura 1. Figura 4 viene illustrata la relazione tra il server e il codice client.

il rapporto tra Hub e chiamate Client
Figura 4 il rapporto tra Hub e chiamate Client

Ora, è il momento di esaminare il client .NET. Figura 5 Mostra alcuni codici che effettua una connessione da un app di Windows Store XAML utilizzando c#. Questo potrebbe appena come facilmente essere un app di Windows Phone, come il codice è identico. Si inizia creando un collegamento al gasdotto SignalR. Passa poi a creare il proxy.

Quello che si vede Figura 5 che non vedrai normalmente nel client JavaScript è il percorso HTTP SignalR pipeline passato nel costruttore del HubConnection. A differenza del client JavaScript, è leggermente meno automatica. È necessario creare un'istanza di un HubConnection e chiamare CreateHubProxy per creare il proxy.

Figura 5 Store Windows c# codice Client di voto dell'elettore

async private Task startConnection()
{
  var hubConnection = new HubConnection("http://localhost:25024/signalr");
  IHubProxy hubProxy = hubConnection.CreateHubProxy("VoteHub");
  var context = SynchronizationContext.Current;
  hubProxy.On<string, string>("updateVoteResults", (id, votes) =>
    context.Post(delegate {
  // Update UI
); }, null));                        
  await hubConnection.Start();
  await hubProxy.Invoke("vote", "rachel", 
    Convert.ToDecimal(itemId.Text));
}

Si noti che nel Figura 5 c'è un'assegnazione che ottiene un contesto di sincronizzazione. Avvolgere il codice client che il server si chiama con questo oggetto di contesto. Poi potete chiamare il relativo metodo Post e passa un delegato. Delegati in c# sono lo stesso come inline anonimo funzioni in JavaScript.

Dopo aver avviato la connessione dell'hub, è possibile chiamare il metodo Invoke del suo proxy a votare su un elemento. Utilizzando la parola chiave await induce a eseguire tali operazioni in modo asincrono. È possibile trovare il sorgente completo per l'applicazione dell'elettore di demo presso: github.com/rachelappel/VoteR.

SignalR distribuzione: Server e Client

Perché SignalR è ASP.NET, è necessario distribuire ad un ambiente con .NET Framework 4.5 o versioni successive, a meno che non auto-ospitare. In un progetto ASP.NET , SignalR è solo un insieme di librerie. Va insieme con le altre biblioteche quando è il momento di distribuire.

Se pensi che il resto del SignalR è facile, attendere che si tenta di distribuire Microsoft Azure. Utilizzo di Azure rende il processo di distribuzione soprattutto senza stress. Questo distribuisce anche il componente server di SignalR sia almeno un client HTML su un server Web. Naturalmente, è necessario pubblicare qualsiasi archivio Windows o Windows Phone apps di app store e applicazioni desktop desktop attraverso i canali appropriati.

Quelli con eventuali progetti ASP.NET può scegliere pubblica dal menu Visual Studio per avviare la distribuzione di Azure. Se stai usando Visual Studio 2013, si possono solo seguire le istruzioni. Sarà solo necessario immettere le credenziali e scegliere il database e il nome del sito Web.

In Visual Studio 2012, è un set di istruzioni simili. Durante la distribuzione, è possibile scegliere di creare un nuovo sito Web di Azure o selezionare uno esistente. Se si tratta di un sito esistente, accedi al portale Azure, passare alla scheda Configurazione e trovare e attivare WebSocket. Si deve fare con un nuovo sito Web, pure, ma Visual Studio creerà e lanciare il sito in primo luogo, che causerà un errore. Ancora una volta, appena loggati e accendere WebSocket. Questo è l'importante. È una buona idea per interrompere e avviare qualsiasi siti Web dopo una modifica di configurazione.

Conclusioni

SignalR è davvero semplice, in tempo reale di programmazione. Mentre è un prodotto ASP.NET , è multipiattaforma in quanto è possibile scrivere Windows Store, iOS e Android apps con un componente server ASP.NET . È anche possibile auto-ospitare OSes non Microsoft. Questo rende SignalR flessibile, così come semplice ed efficiente. Un'altra grande cosa SignalR è che non è necessario avere funzionalità in tempo reale come un requisito. Uso andando avanti e unire i molti che hanno già adottato il paradigma di programmazione in tempo reale.


Rachel Appel è un consulente, autore, mentore ed ex dipendente di Microsoft con più di 20 anni di esperienza nel settore IT. Lei parla a conferenze di settore superiore come Visual Studio Live!, DevConnections, MIX e altro ancora. Sua competenza si trova all'interno di sviluppare soluzioni che allineare business e tecnologia concentrandosi sullo stack Microsoft dev e aprire il Web. Per ulteriori informazioni su Appel, visitare il suo Web site a rachelappel.com.

Grazie al seguente Microsoft esperto tecnico per la revisione di questo articolo: Frank La Vigne