Megosztás a következőn keresztül:

Oktatóanyag: A ASP.NET Core használatának első lépései SignalR

Note

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Warning

A ASP.NET Core ezen verziója már nem támogatott. További információt a .NET és a .NET Core támogatási szabályzatában talál. A jelen cikk .NET 9-es verzióját lásd az aktuális kiadásért .

Ez az oktatóanyag bemutatja a valós idejű alkalmazások SignalRhasználatának alapjait. Megtudhatja, hogyan:

  • Webes projekt létrehozása.
  • Adja hozzá az SignalR ügyfélkódtárat.
  • Hozzon létre egy központot SignalR .
  • Állítsa be a projektet, hogy a(z) SignalR-t használja.
  • Adjon hozzá olyan kódot, amely üzeneteket küld bármely ügyfélről az összes csatlakoztatott ügyfélnek.

A végén egy működő csevegőalkalmazással fog rendelkezni:

SignalR mintaalkalmazás

Prerequisites

Webalkalmazás-projekt létrehozása

Indítsa el a Visual Studio 2022-t, és válassza az Új projekt létrehozása lehetőséget.

Új projekt létrehozása a kezdőablakból

Az Új projekt létrehozása párbeszédpanelen válassza a ASP.NET Core Web App (Razor Pages) elemet, majd a Tovább gombot.

ASP.NET Core-webalkalmazás létrehozása

Az új projekt konfigurálása párbeszédpanelen adja meg SignalRChat a Projekt nevét. Fontos a projekt SignalRChatelnevezése , beleértve a nagybetűsítésnek való megfelelést is, hogy a névterek egyezzenek az oktatóanyagban szereplő kóddal.

Válassza a Következőlehetőséget.

A További információk párbeszédpanelen válassza .NET 8.0 (hosszú távú támogatás), majd válassza a létrehozása lehetőséget.

További információk

Add hozzá a SignalR ügyfélkönyvtárat

A SignalR kiszolgálókódtár a ASP.NET Core megosztott keretrendszerében található. A JavaScript-ügyfélkódtár nem szerepel automatikusan a projektben. Ebben az oktatóanyagban a Könyvtárkezelővel (LibMan) lekérheti az ügyféloldali kódtárat a unpkg-ból. unpkgegy gyors, globális tartalomterjesztési hálózat mindent az npm-en számára.

A Megoldáskezelőben kattintson a jobb gombbal a projektre, és válassza aClient-Side tár> lehetőséget.

A Client-Side könyvtár hozzáadása párbeszédpanelen:

  • Válassza ki a szolgáltatóhoz tartozó unpkg lehetőséget
  • Adja meg @microsoft/signalr@latest a kódtárat.
  • Válassza az Adott fájlok kiválasztása lehetőséget, bontsa ki a dist/browser mappát, majd válassza ki signalr.js és signalr.min.js.
  • Állítsa be a célhelyet a következőre: wwwroot/js/signalr/.
  • Válassza a Telepítéslehetőséget.

Client-Side Könyvtár hozzáadása párbeszédpanel – könyvtár kiválasztása

A LibMan létrehoz egy wwwroot/js/signalr mappát, és átmásolja a kijelölt fájlokat.

Központ létrehozása SignalR

A hub egy olyan osztály, amely egy magas szintű folyamatként szolgál, amely kezeli az ügyfél-kiszolgáló kommunikációt.

A SignalRChat projektmappában hozzon létre egy Hubs mappát.

Hubs A mappában hozza létre az osztályt ChatHub a következő kóddal:

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

Az ChatHub osztály örökli az SignalRHub osztályt. Az Hub osztály kezeli a kapcsolatokat, a csoportokat és az üzeneteket.

A SendMessage metódust meghívhatja egy csatlakoztatott ügyfél, hogy üzenetet küldjön az összes ügyfélnek. A metódust meghívó JavaScript-ügyfélkód az oktatóanyag későbbi részében jelenik meg. SignalR A kód aszinkron, hogy maximális méretezhetőséget biztosítson.

SignalR konfigurálása

A SignalR kiszolgálót úgy kell konfigurálni, hogy a SignalR kéréseket átadja SignalR. Adja hozzá a következő kiemelt kódot a Program.cs fájlhoz.

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

