كيفية استخدام WebSockets في JavaScript: دليل 2026

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

في هذه المقالة، سنشرح ما هو WebSocket، وكيف يعمل، وكيفية استخدامه مع JavaScript. وسنوضح لك أيضًا كيفية استخدام Apidog لاختبار وتصحيح واجهات برمجة التطبيقات الخاصة بك.

مقدمة في WebSockets

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

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

كيف تعمل WebSockets

يعمل WebSocket عن طريق إنشاء اتصال بين العميل والخادم باستخدام مصافحة. يتم إجراء المصافحة باستخدام HTTP، حيث يرسل العميل طلب ترقية ويستجيب الخادم برد ترقية. يحتوي طلب الترقية والرد على بعض الرؤوس الخاصة التي تشير إلى أن العميل والخادم يرغبان في الانتقال من HTTP إلى WebSocket.

بمجرد اكتمال المصافحة، يتم ترقية الاتصال إلى WebSocket ويمكن للعميل والخادم تبادل الرسائل. يتم إرسال الرسائل واستقبالها باستخدام تنسيق ثنائي، وهو أكثر كفاءة وأسرع من HTTP. يمكن أن تكون الرسائل نصية أو ثنائية، ويمكن أن تحتوي على أي حجم ومحتوى.

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

فوائد استخدام WebSockets

تعتبر WebSockets تقنية تمكن من الاتصال المستمر والثنائي الاتجاه ومنخفض الزمن بين عملاء الويب وخوادم الويب. بعض فوائد استخدام WebSockets هي:

• تقلل من عبء نقل البيانات مقارنة بـ HTTP، الذي يستخدم دورة طلب/استجابة ويضيف رؤوسًا، وملفات تعريف الارتباط، وما إلى ذلك إلى كل رسالة.
• تستخدم على نطاق واسع ومدعومة من قبل العديد من المكتبات والأُطر والمتصفحات، مما يجعل من السهل استخدامها ودمجها.
• مرنة وتسمح بتنفيذ بروتوكولات وامتدادات على مستوى التطبيق، مثل رسائل النشر/الاشتراك.
• تحفز الأحداث وتسمح للخادم بدفع البيانات إلى العميل بمجرد توفرها، دون الحاجة إلى الاستعلام. هذا مفيد للتطبيقات التي تحتاج إلى الاستجابة بسرعة للأحداث، مثل غرف الدردشة أو تحديثات الأسهم.
• هي ثنائية الاتجاه وتسمح لكل من الخادم والعميل بإرسال البيانات في نفس الوقت، مما يمكّن من الاتصالات متعددة المستخدمين.

كيفية استخدام WebSocket مع JavaScript

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

للاستخدام WebSocket مع JavaScript، تحتاج إلى إنشاء كائن WebSocket باستخدام عنوان URL للخادم، ثم الاستماع للأحداث مثل open وmessage وclose وerror. يمكنك أيضًا إرسال البيانات إلى الخادم باستخدام طريقة send. إليك مثال بسيط حول كيفية استخدام WebSocket مع JavaScript:

// إنشاء كائن WebSocket باستخدام عنوان URL للخادم
const socket = new WebSocket("ws://localhost:3000");

// الاستماع لحدث الفتح، الذي يشير إلى أن الاتصال قد تم تأسيسه
socket.onopen = () => {
  console.log("تم فتح اتصال WebSocket");
  // إرسال رسالة إلى الخادم
  socket.send("مرحبا من المتصفح!");
};

// الاستماع لحدث الرسالة، الذي يحتوي على البيانات المستلمة من الخادم
socket.onmessage = (event) => {
  console.log("رسالة من الخادم:", event.data);
};

// الاستماع لحدث الإغلاق، الذي يشير إلى أن الاتصال مغلق
socket.onclose = (event) => {
  console.log("تم إغلاق اتصال WebSocket");
};

