Rövid útmutató: Csevegőszoba létrehozása a SignalR szolgáltatással

Az Azure SignalR szolgáltatás egy olyan Azure-szolgáltatás, amely segítségével a fejlesztők könnyen hozhatnak létre webalkalmazásokat valós idejű funkciókkal.

Ez a cikk segítséget nyújt az első lépések megtételében az Azure SignalR szolgáltatás használatakor. Ebben a rövid útmutatóban egy csevegőalkalmazást fog létrehozni egy ASP.NET Core-webalkalmazás használatával. Az alkalmazás kapcsolatot létesít az Azure SignalR szolgáltatási erőforrással a valós idejű tartalomfrissítések engedélyezéséhez. A webalkalmazást helyileg fogja üzemeltetni, és több böngészőügyféllel fog csatlakozni. Minden ügyfél képes lesz tartalomfrissítéseket küldeni a többi ügyfélnek.

A rövid útmutató lépései bármilyen szövegszerkesztővel elvégezhetők. Az egyik lehetőség a Visual Studio Code, amely Windows, macOS és Linux platformokon érhető el.

Az oktatóanyag kódja letölthető az AzureSignalR-minták GitHub-adattárjából. Az ebben a rövid útmutatóban használt Azure-erőforrásokat a SignalR-szolgáltatás szkriptjének létrehozásával hozhatja létre.

Ha nem rendelkezik Azure-előfizetéssel, első lépésként mindössze néhány perc alatt létrehozhat egy ingyenes fiókot.

Ismerje meg.

Előfeltételek

• Telepítse a legújabb .NET Core SDK-t.
• Töltse le vagy klónozza az AzureSignalR-minta GitHub-adattárat.

Problémákat tapasztal? Próbálja ki a hibaelhárítási útmutatót , vagy tudassa velünk.

Azure SignalR-erőforrás létrehozása

Ebben a szakaszban egy alapszintű Azure SignalR-példányt hoz létre az alkalmazáshoz. Az alábbi lépések az Azure Portal használatával hoznak létre új példányt, de használhatja az Azure CLI-t is. További információ: az signalr create command in the Azure SignalR Service CLI Reference.

1. Jelentkezzen be az Azure Portalra.
2. A lap bal felső részén válassza az + Erőforrás létrehozása lehetőséget.
3. Az Erőforrás létrehozása lap Search szolgáltatás és piactér szövegmezőjében adja meg a signalr kifejezést, majd válassza ki a SignalR szolgáltatást a listából.
4. A SignalR szolgáltatás oldalán válassza a Létrehozás lehetőséget.
5. Az Alapok lapon adja meg az új SignalR-szolgáltatáspéldány alapvető adatait. Írja be a következő értékeket:

A SignalR-oktatóanyagok Hálózatkezelés és Címkék lapján nem kell módosítania a beállításokat.

6. Válassza az Alapismeretek lap alján található Véleményezés + létrehozás gombot.
7. A Véleményezés + létrehozás lapon tekintse át az értékeket, majd válassza a Létrehozás lehetőséget. Az üzembe helyezés végrehajtása néhány percet vesz igénybe.
8. Amikor az üzembe helyezés befejeződött, válassza az Erőforrás megnyitása gombot.
9. A SignalR erőforráslapján válassza a Bal oldali menü Beállítások területén található Kulcsok lehetőséget.
10. Másolja ki az elsődleges kulcs kapcsolati sztringét . Erre a kapcsolati sztring van szüksége az alkalmazás konfigurálásához az oktatóanyag későbbi részében.

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

Ebben a szakaszban a .NET Core parancssori felülettel (CLI) hozhat létre egy ASP.NET Core MVC-webalkalmazás-projektet. A .NET Core CLI Visual Studióval való használatának előnye, hogy windowsos, macOS és Linux platformokon is elérhető.

1. Hozzon létre egy mappát a projekthez. Ez a rövid útmutató a chattest mappát használja.

2. Az új mappában futtassa a következő parancsot a projekt létrehozásához:

   dotnet new web
   

A Secret Manager hozzáadása a projekthez

Ebben a szakaszban a Secret Manager eszközt fogja hozzáadni a projekthez. A Secret Manager eszköz bizalmas adatokat tárol a projektfán kívüli fejlesztési munkákhoz. Ez a módszer segít megelőzni az alkalmazás titkos kulcsainak véletlen megosztását a forráskódban.