Az előző kiemelt kód hozzáadja a SignalR az ASP.NET Core függőséginjektálási és útválasztási rendszereihez.

Adj hozzá SignalR ügyfélkódot

Cserélje le a Pages/Index.cshtml tartalmát a következő kódra:

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

Az előző jelölés:

  • Szövegdobozokat és küldés gombot hoz létre.
  • Létrehoz egy id="messagesList" listát az SignalR központból érkező üzenetek megjelenítésére.
  • Ide tartoznak a SignalR szkripthivatkozások, és az chat.js alkalmazáskód a következő lépésben jön létre.

wwwroot/js A mappában hozzon létre egy chat.js fájlt a következő kóddal:

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

Az előző JavaScript:

  • Kapcsolatot hoz létre és indít el.
  • Hozzáadja a küldés gombhoz egy kezelőt, amely üzeneteket küld a központnak.
  • Hozzáadja a kapcsolati objektumhoz egy kezelőt, amely üzeneteket fogad a központtól, és hozzáadja őket a listához.

Az alkalmazás futtatása

Az alkalmazás hibakeresés nélküli futtatásához válassza a CtrlF5+.

Másolja ki az URL-címet a címsorból, nyisson meg egy másik böngészőpéldányt vagy lapot, és illessze be az URL-címet a címsorba.

Válasszon egy böngészőt, adjon meg egy nevet és egy üzenetet, majd kattintson az Üzenet küldése gombra.

A név és az üzenet azonnal megjelenik mindkét oldalon.

Befejezett SignalR mintaalkalmazás

Tip

Ha az alkalmazás nem működik, nyissa meg a böngésző fejlesztői eszközeit (F12), és lépjen a konzolra. Keresse meg a HTML- és JavaScript-kóddal kapcsolatos lehetséges hibákat. Ha például signalr.js az irányítotttól eltérő mappába lett helyezve, a fájlra való hivatkozás nem fog működni, ami 404-et eredményez a konzolon. signalr.js nem található hiba ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY Ha hiba történt a Chrome-ban, futtassa a következő parancsokat a fejlesztési tanúsítvány frissítéséhez:

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

Közzététel az Azure-ban

Az Azure-ban való üzembe helyezésről további információért lásd: Gyorsútmutató: ASP.NET webalkalmazás üzembe helyezése. További információ az Azure Service-rőlSignalR: Mi az Azure SignalR Service?

Következő lépések

Ez az oktatóanyag bemutatja a valós idejű alkalmazások SignalRhasználatának alapjait. Megtudhatja, hogyan:

  • Webes projekt létrehozása.
  • Adja hozzá az SignalR ügyfélkódtárat.
  • Hozzon létre egy központot SignalR .
  • Állítsa be a projektet, hogy a(z) SignalR-t használja.
  • Adjon hozzá olyan kódot, amely üzeneteket küld bármely ügyfélről az összes csatlakoztatott ügyfélnek.

A végén egy működő csevegőalkalmazással fog rendelkezni:

SignalR mintaalkalmazás

Prerequisites

Webalkalmazás-projekt létrehozása

Indítsa el a Visual Studio 2022-t, és válassza az Új projekt létrehozása lehetőséget.

Új projekt létrehozása a kezdőablakból

Az Új projekt létrehozása párbeszédpanelen válassza a ASP.NET Core Web App, majd a Tovább gombot.

ASP.NET Core-webalkalmazás létrehozása

Az új projekt konfigurálása párbeszédpanelen adja meg SignalRChat a Projekt nevét. Fontos a projekt SignalRChatelnevezése , beleértve a nagybetűsítésnek való megfelelést is, hogy a névterek egyezzenek az oktatóanyagban szereplő kóddal.

Válassza a Következőlehetőséget.

A További információ párbeszédpanelen válassza a .NET 7.0 (Standard kifejezéstámogatás), majd a Létrehozás lehetőséget.

További információk

Add hozzá a SignalR ügyfélkönyvtárat

A SignalR kiszolgálókódtár a ASP.NET Core megosztott keretrendszerében található. A JavaScript-ügyfélkódtár nem szerepel automatikusan a projektben. Ebben az oktatóanyagban a Könyvtárkezelővel (LibMan) lekérheti az ügyféloldali kódtárat a unpkg-ból. unpkgegy gyors, globális tartalomterjesztési hálózat mindent az npm-en számára.

