كيفية استخدام WebSockets

يوفر بروتوكول WebSocket ( WS ) القدرة على تبادل البيانات بين المستعرض والخادم عبر اتصال دائم. يتم نقل البيانات من خلاله في كلا الاتجاهين في شكل "حزم" دون قطع الاتصال وطلبات HTTP الإضافية.

يعد WebSocket مفيدًا لخدمات الاتصال المستمر ، مثل غرف الدردشة والألعاب عبر الإنترنت والأسواق في الوقت الفعلي وما إلى ذلك.

كمثال ، دعنا ننشئ خلفية لمحادثة بسيطة. من الضروري توفير الميزات الأساسية:

1. إرسال رسائل للدردشة.
2. تحديد تأليف الرسالة.
3. إخطارات العمل. على سبيل المثال ، انضمام عضو جديد إلى الدردشة ، وترك الدردشة ، وكتابة المؤشر (شخص ما يكتب ...)

نموذج قاعدة البيانات

لنبدأ بإنشاء نموذج لقاعدة البيانات. حتى إذا لم نخطط في البداية لتخزين الرسائل وسجل المراسلات في قاعدة البيانات ، ما زلنا بحاجة إلى نموذج لهيكلة إرسال الرسائل والإشعارات.

لنقم بإنشاء نموذج chat_event عام يحتوي على:

1. العلاقة مع المستخدم. تتضمن أي رسالة معلومات حول المستخدم الذي تشير إليه.
2. Type (enum) الحقل مع 4 خيارات ممكنة. Connected وغير متصل - Disconnected عندما يكون المستخدم متصلاً أو غير متصل. Typing - لنقل المعلومات التي تفيد بأن المستخدم يقوم حاليًا بكتابة رسالة جديدة. Message - لرسالة نصية قياسية.
3. Message (text) - نص الرسالة.
   

تكوين نقطة النهاية

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

نحن بحاجة إلى قسم نقطة النهاية. هناك نقوم بإنشاء نقطة نهاية جديدة عن طريق تحديد الخيار المناسب - WebSocket Endpoint .

بالنسبة إلى WebSockets ، لا يوجد خيار لطريقة الطلب - فهي دائمًا GET . لنحدد عنوان URL بسيطًا - /chat/ وننشئ مجموعة له بنفس الاسم.

بعد ذلك ، نحتاج إلى إنشاء متغيرات ستحدد تنسيق تبادل البيانات داخل WebSocket.

• Client-to-Server . على غرار المعلمات الواردة لعمليات الأعمال القياسية. في مثالنا ، سننشئ رسالة نصية متغيرة بسيطة (سنرسل رسائل نصية عادية إلى الخادم).
• Server-to-Client . هنا يتم إنشاء المتغيرات لرسائل الخادم ، وإرسال البيانات من الخادم إلى المستخدم. لاحظ أن هذا ليس هو نفسه استجابة لطلب المستخدم. وعلى الرغم من أنه يمكن إرسالها كرد فعل على إجراءات المستخدم ، إلا أنها تحدث غالبًا بسبب بعض الأحداث الخارجية. في مثالنا ، سيرسل الخادم إشعارات بجميع الأحداث في الدردشة ، لذلك سنقوم بتعيين نموذج chat_event كمتغير.
  

بعد إنشاء المتغيرات ، يمكنك المتابعة إلى الشيء الرئيسي - إنشاء منطق WebSocket. يعتمد على المشغلات التي يتم إطلاقها عند تلقي رسالة جديدة على WebSocket ، وكذلك عند إنشاء اتصال أو فصله.

إنشاء عملية تجارية

دعنا نستخدم مشغل connect وننشئ عملية تجارية له. سيتم إطلاقه في الوقت الذي يقوم فيه المستخدم بإنشاء اتصال مع WebSocket ، وستكون مهمته إرسال إشعار بهذا الشأن إلى جميع المستخدمين المتصلين.

لاحظ أن كتلة البدء تتضمن معلمتين: User ID Connection ID . وبالتالي ، لا يمكنك تحديد المستخدم الذي أنشأ الاتصال على الفور فحسب ، بل يمكنك أيضًا الحصول على معرف فريد لهذا الاتصال. في المستقبل ، يمكن استخدام هذا المعرف ، على سبيل المثال ، لإرسال رسائل مستهدفة أو لإنهاء الاتصال بالقوة.

قم بإنشاء جميع الخطوات اللازمة لعملية الأعمال:

1. Make User . دعنا نستخدم User ID لمعامل البداية لإنشاء نموذج مستخدم.
2. Make chat_event . إنشاء نموذج إعلام الحدث. سنقوم بتوصيله بالمستخدم باستخدام النموذج الذي تم إنشاؤه في الخطوة السابقة وكذلك تحديد نوع الحدث وتعيين Type = Connected . نحن لا نستخدم معلمة الرسالة ، حيث إنها في هذه الحالة ليست رسالة يتم إرسالها ولكنها إشعار اتصال.
3. WSS Connections /chat/ . باستخدام هذه الكتلة ، سوف نحصل على قائمة بجميع اتصالات WebSocket النشطة.
4. For Each Loop . نستخدم مصفوفة الاتصالات كمعامل حلقة ، نرسل إخطارات إلى كل مستخدم متصل.
5. Expand WebSocket Connection . قم بتوسيع معلومات الاتصال للحصول على Connection ID .
6. WSS Send /chat/ . نحن نستخدم Connection ID و chat_event الذي تم إنشاؤه لإرسال الإشعار.

