دمج تقنيات Node.js و WebSockets لتطبيق الويب القادم الخاص بك

تدريبك على البيانات حتى أكتوبر 2023.

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

ما هو Node.js؟

Node.js هي بيئة تشغيل جافا سكريبت مفتوحة المصدر متعددة المنصات تسمح لمستخدميها بتشغيل كود جافا سكريبت خارج متصفح الويب. وبالتالي، فإن Node.js لا يحد من التطبيقات والأنظمة البرمجية المختلفة التي يمكن أن تستخدم برمجة جافا سكريبت!

المميزات الرئيسية التي تجعل Node.js جذابًا للمطورين

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

متى يجب أن تفكر في استخدام Node.js لمشاريعك

يُعرف Node.js في المقام الأول ببناء البرمجيات خارج صفحات الويب التقليدية. لذلك، يمكنك التفكير بقوة في استخدام Node.js في جزء من برنامجك إذا كنت تخطط لامتلاك حالات استخدام مثل:

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

فوائد استخدام Node.js كجزء من برنامجك

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

ما هي WebSockets؟

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

يرجى الملاحظة أن WebSockets هي بروتوكول، مما يعني أنها لا تندرج تحت أي نوع ملف. ومع ذلك، لا يزال يتعين عليك الانتباه إلى أمان WebSocket!

المميزات الرئيسية التي تميز WebSockets عن البروتوكولات الأخرى

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

الفوائد المحتملة التي يمكنك الحصول عليها من استخدام WebSockets

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

كيف تجمع بين Node.js وWebSockets لإنشاء تطبيقات ويب؟

إليك دليل خطوة بخطوة حول كيفية بناء تطبيقات ويب حقيقية الوقت مع Node.js وWebSockets!

1. اختر مكتبة:

هناك عدد من المكتبات الشائعة التي يمكنك الاختيار من بينها لمساعدتك في تنفيذ WebSockets في Node.js:

• ws: مكتبة خفيفة الوزن مع واجهة برمجة تطبيقات سهلة الاستخدام. مثالية للمشاريع البسيطة.
• socket.io: توفر ميزات إضافية مثل الغرف، والمساحات، والبث، مما يجعلها جيدة للتطبيقات المعقدة.
• express-ws: إضافة لإطار العمل Express، تقدم التكامل مع تطبيقات Express القائمة.

2. إعداد خادم Node.js الخاص بك:

قم بإنشاء خادم Node.js باستخدام وحدات مثل http أو express. سيتم تشغيل هذا الخادم للاستماع إلى الاتصالات الواردة والتعامل مع التوجيه والمنطق الآخر جانب الخادم.

3. تنفيذ WebSocket:

• استخدم المكتبة التي اخترتها لإنشاء خادم WebSocket، مع تحديد المنفذ الذي سيتم الاستماع عليه.

في هذه الخطوة، يجب عليك أيضًا تحديد معالجات الأحداث لمواقف مختلفة:

• الاتصال: عندما يتصل عميل، يعالج WebSocket المصادقة، والتفويض، وتبادل البيانات الأولية.
• الرسالة: عندما يرسل عميل رسالة، يتم معالجتها، ويتم بثها للعملاء الآخرين (إذا لزم الأمر)، ويتم إرسال استجابة إذا لزم الأمر.
• الانفصال: يمكن أن تتعامل WebSockets بلطف مع الانفصال والتنظيف.

4. تكامل جانب العميل:

على جانب العميل (عادة في متصفح الويب)، يمكنك استخدام مكتبات جافا سكريبت مثل ws أو socket.io-client للاتصال بخادم WebSocket الخاص بك.

• قم بإنشاء اتصال وتعامل مع استجابات الخادم والرسائل المستلمة.
• قم بتنفيذ معالجات الأحداث على الجانب العميل للتفاعل مع البيانات والتحديثات الواردة.

مقتطف كود لـ Node.js وWebSockets (مثال تطبيق دردشة بسيط)

معظم تطبيقات الويب التي يمكنك العثور عليها اليوم تحتوي على أجزاء متوافقة من الجزء الأمامي والخلفي. فيما يلي عينات من تقنيتي Node.js وWebSockets تعمل بشكل متكامل في مثال تطبيق دردشة بسيط.

كود جانب الخادم (الجزء الخلفي) [Node.js]

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('تم اتصال عميل');

  ws.on('message', (message) => {
    console.log(`رسالة عميل: ${message}`);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('تم فصل العميل');
  });
});

console.log('خادم WebSocket يستمع على المنفذ 8080');

شرح الكود:

• ws: يستورد مكتبة ws.
• المتغير wss ينشئ خادم WebSocket باستخدام WebSocket.Server على المنفذ 8080.
• حدث connection: عندما يتصل عميل، يسجل رسالة، ويحدد معالجات الأحداث لـ message و close.
• يتم تسجيل حدث message للرسالة المستلمة، ويتكرر عبر جميع العملاء المتصلين، ويرسل الرسالة إلى كل عميل مفتوح.
• يسجل حدث close رسالة عندما ينفصل عميل.

