Zelfstudie: Aan de slag met ASP.NET Core SignalR

In deze zelfstudie leert u de basisbeginselen van het bouwen van een realtime-app met behulp van SignalR. U leert het volgende:

Aan het einde hebt u een werkende chat-app:

Prerequisites

Een web-app-project maken

dotnet new webapp -o SignalRChat
code -r SignalRChat

De SignalR-clientbibliotheek toevoegen

De SignalR serverbibliotheek is opgenomen in het gedeelde ASP.NET Core-framework. De JavaScript-clientbibliotheek wordt niet automatisch opgenomen in het project. Voor deze zelfstudie gebruikt u Library Manager (LibMan) om de clientbibliotheek op te halen uit unpkg. unpkgis een snel wereldwijd netwerk voor contentlevering voor alles op 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"

SignalR Een hub maken

Een hub is een klasse die fungeert als een pijplijn op hoog niveau die communicatie van clientservers afhandelt.

Maak een Hubs map in de projectmap SignalRChat.

Maak in de Hubs map de ChatHub klasse met de volgende code:

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

De ChatHub klasse neemt over van de SignalRHub klasse. De Hub klasse beheert verbindingen, groepen en berichten.

De SendMessage methode kan worden aangeroepen door een verbonden client om een bericht naar alle clients te verzenden. JavaScript-clientcode die de methode aanroept, wordt verderop in de zelfstudie weergegeven. SignalR code is asynchroon om de maximale schaalbaarheid te bieden.

SignalR configureren

De SignalR server moet worden geconfigureerd om aanvragen door te geven SignalR aan SignalR. Voeg de volgende gemarkeerde code toe aan het Program.cs bestand.

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

De voorgaande gemarkeerde code voegt SignalR toe aan de systemen voor afhankelijkheidsinjectie en routering in ASP.NET Core.

Clientcode toevoegen SignalR

Vervang de inhoud in Pages/Index.cshtml door de volgende code:

@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>

De voorgaande markeringen:

• Hiermee maakt u tekstvakken en een verzendknop.
• Hiermee maakt u een lijst met id="messagesList" voor het weergeven van berichten die zijn ontvangen van de SignalR hub.
• Bevat scriptverwijzingen naar SignalR en de chat.js app-code wordt gemaakt in de volgende stap.

Maak in de wwwroot/js map een chat.js bestand met de volgende code:

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

De voorgaande JavaScript:

• Hiermee maakt en start u verbinding.
• Voegt toe aan de verzendknop een handler die berichten naar de hub verzendt.
• Voegt toe aan het verbindingsobject een handler die berichten van de hub ontvangt en deze toevoegt aan de lijst.

De app uitvoeren

Kopieer de URL van de adresbalk, open een ander browserexemplaar of tabblad en plak de URL in de adresbalk.

Kies een van beide browsers, voer een naam en bericht in en selecteer de knop Bericht verzenden .

De naam en het bericht worden direct op beide pagina's weergegeven.

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

Publiceren naar Azure

Zie Quickstart: Een ASP.NET-web-app implementerenvoor meer informatie over het implementeren in Azure. Zie SignalRSignalR Service.

Volgende stappen

• Hubs gebruiken
• Sterk getypeerde hubs
• Verificatie en autorisatie in ASP.NET Core SignalR
• Voorbeeldcode bekijken of downloaden (hoe download je)

In deze zelfstudie leert u de basisbeginselen van het bouwen van een realtime-app met behulp van SignalR. U leert het volgende:

Aan het einde hebt u een werkende chat-app:

Prerequisites

Een web-app-project maken

dotnet new webapp -o SignalRChat
code -r SignalRChat

De SignalR-clientbibliotheek toevoegen

De SignalR serverbibliotheek is opgenomen in het gedeelde ASP.NET Core-framework. De JavaScript-clientbibliotheek wordt niet automatisch opgenomen in het project. Voor deze zelfstudie gebruikt u Library Manager (LibMan) om de clientbibliotheek op te halen uit unpkg. unpkgis een snel wereldwijd netwerk voor contentlevering voor alles op 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"

SignalR Een hub maken

Een hub is een klasse die fungeert als een pijplijn op hoog niveau die communicatie van clientservers afhandelt.

Maak een Hubs map in de projectmap SignalRChat.

Maak in de Hubs map de ChatHub klasse met de volgende code:

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

