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

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

Majd Muhtaseb23‏/06‏/202510 دقيقة

مقدمة

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

إعداد المشروع

أولاً، قم بإنشاء مشروع SvelteKit جديد:

npm create svelte@latest my-collab-editor
cd my-collab-editor
npm install

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

أنشئ مكونًا، Editor.svelte، للتعامل مع تحرير المستند:

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

  let text = '';
  let socket;

  onMount(() => {
    socket = new WebSocket('ws://localhost:3000'); // استبدل بنقطة نهاية WebSocket لوظيفتك بدون خادم

    socket.onopen = () => {
      console.log('تم الاتصال بـ WebSocket');
    };

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

    socket.onclose = () => {
      console.log('تم قطع الاتصال بـ WebSocket');
    };
  });

  function handleInput() {
    socket.send(text);
  }
</script>

<textarea bind:value={text} on:input={handleInput} />

ضع المكون Editor.svelte داخل routes/+page.svelte.

الواجهة الخلفية (وظيفة بدون خادم - مثال باستخدام Node.js)

يستخدم هذا المثال خادم WebSocket بسيط. ستحتاج إلى تكييفه مع نظامك الأساسي بدون خادم الذي اخترته.

// server.js (مثال - قم بالتكييف لبيئتك بدون خادم)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

let sharedText = '';

wss.on('connection', ws => {
  console.log('اتصل العميل');
  ws.send(sharedText); // إرسال الحالة الحالية عند الاتصال

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

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

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

هام: يتطلب تكييف هذا مع البيئات بدون خادم (وظائف Netlify أو AWS Lambda) استخدام بوابة API وخدمة إدارة WebSocket مثل AWS API Gateway مع دعم WebSocket أو حلول مماثلة تقدمها موفر الخدمة السحابية الخاص بك. يجب أن تتعامل الوظيفة بدون خادم مع اتصالات WebSocket وتوجيه الرسائل.

شرح

• الواجهة الأمامية (Svelte): يقوم المكون Editor.svelte بإنشاء اتصال WebSocket مع الوظيفة بدون خادم. كلما تغير محتوى منطقة النص (handleInput)، فإنه يرسل النص المحدث إلى الخادم. كما أنه يستمع إلى الرسائل الواردة من الخادم (socket.onmessage) ويقوم بتحديث منطقة النص وفقًا لذلك.

• الواجهة الخلفية (وظيفة بدون خادم): تستمع الوظيفة بدون خادم (في المثال المبسط أعلاه) إلى اتصالات WebSocket. عند الاتصال، فإنه يرسل النص المشترك الحالي إلى العميل الجديد. عند استلام رسالة، فإنه يقوم بتحديث sharedText ويبثها إلى جميع العملاء المتصلين باستثناء المرسل، مما يضمن أن يكون لدى الجميع أحدث نسخة.

اعتبارات

• تنفيذ حقيقي بدون خادم: رمز جانب الخادم المقدم هو لأغراض العرض التوضيحي. للحصول على تنفيذ حقيقي بدون خادم، تحتاج إلى الاستفادة من بوابة API وخدمة إدارة WebSocket لمزود الخدمة السحابية.
• قابلية التوسع: صمم بعناية بنيتك بدون خادم لتحقيق قابلية التوسع وفعالية التكلفة. ضع في اعتبارك استخدام قواعد البيانات للاحتفاظ بسجل المستندات وتوفير التحكم في الإصدار.
• حل النزاعات: لا يتعامل التنفيذ الحالي مع التعديلات المتزامنة بفعالية. يعد تنفيذ التحويل التشغيلي (OT) أو أنواع البيانات المتماثلة الخالية من النزاعات (CRDTs) أمرًا بالغ الأهمية للتحرير التعاوني القوي.
• المصادقة: أضف مصادقة لتقييد الوصول إلى المستندات.
• معالجة الأخطاء: قم بتنفيذ معالجة مناسبة للأخطاء على كل من جانبي العميل والخادم.

خاتمة

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