A Megoldáskezelőben kattintson a jobb gombbal a projektre, és válassza aClient-Side tár> lehetőséget.

A Client-Side könyvtár hozzáadása párbeszédpanelen:

  • Válassza ki a szolgáltatóhoz tartozó unpkg lehetőséget
  • Adja meg @microsoft/signalr@latest a kódtárat.
  • Válassza az Adott fájlok kiválasztása lehetőséget, bontsa ki a dist/browser mappát, majd válassza ki signalr.js és signalr.min.js.
  • Állítsa be a célhelyet a következőre: wwwroot/js/signalr/.
  • Válassza a Telepítéslehetőséget.

Client-Side Könyvtár hozzáadása párbeszédpanel – könyvtár kiválasztása

A LibMan létrehoz egy wwwroot/js/signalr mappát, és átmásolja a kijelölt fájlokat.

Központ létrehozása SignalR

A hub egy olyan osztály, amely egy magas szintű folyamatként szolgál, amely kezeli az ügyfél-kiszolgáló kommunikációt.

A SignalRChat projektmappában hozzon létre egy Hubs mappát.

Hubs A mappában hozza létre az osztályt ChatHub a következő kóddal:

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

Az ChatHub osztály örökli az SignalRHub osztályt. Az Hub osztály kezeli a kapcsolatokat, a csoportokat és az üzeneteket.

A SendMessage metódust meghívhatja egy csatlakoztatott ügyfél, hogy üzenetet küldjön az összes ügyfélnek. A metódust meghívó JavaScript-ügyfélkód az oktatóanyag későbbi részében jelenik meg. SignalR A kód aszinkron, hogy maximális méretezhetőséget biztosítson.

SignalR konfigurálása

A SignalR kiszolgálót úgy kell konfigurálni, hogy a SignalR kéréseket átadja SignalR. Adja hozzá a következő kiemelt kódot a Program.cs fájlhoz.

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

Az előző kiemelt kód hozzáadja a SignalR az ASP.NET Core függőséginjektálási és útválasztási rendszereihez.

Adj hozzá SignalR ügyfélkódot

Cserélje le a Pages/Index.cshtml tartalmát a következő kódra:

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

Az előző jelölés:

  • Szövegdobozokat és küldés gombot hoz létre.
  • Létrehoz egy id="messagesList" listát az SignalR központból érkező üzenetek megjelenítésére.
  • Ide tartoznak a SignalR szkripthivatkozások, és az chat.js alkalmazáskód a következő lépésben jön létre.

wwwroot/js A mappában hozzon létre egy chat.js fájlt a következő kóddal:

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

Az előző JavaScript:

  • Kapcsolatot hoz létre és indít el.
  • Hozzáadja a küldés gombhoz egy kezelőt, amely üzeneteket küld a központnak.
  • Hozzáadja a kapcsolati objektumhoz egy kezelőt, amely üzeneteket fogad a központtól, és hozzáadja őket a listához.

Az alkalmazás futtatása

Az alkalmazás hibakeresés nélküli futtatásához válassza a CtrlF5+.

Másolja ki az URL-címet a címsorból, nyisson meg egy másik böngészőpéldányt vagy lapot, és illessze be az URL-címet a címsorba.

Válasszon egy böngészőt, adjon meg egy nevet és egy üzenetet, majd kattintson az Üzenet küldése gombra.

A név és az üzenet azonnal megjelenik mindkét oldalon.

Befejezett SignalR mintaalkalmazás

Tip

Ha az alkalmazás nem működik, nyissa meg a böngésző fejlesztői eszközeit (F12), és lépjen a konzolra. Keresse meg a HTML- és JavaScript-kóddal kapcsolatos lehetséges hibákat. Ha például signalr.js az irányítotttól eltérő mappába lett helyezve, a fájlra való hivatkozás nem fog működni, ami 404-et eredményez a konzolon. signalr.js nem található hiba ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY Ha hiba történt a Chrome-ban, futtassa a következő parancsokat a fejlesztési tanúsítvány frissítéséhez:

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

Közzététel az Azure-ban

Az Azure-ban való üzembe helyezésről további információért lásd: Gyorsútmutató: ASP.NET webalkalmazás üzembe helyezése. További információ az Azure Service-rőlSignalR: Mi az Azure SignalR Service?