// الاستماع لحدث الخطأ، الذي يشير إلى وجود خطأ في الاتصال
socket.onerror = (error) => {
  console.error("خطأ WebSocket:", error);
};

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

// إنشاء كائن WebSocket باستخدام عنوان URL للخادم
const socket = new WebSocket("ws://localhost:3000");

تشير هذه السطر إلى إنشاء كائن WebSocket جديد باستخدام عنوان URL للخادم الذي يدعم بروتوكول WebSocket. يبدأ عنوان URL بـ ws:// أو wss:// للاتصالات الآمنة.

// الاستماع لحدث الفتح، الذي يشير إلى أن الاتصال قد تم تأسيسه
socket.onopen = () => {
  console.log("تم فتح اتصال WebSocket");
  // إرسال رسالة إلى الخادم
  socket.send("مرحبا من المتصفح!");
};

تحدد هذه الكتلة من الكود وظيفة ستنفذ عند إطلاق حدث open على كائن WebSocket. يشير حدث open إلى أن الاتصال بين المتصفح والخادم قد تم بنجاح. تسجل الوظيفة رسالة في السجل ثم ترسل رسالة إلى الخادم باستخدام طريقة send لكائن WebSocket.

// الاستماع لحدث الرسالة، الذي يحتوي على البيانات المستلمة من الخادم
socket.onmessage = (event) => {
  console.log("رسالة من الخادم:", event.data);
};

تحدد هذه الكتلة من الكود وظيفة ستنفذ عند إطلاق حدث message على كائن WebSocket. يحتوي حدث message على البيانات المستلمة من الخادم في خاصية event.data. تسجل الوظيفة البيانات في السجل.

// الاستماع لحدث الإغلاق، الذي يشير إلى أن الاتصال مغلق
socket.onclose = (event) => {
  console.log("تم إغلاق اتصال WebSocket");
};

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

// الاستماع لحدث الخطأ، الذي يشير إلى وجود خطأ في الاتصال
socket.onerror = (error) => {
  console.error("خطأ WebSocket:", error);
};

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

كيفية استخدام Apidog لتصحيح JavaScript WebSocket؟

قد يكون تصحيح WebSockets تحديًا لأنها تستخدم اتصالًا مستمرًا. ومع ذلك، هناك العديد من الأدوات المتاحة التي يمكن أن تساعدك في تصحيح كود WebSocket الخاص بك. واحدة من هذه الأدوات هي Apidog، وهي منصة شاملة لتطوير واجهة برمجة التطبيقات التعاونية. مع Apidog، يمكنك تعلم تقنيات تصحيح فعالة، إعداد بيئة التصحيح الخاصة بك، واستخدام أدوات متقدمة لتجربة تصحيح سلسة.

إليك كيفية استخدام Apidog لتصحيح عميل WebSocket:

1. فتح Apidog: أولاً، قم ببدء تطبيق Apidog وانقر على زر "+" على الجانب الأيسر، سيظهر قائمة منسدلة جديدة. من هناك اختر "واجهة برمجة تطبيقات WebSocket جديدة":

2. إنشاء اتصال: ابدأ بإدخال عنوان URL لواجهة برمجة تطبيقات WebSocket في شريط عنوان Apidog. ثم، انقر على زر "اتصل" لبدء عملية المصافحة وإنشاء اتصال. يتيح لك Apidog تخصيص المعلمات مثل المعلمات والرؤوس وملفات تعريف الارتباط خلال المصافحة.

3. إرسال واستقبال الرسائل: يمكنك إرسال واستقبال الرسائل بعد إنشاء الاتصال من خلال الوصول إلى علامة تبويب "الرسالة". لديك الخيار لتأليف نصوص، JSON، XML، HTML، وغيرها من رسائل النصوص، بالإضافة إلى رسائل التنسيق الثنائي باستخدام Base64 أو Hexadecimal. تعرض واجهة Apidog الجديدة حالة الاتصال والرسائل المرسلة والمستلمة بترتيب زمني. بالنقر على رسالة، يمكنك عرض تفاصيلها بسهولة.

