التشغيل السريع: إنشاء تطبيق بلا خادم باستخدام Azure Functions و SignalR Service باستخدام JavaScript

مقالة
04/25/2024

في هذه المقالة، يمكنك استخدام Azure SignalR Service وAzure Functions وJavaScript لإنشاء تطبيق بلا خادم لبث الرسائل إلى العملاء.

المتطلبات الأساسية

يمكن تشغيل هذه التشغيل السريع على macOS أو Windows أو Linux.

المتطلب الأساسي	‏‏الوصف
اشتراك Azure	إذا لم يكن لديك اشتراك، فبادر بإنشاء حساب Azure مجاني
محرر التعليمات البرمجية	تحتاج إلى محرر تعليمات برمجية مثل Visual Studio Code.
أدوات Azure Functions الأساسية	يتطلب الإصدار 4.0.5611 أو أعلى لتشغيل نموذج برمجة Node.js v4.
Node.js LTS	راجع إصدارات node.js المدعومة في دليل مطور Azure Functions JavaScript.
Azurite	يحتاج ربط SignalR إلى Azure Storage. يمكنك استخدام محاكي تخزين محلي عند تشغيل دالة محليا.
Azure CLI	اختياريا، يمكنك استخدام Azure CLI لإنشاء مثيل Azure SignalR Service.

قم بإنشاء مثيل Azure SignalR Service

في هذا القسم، يمكنك إنشاء مثيل Azure SignalR أساسي لاستخدامه لتطبيقك. تستخدم الخطوات التالية مدخل Microsoft Azure لإنشاء مثيل جديد، ولكن يمكنك أيضا استخدام Azure CLI. لمزيد من المعلومات، راجع الأمر az signalr create في مرجع Azure SignalR Service CLI.

قم بتسجيل الدخول إلى بوابة Azure.
في الجانب العلوي الأيسر من الصفحة، اختر+ إنشاء مورد.
في صفحة إنشاء مورد، في مربع النص خدمة البحث والسوق، أدخل signalr ثم حدد SignalR Service من القائمة.
في صفحة SignalR Service ، حدد Create.
في علامة التبويب Basics ، يمكنك إدخال المعلومات الأساسية لمثيل SignalR Service الجديد. أدخل القيم التالية:

الحقل	القيم المقترحة	‏‏الوصف
الاشتراك	اختر اشتراكك	حدد الاشتراك الذي تريد استخدامه لإنشاء مثيل خدمة SignalR جديد.
مجموعة الموارد	إنشاء مجموعة موارد باسم SignalRTestResources	يوصى باختيار أو إنشاء مجموعة موارد لموردك SignalR. من المفيد إنشاء مجموعة موارد جديدة لهذا البرنامج التعليمي بدلا من استخدام مجموعة موارد موجودة. لتحرير الموارد بعد إكمال البرنامج التعليمي، احذف مجموعة الموارد. يؤدي حذف مجموعة موارد أيضا إلى حذف كافة الموارد التي تنتمي إلى المجموعة. لا يمكن التراجع عن هذا الإجراء. قبل حذف مجموعة موارد، تأكد من أنها لا تحتوي على موارد تريد الاحتفاظ بها. للمزيد من المعلومات، يُرجى الرجوع إلى استخدام مجموعات الموارد لإدارة موارد Azure.
اسم المورد	testsignalr	أدخل اسم مورد مميزًا لاستخدامه في مورد SignalR. إذا تم أخذ testignalr بالفعل في منطقتك، أضف رقما أو حرفا حتى يكون الاسم فريدا. يجب أن يكون الاسم سلسلة مكونة من 1 إلى 63 حرفًا وتتضمن الأرقام والحروف ورمز الواصلة فقط `-`. لا يمكن أن يبدأ الاسم أو ينتهي بحرف الواصلة، وأحرف الواصلة المتتالية غير صالحة.
المنطقة	اختيار منطقتك	حدد المنطقة المناسبة لمثيل SignalR Service الجديد. خدمة Azure SignalR غير متوفرة حاليا في جميع المناطق. لمزيد من المعلومات، راجع توفر منطقة خدمة Azure SignalR
مستوى الأسعار	حدد تغيير ثم اختر مجاني (التطوير/الاختبار فقط). اختر تحديد لتأكيد اختيارك لمستوى التسعير.	تحتوي خدمة Azure SignalR على ثلاثة مستويات تسعير: Free وStandard وPremium. تستخدم البرامج التعليمية المستوى المجاني ، ما لم يتم ملاحظة خلاف ذلك في المتطلبات الأساسية. لمزيد من المعلومات حول اختلافات الوظائف بين المستويات والتسعير، راجع تسعير خدمة Azure SignalR
وضع الخدمة	اختر وضع الخدمة المناسب	استخدم الافتراضي عند استضافة منطق مركز SignalR في تطبيقات الويب واستخدام خدمة SignalR كوكيل. استخدم Serverless عند استخدام تقنيات بلا خادم مثل Azure Functions لاستضافة منطق مركز SignalR. الوضع الكلاسيكي هو فقط للتوافق مع الإصدارات السابقة ولا يوصى باستخدامه. لمزيد من المعلومات، راجع وضع الخدمة في خدمة Azure SignalR.

