كيفية إنشاء تطبيق دردشة في الوقت الفعلي باستخدام WebSockets وSocket.IO
كيفية إنشاء تطبيق دردشة في الوقت الفعلي باستخدام WebSockets
تطبيقات الدردشة في الوقت الفعلي أصبحت جزءًا أساسيًا من العديد من المنصات والتطبيقات الحديثة. في هذا الدليل، سوف نتعلم كيفية إنشاء تطبيق دردشة في الوقت الفعلي باستخدام WebSockets. سنستخدم Node.js وExpress.js بالإضافة إلى مكتبة Socket.IO لتسهيل عملية الاتصال بين الخادم والعميل.
ما هو WebSocket؟
WebSocket هو بروتوكول اتصال يوفر قناة اتصال ثنائية الاتجاه بين العميل والخادم. يتيح هذا الاتصال إرسال البيانات واستقبالها بشكل فوري ودون الحاجة إلى إعادة تحميل الصفحة أو إنشاء طلبات HTTP جديدة. يعتبر WebSocket مفيدًا بشكل خاص لتطبيقات الوقت الفعلي مثل الدردشة أو الألعاب.
المتطلبات الأساسية
- معرفة أساسية بـ JavaScript
- Node.js مثبت على جهازك
- محرر نصوص مثل Visual Studio Code
الخطوة 1: إعداد بيئة العمل
لبدء المشروع، سنقوم بإنشاء مجلد جديد يحتوي على مشروع Node.js. Node.js هي بيئة تشغيل لـ JavaScript على جانب الخادم، وتتيح لنا إنشاء تطبيقات كاملة بلغة JavaScript.
mkdir real-time-chat
cd real-time-chat
npm init -y
npm install express socket.ioالأمر npm init -y يقوم بتهيئة مشروع Node.js جديد، و npm install express socket.io يقوم بتثبيت مكتبة Express.js لإنشاء الخادم، وSocket.IO للتعامل مع WebSockets.
الخطوة 2: إعداد الخادم باستخدام Express وSocket.IO
الآن سنقوم بكتابة كود الخادم الخاص بنا. Express.js هو إطار عمل خفيف يستخدم لبناء تطبيقات الويب على Node.js، بينما Socket.IO هو مكتبة JavaScript تتيح لنا استخدام WebSockets بسهولة.
const express = require('express'); // استخدام مكتبة Express لإنشاء الخادم
const http = require('http'); // لإنشاء خادم HTTP
const socketIo = require('socket.io'); // مكتبة Socket.IO للتعامل مع WebSockets
const app = express(); // إنشاء تطبيق Express
const server = http.createServer(app); // إنشاء خادم HTTP
const io = socketIo(server); // ربط Socket.IO بالخادم
app.get('/', (req, res) => { // إعداد مسار GET لعرض واجهة المستخدم
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => { // رصد اتصال جديد
console.log('مستخدم متصل');
socket.on('chat message', (msg) => { // رصد الرسائل المرسلة من العميل
io.emit('chat message', msg); // إرسال الرسالة لجميع المستخدمين
});
socket.on('disconnect', () => { // رصد انقطاع الاتصال
console.log('مستخدم قطع الاتصال');
});
});
server.listen(3000, () => { // جعل الخادم يستمع على المنفذ 3000
console.log('الاستماع على المنفذ 3000');
});في هذا الجزء، نستخدم مكتبة Socket.IO لرصد الاتصال بين الخادم والعميل. عند اتصال مستخدم جديد، نقوم بعرض رسالة في وحدة التحكم. وعندما يتم إرسال رسالة عبر التطبيق، يتم إرسالها إلى جميع المستخدمين المتصلين في الوقت الفعلي.
الخطوة 3: إنشاء واجهة المستخدم
سنقوم الآن بإنشاء واجهة مستخدم بسيطة لتطبيق الدردشة باستخدام HTML وJavaScript. هذه الواجهة تتكون من قائمة للرسائل وحقل إدخال لإرسال الرسائل.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق دردشة في الوقت الفعلي</title>
</head>
<body>
<ul id="messages"></ul> <!-- قائمة لعرض الرسائل -->
<form id="form" action="">
<input id="input" autocomplete="off" /><button>إرسال</button> <!-- حقل إدخال لإرسال الرسائل -->
</form>
<script src="/socket.io/socket.io.js"></script> <!-- تضمين مكتبة Socket.IO -->
<script>
var socket = io(); <!-- إنشاء اتصال مع الخادم -->
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault(); // منع إعادة تحميل الصفحة عند إرسال الرسالة
if (input.value) {
socket.emit('chat message', input.value); // إرسال الرسالة إلى الخادم
input.value = ''; // إعادة تعيين حقل الإدخال بعد الإرسال
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li'); // إنشاء عنصر جديد في قائمة الرسائل
item.textContent = msg; // عرض الرسالة المستلمة
document.getElementById('messages').appendChild(item); // إضافة الرسالة للقائمة
});
</script>
</body>
</html>في هذا الكود، نقوم باستخدام Socket.IO على واجهة العميل لإنشاء اتصال مع الخادم. عند إرسال رسالة من خلال نموذج الدردشة، يتم إرسالها إلى الخادم والذي يقوم بإعادة بثها إلى جميع المستخدمين المتصلين.
الخطوة 4: تشغيل التطبيق
بعد الانتهاء من كتابة الأكواد، يمكنك تشغيل تطبيق الدردشة عن طريق تشغيل الخادم باستخدام الأمر التالي:
node server.jsبعد ذلك، قم بفتح متصفح الويب وانتقل إلى http://localhost:3000 حيث ستظهر واجهة تطبيق الدردشة.
الخاتمة
في هذا الدليل، تعلمنا كيفية إنشاء تطبيق دردشة في الوقت الفعلي باستخدام WebSockets وSocket.IO. هذا التطبيق يعتبر أساسًا يمكن توسيعه ليشمل ميزات إضافية مثل تسجيل المستخدمين، تخزين الرسائل في قاعدة بيانات، أو حتى تشفير المحادثات.
اترك تعليقاً