T10 BLOGS

كيفية إنشاء محرر أكواد تفاعلي في الوقت الفعلي باستخدام Node.js و Socket.IO

Amine
03/10/2024
Web Development

من بين التحديات الكبيرة التي تواجه المطورين هو إنشاء بيئة تطوير تفاعلية تُمكّن المستخدمين من تحرير الأكواد بشكل تعاوني (Collaborative Code Editor) في الوقت الفعلي. في هذا الدليل، سنقوم بإنشاء تطبيق بسيط لتحرير الأكواد التفاعلية باستخدام Node.js، Socket.IO، و Express. يتيح هذا التطبيق للمستخدمين كتابة الأكواد معًا في نفس الوقت، تمامًا كما هو الحال في الأدوات الاحترافية مثل Google Docs أو Visual Studio Code Live Share.

المتطلبات الأساسية

  • Node.js مثبت على جهازك.
  • محرر نصوص مثل Visual Studio Code أو Sublime Text.
  • معرفة أساسية بـ HTML، CSS، وJavaScript.
  • مكتبة Socket.IO للتواصل في الوقت الفعلي.
  • Express.js لإنشاء خادم ويب.
  • متصفح حديث لاختبار التطبيق.

الخطوة 1: إعداد المشروع باستخدام Node.js و Express

  1. أنشئ مجلدًا جديدًا للمشروع، وانتقل إليه:
mkdir collaborative-code-editor
cd collaborative-code-editor
  1. قم بتهيئة المشروع باستخدام npm:
npm init -y
  1. قم بتثبيت الحزم الضرورية:
npm install express socket.io
  1. أنشئ ملفًا جديدًا باسم server.js في المجلد الجذر للمشروع، وأضف الكود التالي:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();

const server = http.createServer(app);
const io = socketIo(server);

const PORT = 3000;

// إعداد مسار أساسي لعرض واجهة المستخدم
app.use(express.static(__dirname + '/public'));

// التعامل مع الاتصال من خلال Socket.IO
io.on('connection', (socket) => {
    console.log('User connected');

    // استقبال التغييرات من العميل وإعادة إرسالها لجميع العملاء الآخرين
    socket.on('code change', (data) => {
        socket.broadcast.emit('code update', data);
    });

    // عند قطع الاتصال
    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

// تشغيل الخادم
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

الخطوة 2: إعداد واجهة المستخدم

  1. أنشئ مجلدًا جديدًا باسم public بجانب ملف server.js.
  2. داخل المجلد public، أنشئ ملفًا جديدًا باسم index.html، وأضف الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="تطبيق محرر أكواد تفاعلي في الوقت الفعلي باستخدام Node.js و Socket.IO.">
    <title>محرر أكواد تفاعلي</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>محرر أكواد تفاعلي</h1>
    <textarea id="code-editor" placeholder="ابدأ بكتابة الكود هنا..."></textarea>
    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>
</body>
</html>

الخطوة 3: تصميم واجهة المستخدم باستخدام CSS

  1. أنشئ ملفًا جديدًا باسم styles.css داخل المجلد public، وأضف الكود التالي:
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

h1 {
    margin-top: 20px;
}

#code-editor {
    width: 80%;
    height: 400px;
    margin: 20px auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    font-size: 16px;
    font-family: 'Courier New', monospace;
}

الخطوة 4: إضافة الوظائف باستخدام JavaScript

  1. أنشئ ملفًا جديدًا باسم script.js داخل المجلد public، وأضف الكود التالي:
const socket = io();

const editor = document.getElementById("code-editor");

// إرسال التغييرات إلى الخادم عند الكتابة
editor.addEventListener("input", () => {
    const code = editor.value;
    socket.emit("code change", code);
});

// استقبال التغييرات من الخادم وتحديث محتوى المحرر
socket.on("code update", (data) => {
    editor.value = data;
});

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

  1. تأكد من أنك في المجلد الجذر للمشروع (حيث يوجد server.js)، ثم قم بتشغيل الخادم:
node server.js
  1. افتح المتصفح وانتقل إلى http://localhost:3000/، وستظهر لك واجهة تطبيق محرر الأكواد.
  2. جرب فتح التطبيق في عدة نوافذ متصفح، واكتب في المحرر لترى كيف يتم تحديث المحتوى في الوقت الفعلي لجميع المستخدمين.

خاتمة

تهانينا! لقد أنشأت تطبيق محرر أكواد تفاعلي في الوقت الفعلي باستخدام Node.js، Socket.IO، و Express. يمكنك الآن توسيع هذا التطبيق، وإضافة ميزات مثل دعم لغات البرمجة المختلفة، أو حتى بناء مشروع أكبر مع خيارات لحفظ الكود ومشاركته.

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

شارك المقال:

التعليقات

اترك تعليقاً