بناء تطبيق محادثة في الوقت الفعلي باستخدام React و Socket.IO
مقدمة
تشرح هذه المقالة كيفية إنشاء تطبيق محادثة أساسي في الوقت الفعلي. سنستخدم 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. يمكن توسيع هذا المثال ليشمل ميزات مثل مصادقة المستخدم والرسائل الخاصة وعناصر واجهة مستخدم أكثر تعقيدًا.