شرح استخدام Socket.io في مشروع Nodejs لبناء مشروع chat

جدول التنقل

كيف تبني تطبيق دردشة فوري باستخدام Socket.IO وNode.js
مميزات استخدام Socket.io:
شرح استخدام Socket.io في NodeJS:
تثبيت socket.io
إنشاء خادم NodeJS
إنشاء ملف html لتجربة ال stream مع Socketio
1. Head Section
2. Body Section
كود html لعمل تتبع لحالة الكتابة بواسطة Socket Io
إرسال إشعار بدء الكتابة:
استقبال إشعار بدء كتابة من مستخدم آخر:
إرسال إشعار إيقاف الكتابة:
استقبال إشعار إيقاف كتابة من مستخدم آخر:
استخدام Socket بدون ادراج ملف html بداخلها

خطوات بناء تطبيق دردشة حيوي باستخدام Node.js

كيف تبني تطبيق دردشة فوري باستخدام Socket.IO وNode.js

Socket.io هي مكتبة JavaScript تُستخدم لبناء تطبيقات ويب تفاعلية في الوقت الفعلي. تُتيح هذه المكتبة للعملاء والخوادم التواصل مع بعضهم البعض بشكل مباشر، مما يسمح بإنشاء تطبيقات ويب ديناميكية تُحدث نفسها تلقائيًا دون الحاجة إلى إعادة تحميل الصفحة.

المقبس.io: مكتبة جافا سكريبت تسمح بالاتصال ثنائي الاتجاه بين خوادم Node.js وعملاء الويب. يوفر Switch.io طريقة بسيطة للاتصال الفوري بين الخوادم والعملاء، مما يسمح بتطبيقات الويب الديناميكية والتفاعلية في الوقت الفعلي.

مميزات استخدام Socket.io:

تواصل في الوقت الفعلي:تُتيح Socket.io للعملاء والخوادم التواصل مع بعضهم البعض بشكل مباشر دون الحاجة إلى إعادة تحميل الصفحة.
سهولة الاستخدام:تُقدم Socket.io واجهة برمجة تطبيقات بسيطة وسهلة الاستخدام.
قابلية التوسع: تُمكن Socket.io من بناء تطبيقات ويب قابلة للتوسع يمكنها التعامل مع عدد كبير من المستخدمين.
دعم مختلف اللغات: تدعم Socket.io مختلف لغات البرمجة، بما في ذلك NodeJS و Python و Java.

شرح استخدام Socket.io في NodeJS:

تثبيت socket.io

npm i socket.io

إنشاء خادم NodeJS

const { join } = require('path');
const http = require('http');
const express = require('express');
const app = express();

const { Server } = require('socket.io');
const server = http.createServer(app);
const io = new Server(server);


app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
  console.log('someone connected!');

  socket.on('message', (msg) => {
    console.log('message :' + msg);

    // إرسال الرسالة إلى جميع العملاء المتصلين باستثناء المرسل
    // socket.broadcast.emit('send_to_all_users', msg);
    
    // إرسال الرسالة إلى جميع العملاء المتصلين حتى المرسل
    io.emit('send_to_all_users', msg);

  });
});

server.listen(3000, (() => {
  console.log("server is running");
}));

إنشاء ملف html لتجربة ال stream مع Socketio

هذا الملف هو صفحة HTML تستخدم لتشغيل تطبيق محادثة بسيط باستخدام Socket.io. دعنا نتفحص كل قسم من أقسام الملف:

1. Head Section

meta viewport: يحدد هذا العلام عرض الصفحة لتتناسب مع عرض الجهاز المستخدم.

title: يضبط عنوان الصفحة ليظهر "Socket.IO chat".

style: يحتوي هذا القسم على أوامر CSS لتنسيق عناصر الصفحة مثل:

تنسيق الجسم الرئيسي (body)

تنسيق نموذج الإرسال (form)

تنسيق حقل إدخال الرسالة (input)

تنسيق زر الإرسال (button)

تنسيق قائمة الرسائل (messages)

2. Body Section

#messages: قائمة غير مرتبة (ul) لعرض سجل الرسائل.

#form: نموذج إرسال الرسالة، يتضمن:

حقل إدخال النص (input) لإدخال الرسالة.

زر الإرسال (button) لإرسال الرسالة.

script src: يضيف مكتبة Socket.io إلى الصفحة.

script: كود JavaScript الذي يتفاعل مع مكتبة Socket.io:

const socket = io();: يقوم بإنشاء اتصال مع خادم Socket.io.

form, input, messages: يحدد عناصر الصفحة HTML التي سيتم استخدامها.

form.addEventListener('submit', ...): يضيف مستمع للأحداث عند الضغط على زر الإرسال، يقوم بمنع إعادة تحميل الصفحة افتراضيا (e.preventDefault()) ويرسل الرسالة إلى الخادم باستخدام socket.emit('message', input.value).

socket.on('send_to_all_users', ...): يستمع للأحداث الواردة من الخادم باسم "send_to_all_users"، يقوم بإنشاء عنصر قائمة جديد (li)، يضع المحتوى المستلم (msg) فيه، ويضيفه إلى قائمة الرسائل، ثم يقوم بالتمرير إلى أسفل القائمة تلقائيا.

<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>

</head>

<body>
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
    
      const socket = io();
    
      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');
    
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
          socket.emit('message', input.value);
          input.value = '';
        }
      });
    
      socket.on('send_to_all_users', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg; // Use data instead of msg
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });

    </script>
    </script>

</body>
</html>

معرفة اذا كان الطرف الاخر يكتب ام لا باستخدام Socket io مع nodejs

معالجة حالة الكتابة:

socket.on('typing', () => {...}):

