Esercitazione: Introduzione a ASP.NET Core SignalR

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale usando SignalR. Scopri come:

Al termine, si disporrà di un'app di chat funzionante:

Prerequisiti

Creare un progetto di app Web

dotnet new webapp -o SignalRChat
code -r SignalRChat

Aggiungere la SignalR libreria client

La SignalR libreria server è inclusa nel framework condiviso ASP.NET Core. La libreria client JavaScript non viene inclusa automaticamente nel progetto. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg. unpkgè una rete di distribuzione di contenuti veloce e globale per tutti gli elementi in npm.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

Downloading file https://unpkg.com/@microsoft/signalr@latest/dist/browser/signalr.js...
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Creare un SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.

Nella cartella del progetto SignalRChat creare una Hubs cartella.

Hubs Nella cartella creare la ChatHub classe con il codice seguente:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

La classe ChatHub eredita dalla classe SignalRHub. La classe Hub gestisce connessioni, gruppi e messaggistica.

Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione. SignalR il codice è asincrono per garantire la massima scalabilità.

ConfigurareSignalR

Il SignalR server deve essere configurato per passare SignalR le richieste a SignalR. Aggiungere il codice evidenziato seguente al Program.cs file.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Il codice evidenziato precedente aggiunge SignalR ai sistemi di routing e inserimento delle dipendenze core di ASP.NET.

Aggiungere SignalR codice client

Sostituire il contenuto in Pages/Index.cshtml con il codice seguente:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Il markup precedente:

• Crea caselle di testo e un pulsante di invio.
• Crea un elenco con id="messagesList" per visualizzare i messaggi ricevuti dall'hub SignalR .
• Include riferimenti di script a SignalR e il codice dell'app chat.js viene creato nel passaggio successivo.

wwwroot/js Nella cartella creare un chat.js file con il codice seguente:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

JavaScript precedente:

• Crea e avvia una connessione.
• Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.
• Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.

Eseguire l'app

Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio.

Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Pubblicare in Azure

Per informazioni sulla distribuzione in Azure, vedere Avvio rapido: Distribuire un'app Web ASP.NET. Per altre informazioni sul servizio di Azure SignalR , vedere Che cos'è il servizio di Azure SignalR ?.

Passaggi successivi

• Usare hub
• Hub fortemente tipizzato
• Autenticazione e autorizzazione in ASP.NET Core SignalR
• Visualizzare o scaricare il codice di esempio (procedura per il download)

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale usando SignalR. Scopri come:

Al termine, si disporrà di un'app di chat funzionante:

Prerequisiti

Creare un progetto di app Web

dotnet new webapp -o SignalRChat
code -r SignalRChat

Aggiungere la SignalR libreria client

La SignalR libreria server è inclusa nel framework condiviso ASP.NET Core. La libreria client JavaScript non viene inclusa automaticamente nel progetto. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg. unpkgè una rete di distribuzione di contenuti veloce e globale per tutti gli elementi in npm.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Creare un SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.

Nella cartella del progetto SignalRChat creare una Hubs cartella.

Hubs Nella cartella creare la ChatHub classe con il codice seguente:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

La classe ChatHub eredita dalla classe SignalRHub. La classe Hub gestisce connessioni, gruppi e messaggistica.

Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione. SignalR il codice è asincrono per garantire la massima scalabilità.

ConfigurareSignalR

Il SignalR server deve essere configurato per passare SignalR le richieste a SignalR. Aggiungere il codice evidenziato seguente al Program.cs file.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Il codice evidenziato precedente aggiunge SignalR ai sistemi di routing e inserimento delle dipendenze core di ASP.NET.

Aggiungere SignalR codice client

Sostituire il contenuto in Pages/Index.cshtml con il codice seguente:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Il markup precedente:

• Crea caselle di testo e un pulsante di invio.
• Crea un elenco con id="messagesList" per visualizzare i messaggi ricevuti dall'hub SignalR .
• Include riferimenti di script a SignalR e il codice dell'app chat.js viene creato nel passaggio successivo.

wwwroot/js Nella cartella creare un chat.js file con il codice seguente:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

JavaScript precedente:

• Crea e avvia una connessione.
• Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.
• Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.

Eseguire l'app

Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio.

Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Pubblicare in Azure

