استخدام تقنية WebSocket مع Node.js و Socket.io

لديك نظام يستخدم تقنية Ajax مع MySQL لتحديث البيانات بدون إعادة تحميل الصفحة، ولكن تواجه مشكلة فيما يتعلق بإظهار التحديثات لكل مستخدمي موقعك بشكل فوري. لتحقيق هذا، يمكنك استخدام تقنية مثل WebSocket التي تسمح بإنشاء اتصال دائم بين المتصفح والخادم لتحديث البيانات بشكل فوري.

عند استخدام WebSocket، يمكنك تحديث قاعدة البيانات على الخادم ومن ثم إرسال تحديثات إلى جميع المتصفحات المتصلة بالوقت الفعلي. هذا يتيح لك عرض التحديثات بشكل متزامن لجميع المستخدمين بدون حاجة لإعادة تحميل الصفحة.

لتنفيذ هذا، يمكنك استخدام مكتبة مثل Socket.io في جانب الخادم (Node.js) والجانب العميل (المتصفح) لإنشاء اتصال WebSocket بسهولة. بعد ذلك، يمكنك تحديث قاعدة البيانات وإرسال التحديثات إلى جميع المتصفحات المتصلة باستخدام Socket.io.

بالتأكيد، إليك المزيد من المعلومات حول كيفية تنفيذ الاتصال الفوري بين المتصفح والخادم باستخدام تقنية WebSocket:

1. الخادم (Node.js):

   • يمكنك استخدام مكتبة Socket.io في Node.js لإنشاء خادم WebSocket بسهولة. يمكنك تثبيتها باستخدام npm:

     luaCopy code
     npm install socket.io
     

   • بعد ذلك، يمكنك استخدام الكود التالي لإنشاء خادم WebSocket:

     javascriptCopy code
     const http = require('http');
     const server = http.createServer((req, res) => {
         // يتم تجاهل أي طلبات HTTP هنا
     });
     
     const io = require('socket.io')(server);
     io.on('connection', (socket) => {
         console.log('A user connected');
         socket.on('disconnect', () => {
             console.log('User disconnected');
         });
     });
     
     server.listen(3000, () => {
         console.log('Server running on port 3000');
     });
     

2. الجانب العميل (المتصفح):

   • يمكنك استخدام نفس مكتبة Socket.io في الجانب العميل. يمكنك تضمينها في صفحة HTML الخاصة بك كما يلي:

     htmlCopy code
     <script src="/socket.io/socket.io.js">script>
     <script>
         var socket = io();
         socket.on('connect', function () {
             console.log('Connected to server');
         });
         socket.on('disconnect', function () {
             console.log('Disconnected from server');
         });
     script>
     

3. تحديث قاعدة البيانات وإرسال التحديثات:

   • عند تحديث قاعدة البيانات على الخادم، يمكنك استخدام Socket.io لإرسال التحديثات إلى جميع المتصفحات المتصلة. على سبيل المثال:

     javascriptCopy code
     // في كود الخادم
     io.on('connection', (socket) => {
         socket.on('update', () => {
             // قم بتحديث قاعدة البيانات
             // إرسال التحديثات إلى جميع المتصفحات المتصلة
             io.emit('dataUpdated', newData);
         });
     });
     
     // في الجانب العميل
     socket.on('dataUpdated', function (newData) {
         // قم بتحديث عرض البيانات في الصفحة
     });
     

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