بناء محرر نصوص تعاوني فوري باستخدام Svelte و WebSocket
مقدمة
توضح هذه المقالة كيفية إنشاء محرر نصوص تعاوني فوري أساسي باستخدام 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
.
تشغيل التطبيق
- ابدأ خادم Node.js WebSocket (
node server.js
). - قم بتشغيل خادم تطوير Svelte (
npm run dev
في مشروع Svelte). - افتح نوافذ متصفح متعددة تشير إلى عنوان URL لتطبيق Svelte الخاص بك.
- أثناء الكتابة في إحدى النوافذ، سيتم تحديث النص في النوافذ الأخرى في الوقت الفعلي.
خاتمة
هذا مثال أساسي، لكنه يوضح المبادئ الأساسية لبناء محرر نصوص تعاوني فوري باستخدام Svelte و WebSocket. يمكنك توسيع هذا المثال عن طريق إضافة ميزات مثل مصادقة المستخدم وتنسيق النصوص الغنية ووظيفة التراجع / الإعادة.