Per informazioni sulla distribuzione in Azure, vedere Avvio rapido: Distribuire un'app Web ASP.NET. Per altre informazioni sul servizio di Azure SignalR , vedere Che cos'è il servizio di Azure SignalR ?.

Passaggi successivi

• Usare hub
• Hub fortemente tipizzato
• Autenticazione e autorizzazione in ASP.NET Core SignalR
• Visualizzare o scaricare il codice di esempio (procedura per il download)

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale usando SignalR. Scopri come:

Al termine, si disporrà di un'app di chat funzionante:

Prerequisiti

Creare un progetto di app Web

dotnet new webapp -o SignalRChat
code -r SignalRChat

Aggiungere la SignalR libreria client

La SignalR libreria server è inclusa nel framework condiviso ASP.NET Core. La libreria client JavaScript non viene inclusa automaticamente nel progetto. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg. unpkgè una rete di distribuzione di contenuti veloce e globale per tutti gli elementi in npm.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Creare un SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.

Nella cartella del progetto SignalRChat creare una Hubs cartella.

Hubs Nella cartella creare la ChatHub classe con il codice seguente:

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

La classe ChatHub eredita dalla classe SignalRHub. La classe Hub gestisce connessioni, gruppi e messaggistica.

Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione. SignalR il codice è asincrono per garantire la massima scalabilità.

ConfigurareSignalR

Il SignalR server deve essere configurato per passare SignalR le richieste a SignalR. Aggiungere il codice evidenziato seguente al Program.cs file.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Il codice evidenziato precedente aggiunge SignalR ai sistemi di routing e inserimento delle dipendenze core di ASP.NET.

Aggiungere SignalR codice client

Sostituire il contenuto in Pages/Index.cshtml con il codice seguente:

@page
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Il markup precedente:

• Crea caselle di testo e un pulsante di invio.
• Crea un elenco con id="messagesList" per visualizzare i messaggi ricevuti dall'hub SignalR .
• Include riferimenti di script a SignalR e il codice dell'app chat.js viene creato nel passaggio successivo.

wwwroot/js Nella cartella creare un chat.js file con il codice seguente:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

JavaScript precedente:

• Crea e avvia una connessione.
• Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.
• Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.

Eseguire l'app

Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.

Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio.

Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Pubblicare in Azure

Per informazioni sulla distribuzione in Azure, vedere Avvio rapido: Distribuire un'app Web ASP.NET. Per altre informazioni sul servizio di Azure SignalR , vedere Che cos'è il servizio di Azure SignalR ?.

Passaggi successivi

• Usare hub
• Hub fortemente tipizzato
• Autenticazione e autorizzazione in ASP.NET Core SignalR
• Visualizzare o scaricare il codice di esempio (procedura per il download)

Questa esercitazione illustra le nozioni di base per la creazione di un'app in tempo reale usando SignalR. Scopri come:

Al termine, si disporrà di un'app di chat funzionante:

Prerequisiti

Creare un progetto di app Web

dotnet new webapp -o SignalRChat
cd SignalRChat
code -r .

Aggiungere la SignalR libreria client

La SignalR libreria server è inclusa nel framework condiviso ASP.NET Core 3.1. La libreria client JavaScript non viene inclusa automaticamente nel progetto. Per questa esercitazione, usare Gestione librerie (LibMan) per ottenere la libreria client da unpkg. unpkg è una rete per la distribuzione di contenuti (RETE CDN) che può recapitare qualsiasi elemento trovato in npm, il nodo.js Gestione pacchetti.

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Creare un SignalR hub

Un hub è una classe usata come pipeline di alto livello che gestisce le comunicazioni client-server.

• Nella cartella del progetto SignalRChat creare una cartella Hubs.
• Nella cartella Hubs creare un ChatHub.cs file con il codice seguente:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

La classe ChatHub eredita dalla classe SignalRHub. La classe Hub gestisce connessioni, gruppi e messaggistica.

Il metodo SendMessage può essere chiamato da un client connesso per inviare un messaggio a tutti i client. Il codice client JavaScript che chiama il metodo è illustrato più avanti nell'esercitazione. SignalR il codice è asincrono per garantire la massima scalabilità.

ConfigurareSignalR

Il SignalR server deve essere configurato per passare SignalR le richieste a SignalR.