1. A mappában inicializálásához UserSecretsId futtassa a következő parancsot:

   dotnet user-secrets init
   

2. Adjon hozzá egy Azure:SignalR:ConnectionString nevű titkos kódot a Secret Managerhez.

   A cikkben szereplő nyers kapcsolati sztring csak bemutató célokra jelennek meg. Éles környezetben mindig védje a hozzáférési kulcsokat. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolati sztring a Microsoft Entra-azonosítóval, és engedélyezheti a hozzáférést a Microsoft Entra-azonosítóval.

   Ez a titkos kód tartalmazza a SignalR szolgáltatási erőforrás elérésére szolgáló kapcsolati sztringet. Az Azure:SignalR:ConnectionString az alapértelmezett konfigurációs kulcs, amelyet a SignalR a kapcsolat létrehozásához keres. Cserélje le a következő parancs értékét a SignalR-szolgáltatás erőforrásának kapcsolati sztring.

   Ezt a parancsot a fájllal megegyező könyvtárban csproj kell futtatnia.

   dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"
   

   A Secret Manager csak a webalkalmazás tesztelésére használható, amíg helyileg van üzemeltetve. Egy későbbi oktatóanyagban üzembe helyezi a csevegő webalkalmazást az Azure-ban. Miután a webalkalmazás üzembe lett helyezve az Azure-ban, a kapcsolati sztring a Secret Managerrel való tárolása helyett egy alkalmazásbeállítást fog használni.

   Ez a titkos kód a Configuration API-val érhető el. A kettőspont (:) a konfiguráció nevében működik a Configuration API-val az összes támogatott platformon. Lásd: Konfiguráció környezet szerint.

Az Azure SignalR hozzáadása a webalkalmazáshoz

1. Adjon hozzá egy hivatkozást a Microsoft.Azure.SignalR NuGet-csomaghoz az alábbi parancs futtatásával:

   dotnet add package Microsoft.Azure.SignalR
   

2. Nyissa meg Program.cs , és frissítse a kódot a következőre, meghívja az AddSignalR()AddAzureSignalR() Azure SignalR Service használatát és metódusait:

   var builder = WebApplication.CreateBuilder(args);
   builder.Services.AddSignalR().AddAzureSignalR();
   var app = builder.Build();
   
   app.UseDefaultFiles();
   app.UseRouting();
   app.UseStaticFiles();
   app.MapHub<ChatSampleHub>("/chat");
   app.Run();
   

   Ha nem ad át paramétert, AddAzureSignalR() az azt jelenti, hogy a SignalR szolgáltatás erőforrásának alapértelmezett konfigurációs kulcsát használja kapcsolati sztring. Az alapértelmezett konfigurációs kulcs az Azure:SignalR:ConnectionString. Azt is használja ChatSampleHub , amelyet az alábbi szakaszban fogunk létrehozni.

Központosztály hozzáadása

A SignalR-ben a központ egy alapvető összetevő, amely az ügyfél által meghívható metódusok egy készletét teszi elérhetővé. Ebben a szakaszban meghatároz egy központosztályt két metódussal:

• BroadcastMessage: Ez a metódus üzenetet küld az összes ügyfélnek.
• Echo: Ez a metódus visszaküld egy üzenetet a hívónak.

Mindkét módszer a Clients ASP.NET Core SignalR SDK által biztosított felületet használja. Ez a felület hozzáférést biztosít az összes csatlakoztatott ügyfélhez, így tartalmat küldhet az ügyfeleknek.

1. A projektkönyvtárban adjon hozzá egy új, Hub nevű mappát. Adjon hozzá egy ChatSampleHub.cs nevű új központi kódfájlt az új mappához.

2. Adja hozzá a következő kódot a ChatSampleHub.cs a központi osztály definiálásához és a fájl mentéséhez.

   using Microsoft.AspNetCore.SignalR;
   
   public class ChatSampleHub : Hub
   {
       public Task BroadcastMessage(string name, string message) =>
           Clients.All.SendAsync("broadcastMessage", name, message);
   
       public Task Echo(string name, string message) =>
           Clients.Client(Context.ConnectionId)
                   .SendAsync("echo", name, $"{message} (echo from server)");
   }
   

