كيفية استخدام خدمة Azure SignalR مع Azure Front Door

Azure Front Door هي شبكة تسليم تطبيقات سحابية أصلية حديثة (ADN) توفر تسريعا ديناميكيا للموقع وموازنة تحميل عمومية وإنهاء TLS وأمان طبقة التطبيق. يعمل في طبقة HTTP/HTTPS (الطبقة 7) ويعمل كنقطة إدخال لتطبيقات الويب - توجيه حركة المرور وتحسينها استنادا إلى سمات مثل مسارات URL وزمن الانتقال والحالة الصحية للخلفيات.

تتمثل إحدى الفوائد الرئيسية ل Azure Front Door في دعمها الأصلي لاتصالات WebSocket وWebSocket Secure (WSS). يتيح هذا الدعم الاتصال في الوقت الحقيقي ثنائي الاتجاه بين العملاء وخدمات الواجهة الخلفية دون الحاجة إلى أي تكوين خاص.

في هذا الدليل، نوضح كيفية استخدام Azure Front Door مع Azure SignalR Service للواجهة الأمامية لتطبيقاتك في الوقت الفعلي. من خلال توجيه نسبة استخدام الشبكة عبر Front Door، يمكنك:

• تطبيق دعم WebSocket مع الوصول العالمي وتسريع الحافة،
• تطبيق نهج الأمان المركزية، مثل قواعد WAF وتحديد المعدل،
• تقليل التعرض العام لخدمات الواجهة الخلفية.

كما هو موضح في الرسم التخطيطي، يمكنك تكوين Azure Front Door لتوجيه نسبة استخدام الشبكة WebSocket إلى الخلفية للتطبيق الذي يدعم SignalR. يضمن هذا الإعداد أن وظائفك في الوقت الحقيقي تستفيد من زمن الانتقال المنخفض ومعالجة نسبة استخدام الشبكة القابلة للتطوير والآمنة من خلال شبكة الحافة العالمية ل Azure.

إعداد وتكوين Azure Front Door

إنشاء مورد Azure SignalR Service

اتبع المقالة وأنشئ مورد خدمة SignalR

إنشاء مورد Azure Front Door

في مدخل Microsoft Azure، ابحث عن Front DoorوCreate.

اختبار سريع

إجراء اختبارات سريعة للتحقق من صحة نقطة نهاية SignalR وتكوين مورد Azure Front Door بشكل صحيح.

أرسل طلبا إلى <your-SignalR-resource-endpoint>/client ويجب أن يرجع 400 مع معلمة استعلام رسالة الخطأ 'hub'. تعني هذه الرسالة أن الطلب وصل إلى SignalR Service وأن الخدمة قامت بالتحقق من الصحة كما هو متوقع.

curl -v <your-SignalR-resource-endpoint>/client

المرتجعات

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

أرسل طلبا إلى نفس نقطة النهاية الصحية ل Azure SignalR من خلال Azure Front Door http://<the-hostname-of-your-Azure-Front-Door-resource>/client. انتقل إلى علامة التبويب نظرة عامة لمورد Azure Front Door الذي تم إنشاؤه، وحدد موقع اسم مضيف نقطة النهاية.

curl -I http://<the-hostname-of-your-Azure-Front-Door-resource>/client

يجب أيضا إرجاع 400 مع معلمة استعلام "hub" لرسالة الخطأ مطلوبة. تؤكد هذه الرسالة أن الطلب انتقل بنجاح من خلال Azure Front Door إلى SignalR Service.

< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.

تشغيل نموذج تطبيق SignalR من خلال Azure Front Door

الآن بعد أن يمكننا التحقق من أن نسبة استخدام الشبكة يمكن أن تصل إلى SignalR Service من خلال Azure Front Door. بعد ذلك، نستخدم نموذج التطبيق المجرد لإظهار قدرة Azure Front Door على توجيه حركة مرور WebSocket دون تكوين. نحن نتخذ نهجا خطوة بخطوة حتى تتمكن من المتابعة، إذا لزم الأمر.

إنشاء مشروع

mkdir afd-demo 
cd afd-demo

touch afd-demo.csproj

الصق المحتوى في afd-demo.csproj الملف. يستخدم هذا المشروع حزمة "Microsoft.Azure.SignalR" فقط.

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <RootNamespace>afd_demo</RootNamespace>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.Azure.SignalR" Version="1.30.2" />
  </ItemGroup>
</Project>

تكوين إعدادات التطبيق

