Självstudie: Kom igång med ASP.NET Core SignalR

I den här handledningen lär du grunderna i att skapa en realtidsapp med hjälp av SignalR. Du lär dig att:

I slutet har du en fungerande chattapp:

Prerequisites

Skapa ett webbappsprojekt

dotnet new webapp -o SignalRChat
code -r SignalRChat

Lägg till SignalR-klientbiblioteket

Serverbiblioteket SignalR ingår i det delade ramverket ASP.NET Core. JavaScript-klientbiblioteket ingår inte automatiskt i projektet. I den här självstudien använder du Bibliotekshanteraren (LibMan) för att hämta klientbiblioteket från unpkg. unpkgär ett snabbt, globalt nätverk för innehållsleverans för allt på 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"

Skapa en SignalR hubb

En hubb är en klass som fungerar som en pipeline på hög nivå som hanterar kommunikation mellan klient och server.

Skapa en Hubs mapp i projektmappen SignalRChat.

Hubs Skapa klassen i mappen ChatHub med följande kod:

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

Klassen ChatHub ärver från SignalRHub klassen. Klassen Hub hanterar anslutningar, grupper och meddelanden.

Metoden SendMessage kan anropas av en ansluten klient för att skicka ett meddelande till alla klienter. JavaScript-klientkod som anropar metoden visas senare i självstudien. SignalR koden är asynkron för att ge maximal skalbarhet.

Konfigurera SignalR

Servern SignalR måste konfigureras för att skicka SignalR begäranden till SignalR. Lägg till följande markerade kod i Program.cs filen.

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

Den föregående markerade koden lägger SignalR till i ASP.NET Core-beroendeinmatnings- och routningssystem.

Lägg till SignalR klientkod

Ersätt innehållet i Pages/Index.cshtml med följande kod:

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

Föregående markering:

• Skapar textrutor och en skicka-knapp.
• Skapar en lista med id="messagesList" för att visa meddelanden som tas emot från SignalR hubben.
• Innehåller skriptreferenser till SignalR och chat.js appkoden skapas i nästa steg.

I mappen wwwroot/js skapar du en chat.js fil med följande kod:

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

Föregående JavaScript:

• Skapar och startar en anslutning.
• Lägger till en hanterare i skicka-knappen som skickar meddelanden till hubben.
• Lägger till en hanterare i anslutningsobjektet som tar emot meddelanden från hubben och lägger till dem i listan.

Kör appen

Kopiera URL:en från adressfältet, öppna en annan webbläsarinstans eller flik och klistra in URL:en i adressfältet.

Välj någon av webbläsarna, ange ett namn och ett meddelande och välj knappen Skicka meddelande .

Namnet och meddelandet visas omedelbart på båda sidorna.

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

Publicera till Azure

Information om hur du distribuerar till Azure finns i Snabbstart: Distribuera en ASP.NET webbapp. Mer information om Azure SignalR Service finns i Vad är Azure SignalR Service?.

Nästa steg

• Använda hubbar
• Starkt skrivna hubbar
• Autentisering och auktorisering i ASP.NET Core SignalR
• Visa eller ladda ned exempelkod (hur du laddar ned)

I den här handledningen lär du grunderna i att skapa en realtidsapp med hjälp av SignalR. Du lär dig att:

I slutet har du en fungerande chattapp:

Prerequisites

Skapa ett webbappsprojekt

dotnet new webapp -o SignalRChat
code -r SignalRChat

Lägg till SignalR-klientbiblioteket

Serverbiblioteket SignalR ingår i det delade ramverket ASP.NET Core. JavaScript-klientbiblioteket ingår inte automatiskt i projektet. I den här självstudien använder du Bibliotekshanteraren (LibMan) för att hämta klientbiblioteket från unpkg. unpkgär ett snabbt, globalt nätverk för innehållsleverans för allt på 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"

Skapa en SignalR hubb

En hubb är en klass som fungerar som en pipeline på hög nivå som hanterar kommunikation mellan klient och server.

Skapa en Hubs mapp i projektmappen SignalRChat.

Hubs Skapa klassen i mappen ChatHub med följande kod:

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