Következő lépések

Ez az oktatóanyag bemutatja a valós idejű alkalmazások SignalRhasználatának alapjait. Megtudhatja, hogyan:

  • Webes projekt létrehozása.
  • Adja hozzá az SignalR ügyfélkódtárat.
  • Hozzon létre egy központot SignalR .
  • Állítsa be a projektet, hogy a(z) SignalR-t használja.
  • Adjon hozzá olyan kódot, amely üzeneteket küld bármely ügyfélről az összes csatlakoztatott ügyfélnek.

A végén egy működő csevegőalkalmazással fog rendelkezni:

SignalR mintaalkalmazás

Prerequisites

Webalkalmazás-projekt létrehozása

Indítsa el a Visual Studio 2022-t, és válassza az Új projekt létrehozása lehetőséget.

Új projekt létrehozása a kezdőablakból

Az Új projekt létrehozása párbeszédpanelen válassza a ASP.NET Core Web App, majd a Tovább gombot.

ASP.NET Core-webalkalmazás létrehozása

Az új projekt konfigurálása párbeszédpanelen adja meg SignalRChat a Projekt nevét. Fontos a projekt SignalRChatelnevezése , beleértve a nagybetűsítésnek való megfelelést is, hogy a névterek egyezzenek az oktatóanyagban szereplő kóddal.

Válassza a Következőlehetőséget.

A További információk párbeszédpanelen válassza a .NET 6.0 (Hosszú távú támogatás), majd a Létrehozás lehetőséget.

További információk

Add hozzá a SignalR ügyfélkönyvtárat

A SignalR kiszolgálókódtár a ASP.NET Core megosztott keretrendszerében található. A JavaScript-ügyfélkódtár nem szerepel automatikusan a projektben. Ebben az oktatóanyagban a Könyvtárkezelővel (LibMan) lekérheti az ügyféloldali kódtárat a unpkg-ból. unpkgegy gyors, globális tartalomterjesztési hálózat mindent az npm-en számára.

A Megoldáskezelőben kattintson a jobb gombbal a projektre, és válassza aClient-Side tár> lehetőséget.

A Client-Side könyvtár hozzáadása párbeszédpanelen:

  • Válassza ki a szolgáltatóhoz tartozó unpkg lehetőséget
  • Adja meg @microsoft/signalr@latest a kódtárat.
  • Válassza az Adott fájlok kiválasztása lehetőséget, bontsa ki a dist/browser mappát, majd válassza ki signalr.js és signalr.min.js.
  • Állítsa be a célhelyet a következőre: wwwroot/js/signalr/.
  • Válassza a Telepítéslehetőséget.

Client-Side Könyvtár hozzáadása párbeszédpanel – könyvtár kiválasztása

A LibMan létrehoz egy wwwroot/js/signalr mappát, és átmásolja a kijelölt fájlokat.

Központ létrehozása SignalR

A hub egy olyan osztály, amely egy magas szintű folyamatként szolgál, amely kezeli az ügyfél-kiszolgáló kommunikációt.

A SignalRChat projektmappában hozzon létre egy Hubs mappát.

Hubs A mappában hozza létre az osztályt ChatHub a következő kóddal:

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

Az ChatHub osztály örökli az SignalRHub osztályt. Az Hub osztály kezeli a kapcsolatokat, a csoportokat és az üzeneteket.

A SendMessage metódust meghívhatja egy csatlakoztatott ügyfél, hogy üzenetet küldjön az összes ügyfélnek. A metódust meghívó JavaScript-ügyfélkód az oktatóanyag későbbi részében jelenik meg. SignalR A kód aszinkron, hogy maximális méretezhetőséget biztosítson.

SignalR konfigurálása

A SignalR kiszolgálót úgy kell konfigurálni, hogy a SignalR kéréseket átadja SignalR. Adja hozzá a következő kiemelt kódot a Program.cs fájlhoz.

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

Az előző kiemelt kód hozzáadja a SignalR az ASP.NET Core függőséginjektálási és útválasztási rendszereihez.

Adj hozzá SignalR ügyfélkódot

Cserélje le a Pages/Index.cshtml tartalmát a következő kódra:

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