De ChatHub klasse neemt over van de SignalRHub klasse. De Hub klasse beheert verbindingen, groepen en berichten.

De SendMessage methode kan worden aangeroepen door een verbonden client om een bericht naar alle clients te verzenden. JavaScript-clientcode die de methode aanroept, wordt verderop in de zelfstudie weergegeven. SignalR code is asynchroon om de maximale schaalbaarheid te bieden.

SignalR configureren

De SignalR server moet worden geconfigureerd om aanvragen door te geven SignalR aan SignalR. Voeg de volgende gemarkeerde code toe aan het Program.cs bestand.

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

De voorgaande gemarkeerde code voegt SignalR toe aan de systemen voor afhankelijkheidsinjectie en routering in ASP.NET Core.

Clientcode toevoegen SignalR

Vervang de inhoud in Pages/Index.cshtml door de volgende code:

@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>

De voorgaande markeringen:

• Hiermee maakt u tekstvakken en een verzendknop.
• Hiermee maakt u een lijst met id="messagesList" voor het weergeven van berichten die zijn ontvangen van de SignalR hub.
• Bevat scriptverwijzingen naar SignalR en de chat.js app-code wordt gemaakt in de volgende stap.

Maak in de wwwroot/js map een chat.js bestand met de volgende code:

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

De voorgaande JavaScript:

• Hiermee maakt en start u verbinding.
• Voegt toe aan de verzendknop een handler die berichten naar de hub verzendt.
• Voegt toe aan het verbindingsobject een handler die berichten van de hub ontvangt en deze toevoegt aan de lijst.

De app uitvoeren

Kopieer de URL van de adresbalk, open een ander browserexemplaar of tabblad en plak de URL in de adresbalk.

Kies een van beide browsers, voer een naam en bericht in en selecteer de knop Bericht verzenden .

De naam en het bericht worden direct op beide pagina's weergegeven.

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

Publiceren naar Azure

Zie Quickstart: Een ASP.NET-web-app implementerenvoor meer informatie over het implementeren in Azure. Zie SignalRSignalR Service.

Volgende stappen

• Hubs gebruiken
• Sterk getypeerde hubs
• Verificatie en autorisatie in ASP.NET Core SignalR
• Voorbeeldcode bekijken of downloaden (hoe download je)

In deze zelfstudie leert u de basisbeginselen van het bouwen van een realtime-app met behulp van SignalR. U leert het volgende:

Aan het einde hebt u een werkende chat-app:

Prerequisites

Een web-app-project maken

dotnet new webapp -o SignalRChat
code -r SignalRChat

De SignalR-clientbibliotheek toevoegen

De SignalR serverbibliotheek is opgenomen in het gedeelde ASP.NET Core-framework. De JavaScript-clientbibliotheek wordt niet automatisch opgenomen in het project. Voor deze zelfstudie gebruikt u Library Manager (LibMan) om de clientbibliotheek op te halen uit unpkg. unpkgis een snel wereldwijd netwerk voor contentlevering voor alles op 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"

SignalR Een hub maken

Een hub is een klasse die fungeert als een pijplijn op hoog niveau die communicatie van clientservers afhandelt.

Maak een Hubs map in de projectmap SignalRChat.

Maak in de Hubs map de ChatHub klasse met de volgende code:

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

De ChatHub klasse neemt over van de SignalRHub klasse. De Hub klasse beheert verbindingen, groepen en berichten.

De SendMessage methode kan worden aangeroepen door een verbonden client om een bericht naar alle clients te verzenden. JavaScript-clientcode die de methode aanroept, wordt verderop in de zelfstudie weergegeven. SignalR code is asynchroon om de maximale schaalbaarheid te bieden.

SignalR configureren

De SignalR server moet worden geconfigureerd om aanvragen door te geven SignalR aan SignalR. Voeg de volgende gemarkeerde code toe aan het Program.cs bestand.

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

De voorgaande gemarkeerde code voegt SignalR toe aan de systemen voor afhankelijkheidsinjectie en routering in ASP.NET Core.

Clientcode toevoegen SignalR

Vervang de inhoud in Pages/Index.cshtml door de volgende code:

@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>

De voorgaande markeringen:

• Hiermee maakt u tekstvakken en een verzendknop.
• Hiermee maakt u een lijst met id="messagesList" voor het weergeven van berichten die zijn ontvangen van de SignalR hub.
• Bevat scriptverwijzingen naar SignalR en de chat.js app-code wordt gemaakt in de volgende stap.