Klassen ChatHub ärver från SignalRHub klassen. Klassen Hub hanterar anslutningar, grupper och meddelanden.

Metoden SendMessage kan anropas av en ansluten klient för att skicka ett meddelande till alla klienter. JavaScript-klientkod som anropar metoden visas senare i självstudien. SignalR koden är asynkron för att ge maximal skalbarhet.

Konfigurera SignalR

Servern SignalR måste konfigureras för att skicka SignalR begäranden till SignalR. Lägg till följande markerade kod i Program.cs filen.

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

Den föregående markerade koden lägger SignalR till i ASP.NET Core-beroendeinmatnings- och routningssystem.

Lägg till SignalR klientkod

Ersätt innehållet i Pages/Index.cshtml med följande kod:

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

Föregående markering:

• Skapar textrutor och en skicka-knapp.
• Skapar en lista med id="messagesList" för att visa meddelanden som tas emot från SignalR hubben.
• Innehåller skriptreferenser till SignalR och chat.js appkoden skapas i nästa steg.

I mappen wwwroot/js skapar du en chat.js fil med följande kod:

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

Föregående JavaScript:

• Skapar och startar en anslutning.
• Lägger till en hanterare i skicka-knappen som skickar meddelanden till hubben.
• Lägger till en hanterare i anslutningsobjektet som tar emot meddelanden från hubben och lägger till dem i listan.

Kör appen

Kopiera URL:en från adressfältet, öppna en annan webbläsarinstans eller flik och klistra in URL:en i adressfältet.

Välj någon av webbläsarna, ange ett namn och ett meddelande och välj knappen Skicka meddelande .

Namnet och meddelandet visas omedelbart på båda sidorna.

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

Publicera till Azure

Information om hur du distribuerar till Azure finns i Snabbstart: Distribuera en ASP.NET webbapp. Mer information om Azure SignalR Service finns i Vad är Azure SignalR Service?.

Nästa steg

• Använda hubbar
• Starkt skrivna hubbar
• Autentisering och auktorisering i ASP.NET Core SignalR
• Visa eller ladda ned exempelkod (hur du laddar ned)

I den här handledningen lär du grunderna i att skapa en realtidsapp med hjälp av SignalR. Du lär dig att:

I slutet har du en fungerande chattapp:

Prerequisites

Skapa ett webbappsprojekt

dotnet new webapp -o SignalRChat
code -r SignalRChat

Lägg till SignalR-klientbiblioteket

Serverbiblioteket SignalR ingår i det delade ramverket ASP.NET Core. JavaScript-klientbiblioteket ingår inte automatiskt i projektet. I den här självstudien använder du Bibliotekshanteraren (LibMan) för att hämta klientbiblioteket från unpkg. unpkgär ett snabbt, globalt nätverk för innehållsleverans för allt på 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"

Skapa en SignalR hubb

En hubb är en klass som fungerar som en pipeline på hög nivå som hanterar kommunikation mellan klient och server.

Skapa en Hubs mapp i projektmappen SignalRChat.

Hubs Skapa klassen i mappen ChatHub med följande kod:

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

Klassen ChatHub ärver från SignalRHub klassen. Klassen Hub hanterar anslutningar, grupper och meddelanden.

Metoden SendMessage kan anropas av en ansluten klient för att skicka ett meddelande till alla klienter. JavaScript-klientkod som anropar metoden visas senare i självstudien. SignalR koden är asynkron för att ge maximal skalbarhet.

Konfigurera SignalR

Servern SignalR måste konfigureras för att skicka SignalR begäranden till SignalR. Lägg till följande markerade kod i Program.cs filen.

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

Den föregående markerade koden lägger SignalR till i ASP.NET Core-beroendeinmatnings- och routningssystem.

Lägg till SignalR klientkod

Ersätt innehållet i Pages/Index.cshtml med följande kod:

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

Föregående markering:

• Skapar textrutor och en skicka-knapp.
• Skapar en lista med id="messagesList" för att visa meddelanden som tas emot från SignalR hubben.
• Innehåller skriptreferenser till SignalR och chat.js appkoden skapas i nästa steg.

