إنشاء تطبيق دردشة في الوقت الفعلي مع تسجيل الدخول باستخدام Node.js و MongoDB

في هذا الدليل، سنقوم بإنشاء تطبيق دردشة (Chat Application) في الوقت الفعلي مع دعم تسجيل الدخول باستخدام Node.js، Socket.IO، و MongoDB. سيتعلم المستخدم كيفية بناء خادم Node.js، إعداد قاعدة بيانات MongoDB لتخزين بيانات المستخدمين، وتوفير اتصال في الوقت الفعلي باستخدام Socket.IO. هذا المشروع يتطلب استخدام تقنيات متقدمة، بما في ذلك إدارة الجلسات والمصادقة (Authentication).

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

• Node.js مثبت على جهازك.
• MongoDB مثبت أو استخدام MongoDB Atlas.
• محرر نصوص مثل Visual Studio Code أو Sublime Text.
• معرفة أساسية بـ JavaScript، Node.js، وMongoDB.

الخطوة 1: إعداد المشروع باستخدام Node.js و Express

1. قم بإنشاء مجلد جديد للمشروع، وانتقل إليه:

mkdir real-time-chat-auth <br> cd real-time-chat-auth

1. قم بتهيئة المشروع باستخدام npm:

npm init -y

1. قم بتثبيت الحزم الضرورية:

npm install express socket.io mongoose bcrypt jsonwebtoken cors

1. أنشئ ملفًا جديدًا باسم <server.js> في المجلد الجذر للمشروع، وأضف الكود التالي:

const express = require('express');
const http = require('http');
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const PORT = 4000;

app.use(express.json());
app.use(cors());

// الاتصال بقاعدة بيانات MongoDB
mongoose.connect('mongodb://localhost:27017/chat-app', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}).then(() => console.log('MongoDB connected'))
.catch((err) => console.log(err));

// إعداد نموذج مستخدم (User Schema)
const UserSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

const User = mongoose.model('User', UserSchema);

// تسجيل مستخدم جديد
app.post('/register', async (req, res) => {
  const { username, password } = req.body;
  try {
    const hashedPassword = await bcrypt.hash(password, 10);
    const newUser = new User({ username, password: hashedPassword });
    await newUser.save();
    res.status(201).json({ message: 'User registered successfully' });
  } catch (err) {
    res.status(500).json({ error: 'User registration failed' });
  }
});

// تسجيل دخول مستخدم
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  try {
    const user = await User.findOne({ username });
    if (!user) return res.status(400).json({ error: 'User not found' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ error: 'Incorrect password' });

    const token = jwt.sign({ userId: user._id }, 'secret', { expiresIn: '1h' });
    res.json({ token });
  } catch (err) {
    res.status(500).json({ error: 'Login failed' });
  }
});

// Middleware للتحقق من مصادقة المستخدم
const authMiddleware = (req, res, next) => {
  const token = req.headers['authorization'];
  if (!token) return res.status(401).json({ error: 'Access denied' });

  try {
    const verified = jwt.verify(token, 'secret');
    req.userId = verified.userId;
    next();
  } catch (err) {
    res.status(400).json({ error: 'Invalid token' });
  }
};

// التعامل مع الاتصال من خلال Socket.IO
io.on('connection', (socket) => {
  console.log('User connected');

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

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

// تشغيل الخادم
server.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
  

الخطوة 2: إعداد واجهة المستخدم

1. أنشئ مجلدًا جديدًا داخل المشروع باسم <client>، وقم بإعداد مشروع React.js داخله:

npx create-react-app client <br> cd client

1. افتح الملف <src/App.js>، وقم بإزالة محتواه، ثم أضف الكود التالي لإنشاء واجهة تسجيل الدخول والدردشة:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import axios from 'axios';

const socket = io('http://localhost:4000');

function App() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState('');

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

  const sendMessage = () => {
    socket.emit('chat message', message);
    setMessage('');
  };

  const register = async () => {
    try {
      await axios.post('http://localhost:4000/register', { username, password });
      alert('User registered successfully');
    } catch (err) {
      console.error('Registration failed', err);
    }
  };

  const login = async () => {
    try {
      const response = await axios.post('http://localhost:4000/login', { username, password });
      setToken(response.data.token);
      alert('User logged in successfully');
    } catch (err) {
      console.error('Login failed', err);
    }
  };

  return (
    <div className="App">
      <h1>Real-Time Chat Application with Authentication</h1>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={register}>Register</button>
      <button onClick={login}>Login</button>

      <div>
        <h2>Chat Room</h2>
        <input
          type="text"
          placeholder="Enter message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button onClick={sendMessage}>Send</button>
        <ul>
          {messages.map((msg, index) => (
            <li key={index}>{msg}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;
  

الخطوة 3: تشغيل التطبيق واختباره

1. في المجلد الجذر للمشروع، شغّل خادم Node.js:

node server.js

1. انتقل إلى مجلد <client> وشغّل واجهة React:

cd client <br> npm start

1. افتح المتصفح وانتقل إلى <http://localhost:3000/> لتسجيل مستخدم جديد، تسجيل الدخول، وبدء الدردشة مع المستخدمين الآخرين.

خاتمة

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

إذا كانت لديك أي أسئلة أو ترغب في تحسين هذا التطبيق، فلا تتردد في ترك تعليق في الأسفل، وشارك هذا المقال إذا وجدته مفيدًا!