Az előző jelölés:

  • Szövegdobozokat és küldés gombot hoz létre.
  • Létrehoz egy id="messagesList" listát az SignalR központból érkező üzenetek megjelenítésére.
  • Ide tartoznak a SignalR szkripthivatkozások, és az chat.js alkalmazáskód a következő lépésben jön létre.

wwwroot/js A mappában hozzon létre egy chat.js fájlt a következő kóddal:

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

Az előző JavaScript:

  • Kapcsolatot hoz létre és indít el.
  • Hozzáadja a küldés gombhoz egy kezelőt, amely üzeneteket küld a központnak.
  • Hozzáadja a kapcsolati objektumhoz egy kezelőt, amely üzeneteket fogad a központtól, és hozzáadja őket a listához.

Az alkalmazás futtatása

Az alkalmazás hibakeresés nélküli futtatásához nyomja le a CTRL+F5 billentyűkombinációt.

Másolja ki az URL-címet a címsorból, nyisson meg egy másik böngészőpéldányt vagy lapot, és illessze be az URL-címet a címsorba.

Válasszon egy böngészőt, adjon meg egy nevet és egy üzenetet, majd kattintson az Üzenet küldése gombra.

A név és az üzenet azonnal megjelenik mindkét oldalon.

SignalR mintaalkalmazás

Tip

Ha az alkalmazás nem működik, nyissa meg a böngésző fejlesztői eszközeit (F12), és lépjen a konzolra. Keresse meg a HTML- és JavaScript-kóddal kapcsolatos lehetséges hibákat. Ha például signalr.js az irányítotttól eltérő mappába lett helyezve, a fájlra való hivatkozás nem fog működni, ami 404-et eredményez a konzolon. signalr.js nem található hiba ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY Ha hiba történt a Chrome-ban, futtassa a következő parancsokat a fejlesztési tanúsítvány frissítéséhez:

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

Közzététel az Azure-ban

Az Azure-ban való üzembe helyezésről további információért lásd: Gyorsútmutató: ASP.NET webalkalmazás üzembe helyezése. További információ az Azure Service-rőlSignalR: Mi az Azure SignalR Service?

Következő lépések

Ez az oktatóanyag bemutatja a valós idejű alkalmazások SignalRhasználatának alapjait. Megtudhatja, hogyan:

  • Webes projekt létrehozása.
  • Adja hozzá az SignalR ügyfélkódtárat.
  • Hozzon létre egy központot SignalR .
  • Állítsa be a projektet, hogy a(z) SignalR-t használja.
  • Adjon hozzá olyan kódot, amely üzeneteket küld bármely ügyfélről az összes csatlakoztatott ügyfélnek.

A végén egy működő csevegőalkalmazással fog rendelkezni:

SignalR mintaalkalmazás

Prerequisites

Webalkalmazás-projekt létrehozása

  • A menüben válassza az Új projekt fájlja > lehetőséget.
  • Az Új projekt létrehozása párbeszédpanelen válassza ASP.NET Core Web Applicationlehetőséget, majd válassza a Továbblehetőséget.
  • Az új projekt konfigurálása párbeszédpanelen nevezze el a projekt SignalRChat nevét, majd válassza a Létrehozás lehetőséget.
  • Az új ASP.NET Core webalkalmazás létrehozása párbeszédpanelen válassza a .NET Core és ASP.NET Core 3.1 lehetőséget.
  • Válassza a WebAlkalmazás lehetőséget a Pagest használó Razor projekt létrehozásához, majd válassza a Létrehozás lehetőséget.

Új projekt párbeszédpanel a Visual Studióban

Add hozzá a SignalR ügyfélkönyvtárat

A SignalR kiszolgálókódtár a ASP.NET Core 3.1 megosztott keretrendszer része. A JavaScript-ügyfélkódtár nem szerepel automatikusan a projektben. Ebben az oktatóanyagban a Library Manager (LibMan) használatával fogod megszerezni a klienstárat az unpkg-ról. a unpkg egy tartalomkézbesítési hálózat (CDN), amely képes az npm-ben, a Node.js csomagkezelőben található bármi kézbesítésére.

  • A Megoldáskezelőben kattintson a jobb gombbal a projektre, és válassza aClient-Side tár> lehetőséget.
  • A Client-Side könyvtár hozzáadása párbeszédablakban a Szolgáltató beállításnál válassza a unpkg-t.
  • Könyvtár mezőbe írja be @microsoft/signalr@latest.
  • Válassza az Adott fájlok kiválasztása lehetőséget, bontsa ki a dist/browser mappát, majd válassza ki signalr.js és signalr.min.js.
  • Állítsa be a Célhely értékét a wwwroot/js/signalr/ könyvtárra
  • Válassza a Telepítés lehetőséget