Maak in de wwwroot/js map een chat.js bestand met de volgende code:

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

De voorgaande JavaScript:

• Hiermee maakt en start u verbinding.
• Voegt toe aan de verzendknop een handler die berichten naar de hub verzendt.
• Voegt toe aan het verbindingsobject een handler die berichten van de hub ontvangt en deze toevoegt aan de lijst.

De app uitvoeren

Kopieer de URL van de adresbalk, open een ander browserexemplaar of tabblad en plak de URL in de adresbalk.

Kies een van beide browsers, voer een naam en bericht in en selecteer de knop Bericht verzenden .

De naam en het bericht worden direct op beide pagina's weergegeven.

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

Publiceren naar Azure

Zie Quickstart: Een ASP.NET-web-app implementerenvoor meer informatie over het implementeren in Azure. Zie SignalRSignalR Service.

Volgende stappen

• Hubs gebruiken
• Sterk getypeerde hubs
• Verificatie en autorisatie in ASP.NET Core SignalR
• Voorbeeldcode bekijken of downloaden (hoe download je)

In deze zelfstudie leert u de basisbeginselen van het bouwen van een realtime-app met behulp van SignalR. U leert het volgende:

Aan het einde hebt u een werkende chat-app:

Prerequisites

Een web-app-project maken

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

De SignalR-clientbibliotheek toevoegen

De SignalR serverbibliotheek is opgenomen in het gedeelde framework ASP.NET Core 3.1. De JavaScript-clientbibliotheek wordt niet automatisch opgenomen in het project. Voor deze zelfstudie gebruikt u Library Manager (LibMan) om de clientbibliotheek op te halen uit unpkg. unpkg is een CDN (Content Delivery Network) dat alles kan leveren in npm, de Node.js package manager.

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"

SignalR Een hub maken

Een hub is een klasse die fungeert als een pijplijn op hoog niveau die communicatie van clientservers afhandelt.

• Maak in de projectmap SignalRChat een Hubs map.
• Maak in de map Hubs een ChatHub.cs bestand met de volgende code:

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

De ChatHub klasse neemt over van de SignalRHub klasse. De Hub klasse beheert verbindingen, groepen en berichten.

De SendMessage methode kan worden aangeroepen door een verbonden client om een bericht naar alle clients te verzenden. JavaScript-clientcode die de methode aanroept, wordt verderop in de zelfstudie weergegeven. SignalR code is asynchroon om de maximale schaalbaarheid te bieden.

SignalR configureren

De SignalR server moet worden geconfigureerd om aanvragen door te geven SignalR aan SignalR.

• Voeg de volgende gemarkeerde code toe aan het Startup.cs bestand.

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

  Deze wijzigingen voegen SignalR toe aan de ASP.NET Core-afhankelijkheidsinjectie- en routeringssystemen.

Clientcode toevoegen SignalR

• Vervang de inhoud in Pages/Index.cshtml door de volgende code:

  @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>
  

  De voorgaande code:

  • Hiermee maakt u tekstvakken voor naam en berichttekst en een verzendknop.
  • Hiermee maakt u een lijst met id="messagesList" voor het weergeven van berichten die zijn ontvangen van de SignalR hub.
  • Bevat scriptverwijzingen naar SignalR en de chat.js toepassingscode die u in de volgende stap maakt.

• Maak in de map wwwroot/js een chat.js bestand met de volgende code:

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

  De voorgaande code:

  • Hiermee maakt en start u verbinding.
  • Voegt toe aan de verzendknop een handler die berichten naar de hub verzendt.
  • Voegt toe aan het verbindingsobject een handler die berichten van de hub ontvangt en deze toevoegt aan de lijst.

De app uitvoeren

• Kopieer de URL van de adresbalk, open een ander browserexemplaar of tabblad en plak de URL in de adresbalk.
• Kies een van beide browsers, voer een naam en bericht in en selecteer de knop Bericht verzenden . De naam en het bericht worden direct op beide pagina's weergegeven.

Publiceren naar Azure

Zie Quickstart: Een ASP.NET-web-app implementerenvoor meer informatie over het implementeren in Azure.

Volgende stappen

• Hubs gebruiken
• Sterk getypeerde hubs
• Verificatie en autorisatie in ASP.NET Core SignalR
• Voorbeeldcode bekijken of downloaden (hoe download je)