استخدام Postman لاختبار WebSockets

في هذه المرحلة ، WebSocket ، على الرغم من أنه لا يحتوي على وظائف مهمة ، إلا أنه يعمل بالفعل ويمكن اختباره في الممارسة العملية. للقيام بذلك ، يمكنك استخدام أي أداة تسمح لك بالعمل مع WebSockets. دعنا نلقي نظرة على كيفية القيام بذلك باستخدام Postman كمثال.

يجب النقر فوق New button " وتحديد WebSocket Request

تحتاج إلى تحديد عنوان URL لمقبس الويب. يمكن العثور عليه باستخدام Swagger ، حيث يوجد WebSocket في القائمة مع بقية نقاط النهاية.

على عكس الطلبات القياسية ، تعمل wss باستخدام بروتوكول wss ، لذلك تحتاج إلى استبدال https بـ wss . يجب أن تكون النتيجة عنوان URL مشابهًا: wss: //qvlxglh-app.apms.io/api/chat/

بعد ذلك ، تحتاج إلى إضافة رمز مصادقة إلى الطلب حيث لا يمكن أن يكون الاتصال مجهولاً. تحتاج إلى إنشاء رأس Authorization بقيمة مثل Bearer lBCiunRWg6BfogDrLml4jrC4iJiWucKo . بدلاً من lBCiunRWg6BfogDrLml4jrC4iJiWucKo ، تحتاج إلى إدخال الرمز المميز الخاص بك ، والذي يمكن الحصول عليه كنتيجة للترخيص ( POST /auth/ endpoint).

إذا تم كل شيء بشكل صحيح ، فعند النقر فوق الزر " Connect " ، سيتم إنشاء اتصال ، وسيتم استلام الرسالة الأولى من جانب الخادم ، وهي العملية التجارية للإرسال التي تم إنشاؤها مسبقًا.

في الوقت نفسه ، يمكنك التأكد من أن تلقي الرسائل من الخادم لا يحدث فقط كرد فعل على بعض الطلبات منا. يمكن أن تتسبب تصرفات المستخدمين الآخرين في حدوثها. لاختبار ذلك ، يمكنك إنشاء اتصال في علامة تبويب أخرى باستخدام رمز مصادقة مستخدم آخر. سيتم إرسال رسالة من الخادم لإعلامك بذلك إلى جميع علامات التبويب ذات الاتصال النشط.

عملية الأعمال للمراسلة

يمكنك الآن الاستمرار في تطوير قدرات WebSocket وإنشاء عملية تجارية للمراسلة. بالمناسبة ، يمكنك إرسال الرسائل الآن ، ولكن بدون إنشاء المنطق أولاً ، فهذا لا معنى له ، ولن تؤدي الرسالة إلى أي رد فعل. لذلك ، دعنا نعود إلى إعدادات نقطة النهاية وننشئ عملية تجارية لمشغل receive .

من نواح كثيرة ، ستكون مشابهة لعملية الأعمال السابقة. عند استلام رسالة ، سيكون من الضروري إنشاء حدث chat_event وإرسال إشعارات حوله إلى جميع المشاركين في الدردشة. الفرق هو أن الرسالة نفسها ستحتاج إلى إضافتها إلى chat_event ، ولا يحتاج مؤلف الرسالة إلى أن يتم تضمينه في القائمة البريدية.

يتم استخدام نفس الكتل في الجزء الأول من عملية الأعمال. في مربع Make chat_event ، تحتاج إلى تعيين type = message وإرفاق الرسالة نفسها من كتلة البداية.

في الحلقة ، نحتاج إلى التحقق من (Equal ) وإرسال الرسالة فقط إذا كان معرف اتصال جهاز الاستقبال لا يتطابق مع معرف اتصال المرسل ( If-Else = False ).

يمكنك نشر النتيجة والبدء في الاختبار. لاحظ أن الرسالة نفسها بتنسيق JSON ، لذلك عند استخدام متغير الرسالة ، ستبدو على هذا النحو:

{"message":"Some text here"}

في المثال ، يمكنك أن ترى أنك تتلقى إشعارًا بالاتصال بالمحادثة ، وترسل رسالتك الخاصة ( Hi! ) ، وتتلقى ردًا ( Glad to see you! )

هذا يكمل إنشاء الواجهة الخلفية الأساسية للدردشة باستخدام WebSockets. يمكنك البدء في إنشاء الواجهة الأمامية وتطوير تطبيق المراسلة الخاص بك في الوقت الفعلي.