Client-Side Könyvtár hozzáadása párbeszédpanel – könyvtár kiválasztása

A LibMan létrehoz egy wwwroot/js/signalr mappát, és átmásolja a kijelölt fájlokat.

Központ létrehozása SignalR

A hub egy olyan osztály, amely egy magas szintű folyamatként szolgál, amely kezeli az ügyfél-kiszolgáló kommunikációt.

  • A SignalRChat projektmappában hozzon létre egy Hubs mappát.
  • A Hubs mappában hozzon létre egy ChatHub.cs fájlt a következő kóddal:
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);
        }
    }
}

Az ChatHub osztály örökli az SignalRHub osztályt. Az Hub osztály kezeli a kapcsolatokat, a csoportokat és az üzeneteket.

A SendMessage metódust meghívhatja egy csatlakoztatott ügyfél, hogy üzenetet küldjön az összes ügyfélnek. A metódust meghívó JavaScript-ügyfélkód az oktatóanyag későbbi részében jelenik meg. SignalR A kód aszinkron, hogy maximális méretezhetőséget biztosítson.

SignalR konfigurálása

A SignalR kiszolgálót úgy kell konfigurálni, hogy a SignalR kéréseket átadja SignalR.

  • Adja hozzá a következő kiemelt kódot a Startup.cs fájlhoz.

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

    Ezek a módosítások hozzáadják SignalR az ASP.NET Core-függőséginjektálási és útválasztási rendszerekhez.

Adj hozzá SignalR ügyfélkódot

  • Cserélje le a Pages/Index.cshtml tartalmát a következő kódra:

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

    Az előző kód:

    • Szövegdobozokat hoz létre a név- és üzenetszöveghez, valamint egy Küldés gombot.
    • Létrehoz egy id="messagesList" listát az SignalR központból érkező üzenetek megjelenítésére.
    • Tartalmazza a szkripthivatkozásokat SignalR és az alkalmazáskódot chat.js, amelyet a következő lépésben hoz létre.

  • A wwwroot/js mappában hozzon létre egy chat.js fájlt a következő kóddal:

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

    Az előző kód:

    • Kapcsolatot hoz létre és indít el.
    • Hozzáadja a küldés gombhoz egy kezelőt, amely üzeneteket küld a központnak.
    • Hozzáadja a kapcsolati objektumhoz egy kezelőt, amely üzeneteket fogad a központtól, és hozzáadja őket a listához.

Az alkalmazás futtatása

  • Az alkalmazás hibakeresés nélküli futtatásához nyomja le a CTRL+F5 billentyűkombinációt.
  • Másolja ki az URL-címet a címsorból, nyisson meg egy másik böngészőpéldányt vagy lapot, és illessze be az URL-címet a címsorba.
  • Válasszon egy böngészőt, adjon meg egy nevet és egy üzenetet, majd kattintson az Üzenet küldése gombra. A név és az üzenet azonnal megjelenik mindkét oldalon.

SignalR mintaalkalmazás

Tip

  • Ha az alkalmazás nem működik, nyissa meg a böngésző fejlesztői eszközeit (F12), és lépjen a konzolra. A HTML- és JavaScript-kóddal kapcsolatos hibák is megjelenhetnek. Tegyük fel például, hogy a signalr.js-t az előírttól eltérő mappába helyezi. Ebben az esetben a fájlra való hivatkozás nem fog működni, és a konzolon 404-hiba jelenik meg. signalr.js nem található hiba

  • Ha a Chrome-ban ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY hibaüzenet jelenik meg, futtassa az alábbi parancsokat a fejlesztési tanúsítvány frissítéséhez:

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

Közzététel az Azure-ban

Az Azure-ban való üzembe helyezésről további információért lásd: Gyorsútmutató: ASP.NET webalkalmazás üzembe helyezése.

Következő lépések

  • Last updated on