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

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

Majd Muhtaseb13‏/05‏/202512 دقيقة

مقدمة

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

إعداد مشروع Svelte

أولاً، قم بتهيئة مشروع Svelte جديد باستخدام طريقتك المفضلة (على سبيل المثال، degit sveltejs/template my-editor).

الواجهة الأمامية (Svelte)

إليك مكون App.svelte مبسط:

<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} rows="20" cols="60"></textarea>

شرح:

• onMount: يؤسس اتصال WebSocket عند تحميل المكون.
• socket.onmessage: يقوم بتحديث متغير text كلما تم تلقي رسالة من الخادم.
• handleInput: يرسل محتوى النص الحالي إلى الخادم كلما تغير محتوى منطقة النص.
• bind:value: ربط ثنائي الاتجاه بين متغير text ومنطقة النص.

الواجهة الخلفية (Node.js مع WebSocket)

إليك خادم Node.js WebSocket بسيط (باستخدام مكتبة ws):

const WebSocket = require('ws');

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

let connectedClients = new Set();

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

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

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

console.log('بدأ خادم WebSocket على المنفذ 8080');

شرح:

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

لتثبيت مكتبة ws، قم بتشغيل: npm install ws. احفظ هذا باسم server.js وقم بتشغيله باستخدام node server.js.

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

1. ابدأ خادم Node.js WebSocket (node server.js).
2. قم بتشغيل خادم تطوير Svelte (npm run dev في مشروع Svelte).
3. افتح نوافذ متصفح متعددة تشير إلى عنوان URL لتطبيق Svelte الخاص بك.
4. أثناء الكتابة في إحدى النوافذ، سيتم تحديث النص في النوافذ الأخرى في الوقت الفعلي.

خاتمة

هذا مثال أساسي، لكنه يوضح المبادئ الأساسية لبناء محرر نصوص تعاوني فوري باستخدام Svelte و WebSocket. يمكنك توسيع هذا المثال عن طريق إضافة ميزات مثل مصادقة المستخدم وتنسيق النصوص الغنية ووظيفة التراجع / الإعادة.