ساخت یک برنامه چت بلادرنگ با استفاده از MERN stack و Socket.IO

برنامه‌های چت بلادرنگ این روزها به طور فزاینده‌ای محبوب می‌شوند و ساختن یکی با استفاده از پشته MERN و Socket.IO یک راه عالی برای یادگیری نحوه ایجاد برنامه‌های بلادرنگ است. در این پست وبلاگ، روند ساخت یک برنامه چت بلادرنگ را از ابتدا مرور خواهیم کرد.

معرفی
Socket.IO یک کتابخانه جاوا اسکریپت است که ارتباط بلادرنگ، دو طرفه و مبتنی بر رویداد را بین مرورگر و سرور امکان پذیر می کند. روی هر پلتفرم، مرورگر یا دستگاهی کار می‌کند و به طور یکسان روی قابلیت اطمینان و سرعت تمرکز دارد. پشته MERN یک چارچوب جاوا اسکریپت فول پشته محبوب است که MongoDB، Express.js، React.js و Node.js را ترکیب می کند. در این آموزش، ما از پشته MERN و Socket.IO برای ساختن یک برنامه چت بلادرنگ استفاده خواهیم کرد.

راه اندازی Backend
اولین گام در ساخت برنامه چت بلادرنگ ما، راه اندازی backend است. ما از Node.js و Express.js برای ایجاد RESTful API و MongoDB خود به عنوان پایگاه داده خود استفاده خواهیم کرد. در اینجا مراحل راه اندازی Backend آمده است:

1. Node.js و MongoDB را روی رایانه خود نصب کنید.
2. یک پوشه جدید برای پروژه خود ایجاد کنید و در ترمینال خود به آن بروید.
3. npm init را اجرا کنید تا یک فایل package.json جدید برای پروژه خود ایجاد کنید.
4. با اجرای npm install express mongoose socket.io cors dotenv وابستگی های لازم را نصب کنید.
5. یک فایل index.js جدید ایجاد کنید و شروع به ساختن Backend خود کنید. در فایل index.js، سرور خود را ایجاد می کنیم و با استفاده از Mongoose به پایگاه داده MongoDB خود متصل می شویم. ما همچنین مسیرهای API RESTful خود را برای ایجاد و واکشی پیام ها تنظیم می کنیم. در اینجا یک مثال است:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');
const socketio = require('socket.io');

const app = express();
const server = require('http').Server(app);
const io = socketio(server);

dotenv.config();
const port = process.env.PORT || 5000;

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
const connection = mongoose.connection;
connection.once('open', () => {
  console.log('MongoDB connection established successfully');
});

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

// API Routes
const messagesRouter = require('./routes/messages');
app.use('/messages', messagesRouter);

// Start server
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Socket.IO
io.on('connection', (socket) => {
  console.log(`Socket ${socket.id} connected`);

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

  socket.on('disconnect', () => {
    console.log(`Socket ${socket.id} disconnected`);
  });
});

ایجاد پیشانی
اکنون که Backend خود را راه‌اندازی کرده‌ایم، می‌توانیم به ایجاد فرانت‌اند ادامه دهیم. ما از React.js برای frontend و Socket.IO استفاده خواهیم کرد تا ارتباط بلادرنگ بین مشتری و سرور را فعال کنیم. در اینجا مراحل ایجاد فرانت اند وجود دارد:

1. با اجرای npx create-react-app my-app در ترمینال خود، یک برنامه React جدید ایجاد کنید.
2. با اجرای cd my-app به فهرست برنامه جدید ایجاد شده بروید.
3. با اجرای npm install socket.io-client وابستگی های لازم را نصب کنید.
4. فایل src/App.js را باز کنید و شروع به ساخت ظاهر خود کنید. در فایل App.js، فرمی برای کاربران ایجاد می کنیم تا نام و پیام خود را وارد کنند. همچنین لیست پیام های دریافتی از سرور را به صورت بلادرنگ نمایش خواهیم داد. در اینجا یک مثال است:

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

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

function App() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

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

  const handleSubmit = (event) => {
    event.preventDefault();
    if (name && message) {
      socket.emit('sendMessage', { name, message });
      setName('');
      setMessage('');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={name} placeholder="Your name" onChange={(event) => setName(event.target.value)} />
        <input type="text" value={message} placeholder="Your message" onChange={(event) => setMessage(event.target.value)} />
        <button type="submit">Send</button>
      </form>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>
            {message.name}: {message.message}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

نتیجه
در این پست وبلاگ، روند ساخت یک برنامه چت بلادرنگ با استفاده از پشته MERN و Socket.IO را طی کردیم. ما با تنظیم Backend با Node.js، Express.js، MongoDB و Socket.IO شروع کردیم. سپس، ما frontend را با React.js و Socket.IO ایجاد کردیم. با دنبال کردن این آموزش، باید درک بهتری از نحوه ساخت برنامه های بلادرنگ با استفاده از پشته MERN و Socket.IO داشته باشید.

حمایت کوچک راه درازی دارد!