A webalkalmazás ügyfélfelületének hozzáadása

A csevegőszoba-alkalmazás ügyfél-felhasználói felülete HTML-ből és JavaScriptből fog állni egy index.html nevű fájlban a wwwroot könyvtárban.

Másolja ki a css/site.css fájlt a mintatárház wwwroot mappájából. Cserélje le a projekt css/site.css a másoltra.

Hozzon létre egy új fájlt az index.html nevű wwwroot könyvtárban, másolja és illessze be az alábbi HTML-fájlt az újonnan létrehozott fájlba.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/site.css" rel="stylesheet" />
  <title>Azure SignalR Group Chat</title>
</head>
<body>
  <h2 class="text-center" style="margin-top: 0; padding-top: 30px; padding-bottom: 30px;">Azure SignalR Group Chat</h2>
  <div class="container" style="height: calc(100% - 110px);">
    <div id="messages" style="background-color: whitesmoke; "></div>
    <div style="width: 100%; border-left-style: ridge; border-right-style: ridge;">
      <textarea id="message" style="width: 100%; padding: 5px 10px; border-style: hidden;"
        placeholder="Type message and press Enter to send..."></textarea>
    </div>
    <div style="overflow: auto; border-style: ridge; border-top-style: hidden;">
      <button class="btn-warning pull-right" id="echo">Echo</button>
      <button class="btn-success pull-right" id="sendmessage">Send</button>
    </div>
  </div>
  <div class="modal alert alert-danger fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div>Connection Error...</div>
          <div><strong style="font-size: 1.5em;">Hit Refresh/F5</strong> to rejoin. ;)</div>
        </div>
      </div>
    </div>
  </div>

  <!--Reference the SignalR library. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

  <!--Add script to update the page and send messages.-->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      function getUserName() {
        function generateRandomName() {
          return Math.random().toString(36).substring(2, 10);
        }

        // Get the user name and store it to prepend to messages.
        var username = generateRandomName();
        var promptMessage = "Enter your name:";
        do {
          username = prompt(promptMessage, username);
          if (!username || username.startsWith("_") || username.indexOf("<") > -1 || username.indexOf(">") > -1) {
            username = "";
            promptMessage = "Invalid input. Enter your name:";
          }
        } while (!username)
        return username;
      }

      username = getUserName();
      // Set initial focus to message input box.
      var messageInput = document.getElementById("message");
      messageInput.focus();

      function createMessageEntry(encodedName, encodedMsg) {
        var entry = document.createElement("div");
        entry.classList.add("message-entry");
        if (encodedName === "_SYSTEM_") {
          entry.innerHTML = encodedMsg;
          entry.classList.add("text-center");
          entry.classList.add("system-message");
        } else if (encodedName === "_BROADCAST_") {
          entry.classList.add("text-center");
          entry.innerHTML = `<div class="text-center broadcast-message">${encodedMsg}</div>`;
        } else if (encodedName === username) {
          entry.innerHTML = `<div class="message-avatar pull-right">${encodedName}</div>` +
            `<div class="message-content pull-right">${encodedMsg}<div>`;
        } else {
          entry.innerHTML = `<div class="message-avatar pull-left">${encodedName}</div>` +
            `<div class="message-content pull-left">${encodedMsg}<div>`;
        }
        return entry;
      }

      function appendMessage(encodedName, encodedMsg) {
        var messageEntry = createMessageEntry(encodedName, encodedMsg);
        var messageBox = document.getElementById("messages");
        messageBox.appendChild(messageEntry);
        messageBox.scrollTop = messageBox.scrollHeight;
      }

      function bindConnectionMessage(connection) {
        var messageCallback = function (name, message) {
          if (!message) return;
          // Html encode display name and message.
          var encodedName = name;
          var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
          appendMessage(encodedName, encodedMsg);
        };
        // Create a function that the hub can call to broadcast messages.
        connection.on("broadcastMessage", messageCallback);
        connection.on("echo", messageCallback);
        connection.onclose(onConnectionError);
      }

      function onConnected(connection) {
        console.log("connection started");
        connection.send("broadcastMessage", "_SYSTEM_", username + " JOINED");
        document.getElementById("sendmessage").addEventListener("click", function (event) {
          // Call the broadcastMessage method on the hub.
          if (messageInput.value) {
            connection.send("broadcastMessage", username, messageInput.value)
              .catch((e) => appendMessage("_BROADCAST_", e.message));
          }

          // Clear text box and reset focus for next comment.
          messageInput.value = "";
          messageInput.focus();
          event.preventDefault();
        });
        document.getElementById("message").addEventListener("keypress", function (event) {
          if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("sendmessage").click();
            return false;
          }
        });
        document.getElementById("echo").addEventListener("click", function (event) {
          // Call the echo method on the hub.
          connection.send("echo", username, messageInput.value);

          // Clear text box and reset focus for next comment.
          messageInput.value = "";
          messageInput.focus();
          event.preventDefault();
        });
      }

      function onConnectionError(error) {
        if (error && error.message) {
          console.error(error.message);
        }
        var modal = document.getElementById("myModal");
        modal.classList.add("in");
        modal.style = "display: block;";
      }

      var connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();
      bindConnectionMessage(connection);
      connection.start()
        .then(function () {
          onConnected(connection);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    });
  </script>