يستمع هذا الحدث لإشعارات بدء الكتابة من العميل.

عند بدء كتابة العميل، يتم إرسال حدث "show_typing" إلى جميع العملاء المتصلين باستثناء المرسل.

socket.on('stop_typing', () => {...}):

يستمع هذا الحدث لإشعارات إيقاف الكتابة من العميل.

عند إيقاف كتابة العميل، يتم إرسال حدث "clear_typing" إلى جميع العملاء المتصلين باستثناء المرسل.

io.on('connection', (socket) => {
  console.log('someone connected!');

  socket.on('message', (msg) => {
    console.log('message :' + msg);

    // إرسال الرسالة إلى جميع العملاء المتصلين باستثناء المرسل
    // socket.broadcast.emit('send_to_all_users', msg);
    
    // إرسال الرسالة إلى جميع العملاء المتصلين حتى المرسل
    io.emit('send_to_all_users', msg);

  });

  socket.on('typing',()=>{
    socket.broadcast.emit('show_typing');
  });

  socket.on('stop_typing',()=>{
    socket.broadcast.emit('clear_typing');
  });

});

كود html لعمل تتبع لحالة الكتابة بواسطة Socket Io

إرسال إشعار بدء الكتابة:

input.addEventListener('keydown', () => {...}):

يستمع هذا المستمع للأحداث عند الضغط على أي مفتاح على حقل إدخال الرسالة (input).

عند الضغط على مفتاح، يتم إرسال حدث "typing" إلى الخادم باستخدام socket.emit('typing').

استقبال إشعار بدء كتابة من مستخدم آخر:

socket.on('show_typing', () => {...}):

يستمع هذا المستمع للأحداث الواردة من الخادم باسم "show_typing".

عند استلام هذا الحدث، يتم تعديل محتوى الفقرة typingState إلى النص "Someone is Typing..." لإعلام المستخدم بأن مستخدمًا آخر يكتب.

إرسال إشعار إيقاف الكتابة:

input.addEventListener('keyup', () => {...}):

يستمع هذا المستمع للأحداث عند تحرير حقل إدخال الرسالة (إطلاق أي مفتاح).

عند تحرير الحقل، يتم إرسال حدث "stop_typing" إلى الخادم باستخدام socket.emit('stop_typing').

استقبال إشعار إيقاف كتابة من مستخدم آخر:

socket.on('clear_typing', () => {...}):

يستمع هذا المستمع للأحداث الواردة من الخادم باسم "clear_typing".

عند استلام هذا الحدث، يتم استخدام setTimeout لتأخير تحديث محتوى الفقرة typingState إلى فارغة لمدة 2 ثانية.

<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Socket.IO chat</title>
    <style>
       ...
    </style>

</head>

<body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <p id="typingState" ></p>
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>


    <script src="/socket.io/socket.io.js"></script>
    <script>
    
      ...

      input.addEventListener('keydown',()=>{
        socket.emit('typing');
      });

      socket.on('show_typing',()=>{
        typingState.innerHTML = 'clinet is Typing...'      
      });

      input.addEventListener('keyup',()=>{
        socket.emit('stop_typing');
      });

      socket.on('clear_typing',()=>{
        setTimeout(()=>{
          typingState.innerHTML = '';
        },2000)
        
      });
    
    </script>
    </script>

</body>
</html>

استخدام Socket بدون ادراج ملف html بداخلها

سوف نقوم بحذف الكود التالي من الاكواد الموجوده بالاعلى في بناء الصفحه

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

ونقوم بعد ذلك بعمل تعريف لل cors وادراج الرابط

const cors = require('cors');

app.use(cors());

const io = new Server(server, {
  cors: {
    origin: "http://localhost:8080"
  }
});

والان انتقل الى ملف html

استبدل

<script src="/socket.io/socket.io.js"></script>

ب cdn الخاص بال socket.io ويمكنك ان تجده في الرابط التالي CDN Socket.Io

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>

تطبيق "Socket.io":

محادثات الدردشة: يتيح لك موقعocket.io إنشاء تطبيقات الدردشة في الوقت الفعلي.

تطبيقات التعاون: يتيح تطبيق Jack.io للمستخدمين التعاون في نفس المحتوى في الوقت الفعلي.

ألعاب الويب: يمكن استخدام Jack.io لتطوير ألعاب الويب متعددة اللاعبين.

لوحات المعلومات المباشرة: يتم استخدام المقبس.io لعرض البيانات الديناميكية على لوحات المعلومات.

Socket.io هي مكتبة JavaScript قوية وسهلة الاستخدام لبناء تطبيقات ويب تفاعلية في الوقت الفعلي.

تُقدم Socket.io العديد من المزايا، مثل سهولة الاستخدام وقابلية التوسع ودعم مختلف اللغات، مما يجعلها خيارًا مثاليًا لبناء تطبيقات ويب ديناميكية تُحدث نفسها تلقائيًا.

Socket.IO هو أداة قوية تجعل بناء تطبيقات الدردشة المباشرة أمرًا سهلاً وفعالًا. في هذه المقالة، قدمنا دليلاً خطوة بخطوة لإنشاء تطبيق دردشة بسيط باستخدام Node.js وExpress وSocket.IO. يمكنك الآن توسيع هذا المشروع وإضافة المزيد من الميزات لجعله أكثر تعقيدًا وتفاعلًا.

Socket.IO ليس فقط لأغراض الدردشة، بل يمكن استخدامه في مجموعة متنوعة من التطبيقات مثل الألعاب عبر الإنترنت، لوحة المعلومات الحية (Dashboards)، والإشعارات الفورية.

تعديل المقال

GeeCoders - جي كودرس