كود جانب العميل (الجزء الأمامي) [Javascript]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>دردشة WebSocket</title>
</head>
<body>
  <input type="text" id="message" placeholder="اكتب رسالتك..." />
  <button id="send">إرسال</button>
  <div id="messages"></div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
      console.log('متصل بالخادم');
    };

    ws.onmessage = (event) => {
      const message = event.data;
      console.log(`رسالة مستلمة: ${message}`);
      const messagesDiv = document.getElementById('messages');
      messagesDiv.innerHTML += `<p>${message}</p>`;
    };

    const sendButton = document.getElementById('send');
    sendButton.addEventListener('click', () => {
      const messageInput = document.getElementById('message');
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

شرح الكود:

• يخلق اتصال WebSocket بالخادم باستخدام ws.
• حدث open يسجل رسالة عند إنشاء الاتصال.
• حدث message يسجل الرسالة المستلمة ويعرضها في عنصر HTML بمعرف messages.
• حدث النقر على زر send يحصل على الرسالة من حقل الإدخال، ويرسلها إلى الخادم باستخدام ws.send، وي clears حقل الإدخال.

بناء واجهات برمجة التطبيقات باستخدام Node.js وWebSockets (مع عرض مقتطفات الأكواد)

يمكنك أيضًا إنشاء واجهات برمجة التطبيقات الخاصة بك لاستخدامها داخل تطبيق الويب الذي أنشأته مؤخرًا! (يرجى ملاحظة أن الكود الوارد في هذه المقالة هو لأغراض العرض فقط.)

1. إعداد بيئة Node.js:

• قم بتثبيت Node.js وnpm (مدير حزمة نود)
• أنشئ دليل مشروع وابدأه: npm init -y

2. تثبيت المكتبات المطلوبة:

ستحتاج إلى تثبيت مكتبة ws الخاصة بـ WebSockets عن طريق تنفيذ هذا السطر من الكود: npm install ws. ستحتاج أيضًا إلى تثبيت إطار عمل ويب للتوجيه والتعامل مع طلبات HTTP، مثل استخدام Express عبر هذا السطر من الكود: npm install express.

3. إنشاء خادم WebSocket (جافا سكريبت):

const WebSocket = require('ws');
const express = require('express'); // إذا كنت تستخدم Express

const app = express(); // إذا كنت تستخدم Express
const wss = new WebSocket.Server({ port: 8080 });

// معالجة طلبات HTTP (إذا كنت تستخدم Express)
app.get('/', (req, res) => {
  res.send('مرحبًا، أيها العالم!');
});

// معالجة اتصال WebSocket
wss.on('connection', (ws) => {
  console.log('تم اتصال عميل');

  ws.on('message', (message) => {
    console.log(`تم استلام الرسالة: ${message}`);
    // معالجة الرسالة وإمكانية إرسال استجابة
  });

  ws.on('close', () => {
    console.log('تم فصل العميل');
  });
});

// بدء الخادم
app.listen(8080, () => {
  console.log('الخادم يستمع على المنفذ 8080');
});

بعد هذه الخطوة، يمكنك الآن الوصول إلى خادم WebSocket عبر عنوان URL الخاص بـ WebSocket، مثل ws://localhost:8080.

4. تحديد نقاط نهاية واجهة برمجة التطبيقات (جافا سكريبت):

ws.on('message', (message) => {
  const data = JSON.parse(message);
  const action = data.action;

  if (action === 'getData') {
    ws.send(JSON.stringify({ data: 'بعض البيانات' }));
  } else if (action === 'sendMessage') {
    // التعامل مع منطق إرسال الرسالة
  }
});

5. صياغة تفاعل جانب العميل (جافا سكريبت):

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('متصل بالخادم');
  ws.send(JSON.stringify({ action: 'getData' }));
};

ws.onmessage = (event) => {
  const response = JSON.parse(event.data);
  console.log(response);
};

Apidog - المنصة المثالية لاختبار واجهات برمجة التطبيقات

بمجرد أن تنشئ تطبيق الويب WebSocket الخاص بك باستخدام Node.js، ستحتاج إلى اختباره للتأكد من أنه يعمل كما هو متوقع.

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

كما أن لديك خادم WebSocket الخاص بك قيد التشغيل على عنوان URL (حيث يستخدم هذا المقال ws://localhost:8080)، يمكننا البدء بإنشاء طلب WebSocket!

إنشاء طلب WebSocket باستخدام Apidog

أولاً، قم بإنشاء طلب API جديد خصيصًا لاختبار واجهة برمجة التطبيقات أو التطبيق WebSocket الخاص بك في Node.js. يمكنك أيضًا استخدام الاختصار Ctrl + T لإنشاء طلب جديد على الفور.

يجب أن تكون قادرًا على رؤية طلب فارغ بدون اسم. هنا، يمكنك صياغة عنوان URL لواجهة برمجة التطبيقات المحددة، وتعيين طريقة HTTP المطلوبة، وتضمين معلمات الاستعلام التي تخطط لاختبار واجهة برمجة التطبيقات أو التطبيق WebSocket الخاص بك باستخدامها.

الخاتمة

يمكن أن يتيح الجمع بين تقنيتي Node.js وWebSocket للمطورين إنشاء تطبيقات مثيرة ومفيدة. إنها قوية بشكل خاص في تمكين وظائف مثل غرف الدردشة الحقيقية الوقت والبث المباشر!

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