• Aggiungere il codice evidenziato seguente al Startup.cs file.

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.AspNetCore.HttpsPolicy;
  using Microsoft.Extensions.Configuration;
  using Microsoft.Extensions.DependencyInjection;
  using Microsoft.Extensions.Hosting;
  using SignalRChat.Hubs;
  
  namespace SignalRChat
  {
      public class Startup
      {
          public Startup(IConfiguration configuration)
          {
              Configuration = configuration;
          }
  
          public IConfiguration Configuration { get; }
  
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
          {
              services.AddRazorPages();
              services.AddSignalR();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
              else
              {
                  app.UseExceptionHandler("/Error");
                  // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                  app.UseHsts();
              }
  
              app.UseHttpsRedirection();
              app.UseStaticFiles();
  
              app.UseRouting();
  
              app.UseAuthorization();
  
              app.UseEndpoints(endpoints =>
              {
                  endpoints.MapRazorPages();
                  endpoints.MapHub<ChatHub>("/chatHub");
              });
          }
      }
  }
  

  Queste modifiche vengono aggiunte SignalR ai sistemi di inserimento e routing delle dipendenze core di ASP.NET.

Aggiungere SignalR codice client

• Sostituire il contenuto in Pages/Index.cshtml con il codice seguente:

  @page
      <div class="container">
          <div class="row p-1">
              <div class="col-1">User</div>
              <div class="col-5"><input type="text" id="userInput" /></div>
          </div>
          <div class="row p-1">
              <div class="col-1">Message</div>
              <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
          </div>
          <div class="row p-1">
              <div class="col-6 text-end">
                  <input type="button" id="sendButton" value="Send Message" />
              </div>
          </div>
          <div class="row p-1">
              <div class="col-6">
                  <hr />
              </div>
          </div>
          <div class="row p-1">
              <div class="col-6">
                  <ul id="messagesList"></ul>
              </div>
          </div>
      </div>
  <script src="~/js/signalr/dist/browser/signalr.js"></script>
  <script src="~/js/chat.js"></script>
  

  Il codice precedente:

  • Crea le caselle di testo per il nome e il messaggio di testo, nonché un pulsante di invio.
  • Crea un elenco con id="messagesList" per visualizzare i messaggi ricevuti dall'hub SignalR .
  • Include i riferimenti di script a SignalR e il codice dell'applicazione chat.js creato nel passaggio successivo.

• Nella cartella wwwroot/js creare un chat.js file con il codice seguente:

  "use strict";
  
  var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
  
  //Disable send button until connection is established
  document.getElementById("sendButton").disabled = true;
  
  connection.on("ReceiveMessage", function (user, message) {
      var li = document.createElement("li");
      document.getElementById("messagesList").appendChild(li);
      // We can assign user-supplied strings to an element's textContent because it
      // is not interpreted as markup. If you're assigning in any other way, you 
      // should be aware of possible script injection concerns.
      li.textContent = `${user} says ${message}`;
  });
  
  connection.start().then(function () {
      document.getElementById("sendButton").disabled = false;
  }).catch(function (err) {
      return console.error(err.toString());
  });
  
  document.getElementById("sendButton").addEventListener("click", function (event) {
      var user = document.getElementById("userInput").value;
      var message = document.getElementById("messageInput").value;
      connection.invoke("SendMessage", user, message).catch(function (err) {
          return console.error(err.toString());
      });
      event.preventDefault();
  });
  

  Il codice precedente:

  • Crea e avvia una connessione.
  • Aggiunge al pulsante di invio un gestore che invia messaggi all'hub.
  • Aggiunge all'oggetto connessione un gestore che riceve i messaggi dall'hub e li aggiunge all'elenco.

Eseguire l'app

• Copiare l'URL dalla barra degli indirizzi, aprire un'altra istanza o scheda del browser e incollare l'URL nella barra degli indirizzi.
• Scegliere un browser, immettere un nome e un messaggio e fare clic sul pulsante Invia messaggio. Nome e messaggio vengono visualizzati immediatamente in entrambe le pagine.

Pubblicare in Azure

Per informazioni sulla distribuzione in Azure, vedere Avvio rapido: Distribuire un'app Web ASP.NET.

Passaggi successivi

• Usare hub
• Hub fortemente tipizzato
• Autenticazione e autorizzazione in ASP.NET Core SignalR
• Visualizzare o scaricare il codice di esempio (procedura per il download)