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

بناء تطبيق محادثة في الوقت الفعلي باستخدام React و Socket.IO

Majd Muhtaseb09‏/05‏/202512 دقيقة

مقدمة

تشرح هذه المقالة كيفية إنشاء تطبيق محادثة أساسي في الوقت الفعلي. سنستخدم React للواجهة الأمامية و Socket.IO لمعالجة الاتصال ثنائي الاتجاه في الوقت الفعلي بين العميل والخادم.

المتطلبات الأساسية

• Node.js و npm مثبتان
• فهم أساسي لـ React

إعداد الخادم (Node.js مع Socket.IO)

أولاً، قم بإنشاء تطبيق من جانب الخادم باستخدام Node.js وتثبيت التبعيات الضرورية:

mkdir chat-server
cd chat-server
npm init -y
npm install socket.io express

قم بإنشاء ملف باسم server.js وأضف الكود التالي:

const express = require('express');
const http = require('http');
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // استبدل بعنوان URL لتطبيق React الخاص بك
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  console.log('تم اتصال المستخدم:', socket.id);

  socket.on('chat message', (msg) => {
    io.emit('chat message', { message: msg, id: socket.id });
  });

  socket.on('disconnect', () => {
    console.log('تم قطع اتصال المستخدم:', socket.id);
  });
});

const port = 4000; // مثال للمنفذ
server.listen(port, () => {
  console.log(`الخادم يستمع على المنفذ ${port}`);
});

تشغيل الخادم:

node server.js

بناء عميل React

قم بإنشاء تطبيق React جديد:

npx create-react-app chat-client
cd chat-client
npm install socket.io-client

استبدل محتويات src/App.js بما يلي:

import React, { useState, useEffect, useRef } from 'react';
import io from 'socket.io-client';
import './App.css';

const socket = io('http://localhost:4000'); // استبدل بعنوان URL للخادم الخاص بك

function App() {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const messagesEndRef = useRef(null);


  useEffect(() => {
    socket.on('chat message', (msg) => {
      setMessages(prevMessages => [...prevMessages, msg]);
    });

    return () => {
      socket.off('chat message');
    };
  }, []);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages]);

  const sendMessage = (e) => {
    e.preventDefault();
    if (newMessage) {
      socket.emit('chat message', newMessage);
      setNewMessage('');
    }
  };

  return (
    <div className="App">
      <h1>محادثة في الوقت الفعلي</h1>
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index}>
            <strong>المستخدم {msg.id}:</strong> {msg.message}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      <form onSubmit={sendMessage}>
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder="اكتب رسالتك..."
        />
        <button type="submit">إرسال</button>
      </form>
    </div>
  );
}

export default App;

أضف بعض الأنماط الأساسية إلى src/App.css:

.App {
  text-align: center;
}

.messages {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}

ابدأ تشغيل تطبيق React:

npm start

خاتمة

لقد قمت الآن ببناء تطبيق محادثة بسيط في الوقت الفعلي باستخدام React و Socket.IO. يمكن توسيع هذا المثال ليشمل ميزات مثل مصادقة المستخدم والرسائل الخاصة وعناصر واجهة مستخدم أكثر تعقيدًا.