لا تحتاج إلى تغيير الإعدادات في علامات التبويب الشبكات والعلامات لبرامج SignalR التعليمية.

حدد الزر Review + create أسفل علامة التبويب Basics .
في علامة التبويب Review + create ، راجع القيم ثم حدد Create. يستغرق الأمر بضع لحظات حتى يكتمل النشر.
عند اكتمال النشر، حدد الزر Go to resource .
في صفحة مورد SignalR، حدد Keys من القائمة على اليسار، ضمن الإعدادات.
انسخ سلسلة الاتصال ion للمفتاح الأساسي. تحتاج إلى هذا سلسلة الاتصال لتكوين تطبيقك لاحقا في هذا البرنامج التعليمي.

مشروع دالة الإعداد

تأكد من تثبيت Azure Functions Core Tools.

افتح سطر أوامر.
إنشاء دليل المشروع ثم تغييره.
قم بتشغيل الأمر Azure Functions func init لتهيئة مشروع جديد.

func init --worker-runtime javascript --language javascript --model V4

إنشاء وظائف المشروع

بعد تهيئة المشروع، تحتاج إلى إنشاء دالات. يتطلب هذا المشروع ثلاث وظائف:

index: يستضيف صفحة ويب لعميل.
negotiate: يسمح للعميل بالحصول على رمز مميز للوصول.
broadcast: يستخدم مشغل وقت لبث الرسائل بشكل دوري لجميع العملاء.

عند تشغيل func new الأمر من الدليل الجذر للمشروع، تقوم Azure Functions Core Tools بإنشاء ملفات مصدر الدالة التي تخزنها في مجلد باسم الدالة. يمكنك تحرير الملفات حسب الضرورة لاستبدال التعليمات البرمجية الافتراضية برمز التطبيق.

إنشاء دالة الفهرس

قم بتشغيل الأمر التالي لإنشاء الدالة index .
```
func new -n index -t HttpTrigger
```

قم بتحرير src/functions/httpTrigger.js واستبدل المحتويات برمز json التالي:

const { app } = require('@azure/functions');
const fs = require('fs').promises;
const path = require('path');

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {

        try {

            context.log(`Http function processed request for url "${request.url}"`);

            const filePath = path.join(__dirname,'../content/index.html');
            const html = await fs.readFile(filePath);

            return {
                body: html,
                headers: {
                    'Content-Type': 'text/html'
                }
            };

        } catch (error) {
            context.log(error);
            return {
                status: 500,
                jsonBody: error
            }
        }
    }
});

إنشاء دالة التفاوض

قم بتشغيل الأمر التالي لإنشاء الدالة negotiate .
```
func new -n negotiate -t HttpTrigger
```

قم بتحرير src/functions/negotiate.js واستبدل المحتويات برمز json التالي:

const { app, input } = require('@azure/functions');

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'serverless',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.post('negotiate', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        try {
            return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
        } catch (error) {
            context.log(error);
            return {
                status: 500,
                jsonBody: error
            }
        }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR],
});

إنشاء دالة بث.

قم بتشغيل الأمر التالي لإنشاء الدالة broadcast .
```
func new -n broadcast -t TimerTrigger
```

تحرير src/functions/broadcast.js واستبدال المحتويات بالتعليمات البرمجية التالية:

const { app, output } = require('@azure/functions');
const getStars = require('../getStars');

var etag = '';
var star = 0;

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'serverless',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.timer('sendMessasge', {
    schedule: '0 * * * * *',
    extraOutputs: [goingOutToSignalR],
    handler: async (myTimer, context) => {

        try {
            const response = await getStars(etag);

            if(response.etag === etag){
                console.log(`Same etag: ${response.etag}, no need to broadcast message`);
                return;
            }
        
            etag = response.etag;
            const message = `${response.stars}`;

            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'newMessage',
                    'arguments': [message]
                });
        } catch (error) {
            context.log(error);
        }

    }
});