appsettings.json إنشاء ملف ولصقه في المحتوى. ستتم الإشارة إلى القيم في Program.cs الملف، الذي نقوم بإنشائه في الخطوة التالية. ClientEndpoint إضافة قسم في ConnectionString.

touch appsettings.json

تظهر سلسلة الاتصال الأولية في هذه المقالة لأغراض العرض التوضيحي فقط. في بيئات الإنتاج، قم دائما بحماية مفاتيح الوصول الخاصة بك. استخدم Azure Key Vault لإدارة مفاتيحك وتدويرها بأمان وتأمين سلسلة الاتصال باستخدام معرف Microsoft Entra وتخويل الوصول باستخدام معرف Microsoft Entra.

{
  "Azure": {
    "SignalR": {
      "ConnectionString": "<the-connection-string-of-your-Azure-SignalR-resource>;ClientEndpoint=<the-endpoint-of-your-Azure-Front-Door-resource>"
    }
  }
}

إنشاء Program.cs ملف

touch Program.cs

الصق في التعليمات البرمجية إلى Program.cs الملف. يعرف تطبيق الويب مركز SignalR ويعمل index.html في جذر الويب.

using Microsoft.Azure.SignalR;
var builder = WebApplication.CreateBuilder(args);

// Automatically read in the configuration from `appsettings.json`
builder.Services.AddSignalR().AddAzureSignalR();

var app = builder.Build();
app.UseStaticFiles();

app.UseRouting();

app.MapHub<DemoHub>("/demohub");

app.MapGet("/", async context =>
{
    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html");
    context.Response.ContentType = "text/html";
    await context.Response.SendFileAsync(path);
});

app.Run();

تعريف مركز SignalR

mkdir hubs && cd hubs
touch demohubs.cs

الصق في التعليمات البرمجية إلى demohubs.cs الملف. للتبسيط، يعرض المركز الأسلوب فقط BroadcastMessage لعميل SignalR، الذي يبث الرسالة المستلمة لجميع عملاء SignalR المتصلين.

using Microsoft.AspNetCore.SignalR;

public class DemoHub : Hub
{
    public Task BroadcastMessage(string message) =>
        Clients.All.SendAsync("broadcastMessage", message);
}

تعريف واجهة مستخدم الويب

تأكد من أنك في جذر مجلد المشروع.

mkdir wwwroot && cd wwwroot
touch index.html

الصق في التعليمات البرمجية إلى index.html. تتكون واجهة المستخدم من <textarea> لتلقي إدخال نص من المستخدم و <button> لإرسال إدخال المستخدم من خلال اتصال SignalR. نظرا لأننا حددنا سلوك خادم SignalR لبث الرسائل المستلمة، فسترى نفس الرسالة مسجلة إلى وحدة تحكم المتصفح.

<!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" />
  <title>Azure SignalR with Azure Front Door as the reverse proxy</title>
</head>

<body>
  <div>
    <textarea id="message" style="display: block; width: 100%; padding: 5px 10px; max-width: 400px; margin-bottom: 8px;"
      placeholder="Your message..."></textarea>
    <button id="btn-send" disabled>Send</button>
  </div>

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

  <script type="module">
    document.addEventListener("DOMContentLoaded", async function () {
      const connection = new signalR.HubConnectionBuilder()
        .withUrl("/demohub")
        .build();

      connection.on("broadcastMessage", (msg) => {
        console.log(msg)
      })
      await connection.start();
      document.getElementById("btn-send").removeAttribute("disabled")

      document.getElementById("btn-send").addEventListener("click", () => {
        const message = document.getElementById("message").value
        if (message !== "") {
          connection.send("broadcastMessage", message)
          document.getElementById("message").value = ""
        } else {
          alert("Message body is empty. Please enter message.")
        }
      })
    })
  </script>
</body>

</html>

تشغيل التطبيق والتحقق من تدفق الرسالة من خلال Azure Front Door

هذا هو كل التعليمات البرمجية للعينة. لنقم بتشغيل التطبيق.

  dotnet restore
  dotnet run

افتح http://localhost:5129 من المستعرض واستخدم F12 اختصار لوحة المفاتيح لفتح أدوات المطور. توجه إلى لوحة الشبكة، يمكنك أن ترى أن اتصال WebSocket قد تم إنشاؤه بالفعل باستخدام Azure Front Door.

حاول كتابة شيء ما في مربع النص واضغط على زر الإرسال. ترى الرسالة مسجلة إلى وحدة تحكم المستعرض كما هو متوقع.

يمكنك أيضا فحص تدفق الرسائل في لوحة الشبكة.