العودة للمقالات

بناء محرر نصوص تعاوني في الوقت الفعلي باستخدام Svelte و WebSockets

Majd Muhtaseb12‏/08‏/202510 دقيقة

مقدمة

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

إعداد مشروع Svelte

أولاً، قم بإنشاء مشروع Svelte جديد باستخدام degit:

npx degit sveltejs/template my-text-editor
cd my-text-editor
npm install
npm run dev

إنشاء مكون المحرر

قم بإنشاء مكون يسمى Editor.svelte في دليل src. سيحتوي هذا المكون على منطقة النص وإدارة اتصال WebSocket.

<script>
  import { onMount } from 'svelte';

  let text = '';
  let socket;

  onMount(() => {
    socket = new WebSocket('ws://localhost:8080'); // استبدل بعنوان خادم WebSocket الخاص بك

    socket.onopen = () => {
      console.log('تم إنشاء اتصال WebSocket.');
    };

    socket.onmessage = (event) => {
      text = event.data;
    };

    socket.onclose = () => {
      console.log('تم إغلاق اتصال WebSocket.');
    };
  });

  function handleInput() {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send(text);
    }
  }
</script>

<textarea bind:value={text} on:input={handleInput} style="width: 100%; height: 400px;"></textarea>

إنشاء خادم WebSocket بسيط (Node.js)

للتعامل مع الاتصال في الوقت الفعلي، ستحتاج إلى خادم WebSocket. إليك مثال بسيط باستخدام Node.js ومكتبة ws:

npm install ws

قم بإنشاء ملف يسمى server.js:

const WebSocket = require('ws');

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

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

  ws.on('message', message => {
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

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

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

قم بتشغيل الخادم باستخدام node server.js.

دمج مكون المحرر

استبدل محتوى src/App.svelte بما يلي:

<script>
  import Editor from './Editor.svelte';
</script>

<main>
  <h1>محرر نصوص تعاوني</h1>
  <Editor />
</main>

<style>
  main {
    font-family: sans-serif;
    padding: 20px;
  }
</style>

تشغيل التطبيق

تأكد من أن خادم WebSocket الخاص بك قيد التشغيل، ثم ابدأ خادم تطوير Svelte:

npm run dev

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

خاتمة

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