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

يعُدّ Node.js وWebSocket ثنائيًا شائعًا في صناعة الويب، ويُعرف بأنه مفيد بشكل خاص للاتصال في الوقت الحقيقي. حيث يُمكنهما العديد من التطبيقات الشائعة اليوم، مثل غرف الدردشة المباشرة والبث المباشر، مُوفرين أشكالًا من التواصل الحي!

Amir Hassan

Amir Hassan

31 مايو 2025

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

Node.js Websockets، عندما يتم جمعها معًا، هي مجموعة من تقنيتين شهيرتين يمكن لمطوري الويب استخدامها لبناء تطبيقات ويب في الوقت الفعلي.

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

أيضًا، إذا كنت بحاجة إلى منصة API يمكنها التعامل مع استيرادات الملفات من أنواع مختلفة، فكر في تنزيل Apidog! 👇 👇 👇
زر

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

ما هو Node.js؟

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

nodejs website ai tool javascript
انقر على الصورة إذا كنت مهتمًا بتجربة Node.js!

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

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

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

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

ما هي WebSockets؟

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

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

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

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

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

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

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

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

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

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

3. تنفيذ WebSocket:

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

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

على جانب العميل (عادةً في متصفح الويب)، يمكنك استخدام مكتبات JavaScript مثل 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');

شرح الشيفرة:

شيفرة الجانب العميل (الواجهة الأمامية) [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>

شرح الشيفرة:

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

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

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

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

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

3. إنشاء خادم WebSocket (JavaScript):

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. تعريف نقاط نهاية واجهة برمجة التطبيقات (JavaScript):

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. إنشاء تفاعل من جانب العميل (JavaScript):

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 - منصة اختبار API المثالية

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

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

apidog api design first development platform
Apidog - منصة تطوير قائمة على التصميم

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

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

create new api request apidog
إنشاء طلب WebSocket جديد باستخدام Apidog

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

insert details api request apidog
املأ تفاصيل طلب WebSocket الجديد الخاص بك

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

خاتمة

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

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

Explore more

أين يمكن تنزيل Swagger UI باللغة العربية مجانًا

أين يمكن تنزيل Swagger UI باللغة العربية مجانًا

استكشف صعوبة الحصول على واجهة باللغة العربية لـ Swagger UI وتعرف على سبب كون Apidog بديلاً قويًا لمنصة تطوير واجهات برمجة التطبيقات (APIs).

23 أبريل 2025

أين يمكن تحميل Postman بالعربية مجانًا؟ استكشاف الخيارات وبديل Apidog

أين يمكن تحميل Postman بالعربية مجانًا؟ استكشاف الخيارات وبديل Apidog

هل يمكنك تحميل Postman بالعربية مجانًا؟ بينما يفتقر Postman للدعم الأصلي للغة العربية، توجد حلول بديلة. استكشفها واكتشف Apidog، بديل Postman القوي والموحد المصمم لتبسيط سير عمل API بالكامل، بغض النظر عن اللغة.

22 أبريل 2025

للمبتدئين: الاستخدام الأساسي لبرنامج Postman

للمبتدئين: الاستخدام الأساسي لبرنامج Postman

Postman هي أداة أساسية لاختبار واجهات برمجة التطبيقات (API). يمكن أن يُحسن كفاءتك عند تنفيذ استراتيجيات API. في هذه المقالة، سأشرح أساسيات استخدام Postman، لتمكين المستخدمين الجدد من تعلمه بسهولة من خلال هذا الدليل.

25 مارس 2025

ممارسة تصميم API في Apidog

اكتشف طريقة أسهل لبناء واستخدام واجهات برمجة التطبيقات