Socket.IO یک کتابخانه قدرتمند است که به شما امکان می‌دهد برنامه‌های بلادرنگ را با استفاده از JavaScript ایجاد کنید. این کتابخانه قابلیت‌های WebSockets را با یک سری بهبودها فراهم می‌آورد، به طوری که ارتباطات دو طرفه را بین کلاینت و سرور ممکن می‌سازد. در این مقاله از کدیتی، مراحل ساخت برنامه‌ بلادرنگ با Socket.IO را توضیح می‌دهیم.

مراحل ایجاد برنامه بلادرنگ

۱. تنظیم محیط

نصب Node.js

اولین قدم نصب Node.js است. می‌توانید آن را از وب‌سایت Node.js دانلود و نصب کنید.

ایجاد پروژه جدید

یک پوشه جدید برای پروژه ایجاد کنید و به آن وارد شوید:

mkdir my-realtime-app
cd my-realtime-app

سپس یک فایل package.json جدید ایجاد کنید:

npm init -y

۲. نصب Socket.IO

برای نصب Socket.IO، از دستور زیر استفاده کنید:

npm install socket.io

همچنین، برای ایجاد یک سرور HTTP، می‌توانید از Express استفاده کنید:

npm install express

۳. ایجاد سرور

یک فایل جدید به نام server.js ایجاد کنید و کد زیر را در آن قرار دهید:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

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

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

io.on('connection', (socket) => {
    console.log('یک کاربر جدید متصل شد');

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

    socket.on('disconnect', () => {
        console.log('یک کاربر قطع ارتباط کرد');
    });
});

const PORT = process.env.PORT || 300;
server.listen(PORT, () => {
    console.log(`سرور در حال اجرا در پورت ${PORT}`);
});

۴. ایجاد کلاینت

یک فایل HTML جدید به نام index.html ایجاد کنید و کد زیر را در آن قرار دهید:

<!doctype html>
<html>
<head>
    <title>Chat Room</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        function sendMessage() {
            const message = document.getElementById('message-input').value;
            socket.emit('chat message', message);
            document.getElementById('message-input').value = '';
            return false;
        }

        socket.on('chat message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            document.getElementById('messages').appendChild(item);
        });
    </script>
</head>
<body>
    <ul id="messages"></ul>
    <form onsubmit="return sendMessage();">
        <input id="message-input" autocomplete="off" /><button>Send</button>
    </form>
</body>
</html>

۵. اجرای سرور

برای اجرای سرور، در ترمینال دستور زیر را وارد کنید:

node server.js

۶. تست برنامه

مرورگر خود را باز کنید و به http://localhost:300 بروید. حالا می‌توانید پیام‌ها را ارسال کنید و مشاهده کنید که سایر کاربران (یا همان کلاینت‌های دیگر) پیام‌ها را دریافت می‌کنند.

نتیجه‌ گیری

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