4. وثائق واجهة برمجة التطبيقات: ورث Apidog وظائف قوية لوثائق واجهة برمجة التطبيقات لواجهات برمجة تطبيقات WebSocket، مما يمكّن من توثيق فعال لتفاعلات WebSocket الخاصة بك.

Apidog هو أداة بسيطة وقوية تتيح لك اختبار وتصحيح اتصالات WebSocket. تحتوي Apidog على جانب ويب وجانب عميل. إذا كنت تستخدم الجانب الويب وتحتاج إلى تصحيح الخدمات المحلية، ستحتاج إلى تثبيت مكون Google الإضافي لـ Apidog.

قم بالتنزيل هنا: ملحق متصفح Apidog

أمثلة واقعية على WebSockets جافا سكريبت

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

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

أفضل الممارسات لاستخدام WebSockets جافا سكريبت

عند استخدام WebSockets، من المهم اتباع أفضل الممارسات لضمان أن يكون الكود الخاص بك آمنًا وفعالًا. إليك بعض أفضل الممارسات التي يجب وضعها في الاعتبار:

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

• أمان WebSocket الخاص بك: دائمًا تفضل استخدام wss:// (WebSocket Secure) بدلاً من ws:// لتشفير البيانات ومنع التجسس. هذا مشابه لاستخدام HTTPS للاتصالات الآمنة HTTP.
• تجنب البروتوكولات المبالغ فيها: قلل عدد الرسائل المرسلة عبر اتصال WebSocket لتقليل حركة المرور الشبكية وتحسين الأداء.
• اعتبر بنية الشبكة: كن واعيًا لبنية الشبكة لتطبيقك، بما في ذلك جدران الحماية وخوادم الوكيل، والتي قد تؤثر على اتصالات WebSocket.
• قيود المتصفح: كن واعيًا لقيود المتصفح واختبر تنفيذ WebSocket الخاص بك عبر متصفحات مختلفة لضمان سلوك موحد.
• تجنب العمليات المحجوزة: في JavaScript، تجنب العمليات المحجوزة التي يمكن أن تجمد الخيط الرئيسي للمتصفح وتعيق الاتصالات عبر WebSocket.
• راقب استخدام الذاكرة: راقب استخدام الذاكرة، حيث يمكن أن تؤدي اتصالات WebSocket إلى تسرب للذاكرة إذا لم تتم إدارتها بشكل صحيح.
• استخدم TLS لتأمين الاتصالات: استخدم TLS (أمان طبقة النقل) لتأمين جميع الاتصالات، مما يضمن سلامة البيانات وخصوصيتها.
• تعامل مع الاتصالات المقطوعة: نفذ منطق للكشف عن الاتصالات المقطوعة والتعامل معها، مما يسمح بإعادة الاتصال تلقائيًا عند الإمكان.
• قابلية التوسع: صمم بنية WebSocket الخاصة بك لتكون قابلة للتوسع، مع الأخذ في الاعتبار عدد الاتصالات المفتوحة ومعدل الرسائل.

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

الخاتمة

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

من خلال اتباع أفضل الممارسات واستخدام أدوات مثل Apidog، يمكنك ضمان أن يكون كود WebSocket الخاص بك آمنًا وفعالًا. إذن، ماذا تنتظر؟ ابدأ في استخدام WebSockets في تطبيقات الويب الخاصة بك اليوم!

موارد إضافية

إليك بعض الموارد الإضافية لمساعدتك على تعلم المزيد حول WebSockets:

• كيفية إنشاء عميل WebSocket في Python؟ (دليل 2024)
• WebSockets مقابل HTTP: أيهما تختار لمشروعك في 2024
• كيفية التحقق مما إذا كان خادم WebSocket يعمل
• React WebSocket: نظرة عامة كاملة