I mappen wwwroot/js skapar du en chat.js fil med följande kod:

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

Föregående JavaScript:

• Skapar och startar en anslutning.
• Lägger till en hanterare i skicka-knappen som skickar meddelanden till hubben.
• Lägger till en hanterare i anslutningsobjektet som tar emot meddelanden från hubben och lägger till dem i listan.

Kör appen

Kopiera URL:en från adressfältet, öppna en annan webbläsarinstans eller flik och klistra in URL:en i adressfältet.

Välj någon av webbläsarna, ange ett namn och ett meddelande och välj knappen Skicka meddelande .

Namnet och meddelandet visas omedelbart på båda sidorna.

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

Publicera till Azure

Information om hur du distribuerar till Azure finns i Snabbstart: Distribuera en ASP.NET webbapp. Mer information om Azure SignalR Service finns i Vad är Azure SignalR Service?.

Nästa steg

• Använda hubbar
• Starkt skrivna hubbar
• Autentisering och auktorisering i ASP.NET Core SignalR
• Visa eller ladda ned exempelkod (hur du laddar ned)

I den här handledningen lär du grunderna i att skapa en realtidsapp med hjälp av SignalR. Du lär dig att:

I slutet har du en fungerande chattapp:

Prerequisites

Skapa ett webbappsprojekt

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

Lägg till SignalR-klientbiblioteket

Serverbiblioteket SignalR ingår i det delade ramverket ASP.NET Core 3.1. JavaScript-klientbiblioteket ingår inte automatiskt i projektet. I den här självstudien använder du Bibliotekshanteraren (LibMan) för att hämta klientbiblioteket från unpkg. unpkg är ett nätverk för innehållsleverans (CDN) som kan leverera allt som finns i npm, Node.js pakethanteraren.

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"

Skapa en SignalR hubb

En hubb är en klass som fungerar som en pipeline på hög nivå som hanterar kommunikation mellan klient och server.

• Skapa en Hubs-mapp i projektmappen SignalRChat.
• I mappen Hubs skapar du en ChatHub.cs fil med följande kod:

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

Klassen ChatHub ärver från SignalRHub klassen. Klassen Hub hanterar anslutningar, grupper och meddelanden.

Metoden SendMessage kan anropas av en ansluten klient för att skicka ett meddelande till alla klienter. JavaScript-klientkod som anropar metoden visas senare i självstudien. SignalR koden är asynkron för att ge maximal skalbarhet.

Konfigurera SignalR

Servern SignalR måste konfigureras för att skicka SignalR begäranden till SignalR.

• Lägg till följande markerade kod i Startup.cs filen.

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

  Dessa ändringar lägger till SignalR i ASP.NET Core-beroendeinmatnings- och routningssystem.

Lägg till SignalR klientkod

• Ersätt innehållet i Pages/Index.cshtml med följande kod:

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

  Föregående kod:

  • Skapar textrutor för namn och meddelandetext och en skicka-knapp.
  • Skapar en lista med id="messagesList" för att visa meddelanden som tas emot från SignalR hubben.
  • Innehåller skriptreferenser till SignalR och programkoden chat.js som du skapar i nästa steg.

• I mappen wwwroot/js skapar du en chat.js fil med följande kod:

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

  Föregående kod:

  • Skapar och startar en anslutning.
  • Lägger till en hanterare i skicka-knappen som skickar meddelanden till hubben.
  • Lägger till en hanterare i anslutningsobjektet som tar emot meddelanden från hubben och lägger till dem i listan.

Kör appen

• Kopiera URL:en från adressfältet, öppna en annan webbläsarinstans eller flik och klistra in URL:en i adressfältet.
• Välj någon av webbläsarna, ange ett namn och ett meddelande och välj knappen Skicka meddelande . Namnet och meddelandet visas omedelbart på båda sidorna.

Publicera till Azure

Information om hur du distribuerar till Azure finns i Snabbstart: Distribuera en ASP.NET webbapp.

Nästa steg

• Använda hubbar
• Starkt skrivna hubbar
• Autentisering och auktorisering i ASP.NET Core SignalR
• Visa eller ladda ned exempelkod (hur du laddar ned)