بناء تطبيق دردشة فوري باستخدام Node.js و Socket.io

Amine

23/09/2024

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

المتطلبات المسبقة

معرفة أساسية بـ JavaScript.
معرفة بأساسيات Node.js و npm.
تثبيت Node.js و npm على جهازك.
فهم أساسي لـ HTML و CSS.

خطوة 1: إعداد بيئة العمل

ابدأ بإنشاء مجلد جديد لمشروعك وانتقل إليه عبر سطر الأوامر:

mkdir chat-app
cd chat-app

قم بتهيئة مشروع Node.js جديد:

npm init -y

ثم قم بتثبيت التبعيات اللازمة:

npm install express socket.io

خطوة 2: إنشاء خادم Express

أنشئ ملف server.js وأضف الكود التالي لإعداد خادم Express:

const express = require('express');
const app = express();
const http = require('http').createServer(app);

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

http.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

خطوة 3: إعداد Socket.io للتواصل في الوقت الحقيقي

قم بتعديل server.js لإضافة دعم Socket.io:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
  console.log('مستخدم متصل');

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('مستخدم قطع الاتصال');
  });
});

http.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

شرح الكود

قمنا باستيراد socket.io وربطناه بخادم HTTP.
عند حدوث اتصال جديد، نستمع للرسائل من الحدث 'chat message' ونبثها لجميع المستخدمين.
نسجل في سطر الأوامر عند اتصال أو قطع اتصال المستخدمين.

خطوة 4: إنشاء الواجهة الأمامية

داخل مجلد public، أنشئ ملف index.html وأضف الكود التالي:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>تطبيق الدردشة</title>
  <style>
    body { font-family: Arial, sans-serif; direction: rtl; text-align: right; }
    #messages { list-style-type: none; padding: 0; }
    #messages li { padding: 5px 10px; }
    #messages li:nth-child(odd) { background: #f1f1f1; }
    form { display: flex; position: fixed; bottom: 0; width: 100%; }
    input { flex: 1; padding: 10px; border: none; }
    button { padding: 10px; background: #4CAF50; color: #fff; border: none; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form">
    <input id="input" autocomplete="off" />
    <button>إرسال</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', function(msg) {
      const item = document.createElement('li');
      item.textContent = msg;
      const messages = document.getElementById('messages');
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

شرح الواجهة الأمامية

أنشأنا نموذجًا بسيطًا لإدخال الرسائل وزر الإرسال.
استخدمنا Socket.io في الجانب الأمامي للتواصل مع الخادم.
عند استلام رسالة، نقوم بإضافتها إلى قائمة الرسائل.

خطوة 5: تشغيل التطبيق

لتشغيل التطبيق، نفذ الأمر التالي في سطر الأوامر:

node server.js

افتح المتصفح وانتقل إلى http://localhost:3000/ لتجربة تطبيق الدردشة. يمكنك فتح عدة نوافذ متصفح لمشاهدة الرسائل تنتقل بين المستخدمين في الوقت الحقيقي.

خطوة 6: تحسينات إضافية

لجعل تطبيق الدردشة أكثر تفاعلية، يمكنك إضافة الميزات التالية:

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

الخاتمة

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

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

#JavaScript #Node.js #Socket.IO #برمجة #تطبيق دردشة #تطبيقات الوقت الحقيقي #تطوير الويب #تعلم Node.js

شارك المقال:

القائمة

التصنيفات