إنشاء ملف index.html

واجهة العميل لهذا التطبيق هي صفحة ويب. index تقرأ الدالة محتوى HTML من ملف content/index.html.

إنشاء مجلد يسمى content في مجلد جذر المشروع.
إنشاء content/index.html الملف.

انسخ المحتوى التالي إلى ملف content/index.html واحفظه:

<html>

<body>
  <h1>Azure SignalR Serverless Sample</h1>
  <div>Instructions: Goto <a href="https://github.com/Azure/azure-signalr">GitHub repo</a> and star the repository.</div>
  <hr>
  <div>Star count: <div id="messages"></div></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
  <script>
    let messages = document.querySelector('#messages');
    const apiBaseUrl = window.location.origin;
    console.log(`apiBaseUrl: ${apiBaseUrl}`);
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(apiBaseUrl + '/api')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      connection.on('newMessage', (message) => {
        console.log(`message: ${message}`);
        document.getElementById("messages").innerHTML = message;
      });

      connection.start()
        .catch(console.error);
  </script>
</body>

</html>

إعداد Azure Storage

تتطلب Azure Functions حساب تخزين للعمل. اختر أحد الخيارين التاليين:

تشغيل Azure Storage Emulator المجاني.
استخدم خدمة Azure Storage. قد يؤدي ذلك إلى تكبد تكاليف إذا تابعت استخدامه.

المحاكاة المحلية
مخزن البيانات الثنائية كبيرة الحجم لـ Azure

ابدأ تشغيل محاكي تخزين Azurite:
```
azurite -l azurite -d azurite\debug.log
```
تأكد من تعيين في AzureWebJobsStoragelocal.settings.json إلى UseDevelopmentStorage=true.

قم بتحديث المشروع لاستخدام سلسلة الاتصال تخزين Azure Blob.

func settings add AzureWebJobsStorage "<storage-connection-string>"

إضافة سلسلة الاتصال SignalR Service إلى إعدادات تطبيق الوظائف

لقد أوشكت على الانتهاء الآن. الخطوة الأخيرة هي تعيين سلسلة الاتصال SignalR Service في إعدادات تطبيق Azure Function.

في مدخل Microsoft Azure، انتقل إلى مثيل SignalR الذي قمت بنشره سابقا.
حدد "Keys" لعرض سلاسل الاتصال لمثيل SignalR Service.

انسخ سلسلة الاتصال الأساسي، ونفذ الأمر:

func settings add AzureSignalRConnectionString "<signalr-connection-string>"

تشغيل تطبيق Azure Function محليا

تشغيل تطبيق Azure Function في البيئة المحلية:

func start

بعد تشغيل Azure Function محليا، انتقل إلى http://localhost:7071/api/index. تعرض الصفحة عدد النجوم الحالي لمستودع GitHub Azure/azure-signalr. عند نجمة المستودع أو إلغاء تحديده في GitHub، سترى العدد المحدث كل بضع ثوان.

هل تواجه مشكلات؟ جرب دليل استكشاف الأخطاء وإصلاحها أو أخبرنا.

تنظيف الموارد

إذا لم تكن تنوي متابعة استخدام هذا التطبيق، فاحذف كافة الموارد التي تم إنشاؤها بواسطة هذا التشغيل السريع باستخدام الخطوات التالية حتى لا تتحمل أي رسوم:

من القائمة اليسرى في مدخل Azure، حدد مجموعات الموارد ثم حدد مجموعة الموارد التي أنشأتها. بدلاً من ذلك، يمكنك استخدام مربع البحث للبحث عن مجموعة الموارد باسمها.
في النافذة التي ستفتح، حدد مجموعة الموارد، ثم انقر فوق حذف مجموعة الموارد.
في النافذة الجديد، اكتب اسم مجموعة الموارد المراد حذفها، ثم انقر فوق حذف.

التعليمة البرمجية العينة

يمكنك الحصول على جميع التعليمات البرمجية المستخدمة في المقالة من مستودع GitHub:

aspnet/AzureSignalR-samples.

الخطوات التالية

في هذا التشغيل السريع، قمت ببناء وتشغيل تطبيق بلا خادم في الوقت الحقيقي في localhost. بعد ذلك، تعرف على المزيد حول كيفية الاتصال ثنائي الاتجاه بين العملاء وAzure Function باستخدام SignalR Service.

روابط SignalR Service لـ Azure Functions

الاتصال ثنائي الاتجاه بلا خادم

نشر Azure Functions مع تعليمات VS البرمجية

Share via