</body>
</html>

A kód index.html hívásokban HubConnectionBuilder.build() , hogy HTTP-kapcsolatot létesítsen az Azure SignalR-erőforrással.

Ha a kapcsolat sikeresen létrejött, át lesz adva a bindConnectionMessage számára, amely eseménykezelőket ad a bejövő tartalomhoz, amely le lesz küldve az ügyfélnek.

A HubConnection.start() kommunikálni kezd a központtal. onConnected() Ezután hozzáadja a gombesemény-kezelőket. Ezek az eseménykezelők a kapcsolat segítségével engedélyezik, hogy ez az ügyfél tartalomfrissítéseket küldjön le az összes csatlakozott ügyfélnek.

Az alkalmazás helyi létrehozása és futtatása

1. Futtassa a következő parancsot a webalkalmazás helyi futtatásához:

   dotnet run
   

   Az alkalmazás helyileg lesz üzemeltetve a localhost URL-címet tartalmazó kimenettel, például az alábbiak szerint:

   Building...
   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5000
   info: Microsoft.Hosting.Lifetime[0]
         Application started. Press Ctrl+C to shut down.
   info: Microsoft.Hosting.Lifetime[0]
         Hosting environment: Development
   

2. Nyisson meg két böngészőablakot. Minden böngészőben nyissa meg a kimeneti ablakban látható localhost URL-címet, http://localhost:5000/ például a fenti kimeneti ablakban látható módon. A rendszer kéri, hogy adja meg a nevét. Adja meg mindkét ügyfél ügyfélnevét, és tesztelje a küldési üzenetek tartalmát mindkét ügyfél között a Küldés gombbal.

   

Az erőforrások eltávolítása

Ha folytatja a következő oktatóanyagot, megtarthatja az ebben a rövid útmutatóban létrehozott erőforrásokat, és újra felhasználhatja őket.

Ha végzett a gyorsútmutató-mintaalkalmazással, törölheti az ebben a rövid útmutatóban létrehozott Azure-erőforrásokat a díjak elkerülése érdekében.

Jelentkezzen be az Azure Portalra, és válassza az Erőforráscsoportok elemet.

A Szűrő név szerint szövegmezőbe írja be az erőforráscsoport nevét. Ebben a rövid útmutatóban a SignalRTestResources nevű erőforráscsoportot használtuk. Az eredménylistában szereplő erőforráscsoportban válassza ki a három pontot (...) >Erőforráscsoport törlése.

A rendszer az erőforráscsoport törlésének megerősítését kéri. Adja meg a megerősítéshez az erőforráscsoport nevét, és válassza a Törlés lehetőséget.

A rendszer néhány pillanaton belül törli az erőforráscsoportot és annak erőforrásait.

Problémákat tapasztal? Próbálja ki a hibaelhárítási útmutatót , vagy tudassa velünk.

Következő lépések

Ebben a rövid útmutatóban létrehozott egy új Azure SignalR service-erőforrást. Ezután egy ASP.NET Core-webalkalmazással használta a tartalomfrissítések valós idejű leküldésére több csatlakoztatott ügyfélnek. Ha többet szeretne megtudni az Azure SignalR Service használatáról, folytassa a hitelesítést bemutató oktatóanyagtal.