کار با WebSocket در Node.js با استفاده از تایپ اسکریپت

WebSocketها ارتباط دوطرفه کامل بین سرور و کلاینت را امکان‌پذیر می‌کنند و آن‌ها را برای ساخت برنامه‌های real-time به یک انتخاب ایده‌آل تبدیل می‌نماید. در این مقاله قصد داریم تا فرآیند گام به گام برای راه‌اندازی یک سرور WebSocket با استفاده از Node.js و تایپ اسکریپت را باهم بررسی کنیم.

WebSocket چیست؟

قبل از اینکه به جزئیات بپردازیم، در این بخش بررسی می‌کنیم که WebSocket چیست و برای چه منظوری مورد استفاده قرار می‌گیرد. برخلاف درخواست‌های سنتی HTTP که بدون state هستند، WebSocketها ارتباط دو طرفه بین کلاینت‌ها و سرورها را از طریق یک اتصال باز واحد امکان‌پذیر می‌سازند. این موضوع امکان به‌روزرسانی‌های real-time و push notificationها را بدون نیاز به نظرسنجی مداوم از سرور فراهم می‌کند.

در ادامه مقاله مراحل گام به گام راه‌اندازی یک سرور WebSocket را بررسی خواهیم کرد.

گام اول راه‌اندازی پروژه

ابتدا، یک دایرکتوری جدید برای پروژه خود ایجاد کرده و یک پروژه Node.js جدید را مقداردهی می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
mkdir websocket-ts
cd websocket-ts
npm init -y
mkdir websocket-ts cd websocket-ts npm init -y
mkdir websocket-ts
cd websocket-ts
npm init -y

اکنون تایپ اسکریپت را نصب و پیکربندی می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install typescript --save-dev
npx tsc --init
npm install typescript --save-dev npx tsc --init
npm install typescript --save-dev
npx tsc --init

با اجرای دستور بالا یک فایل

tsconfig.json
tsconfig.json در پروژه ساخته می‌شود. ما می‌توانیم گزینه‌های کامپایلر را بر اساس نیاز خود تنظیم نماییم، اما در این مقاله از مقادیر پیش‌فرض استفاده می‌کنیم.

گام دوم – نصب پکیج‌های مورد نیاز

ما از کتابخانه

ws برای مدیریت اتصالات WebSocket استفاده خواهیم کرد. برای نصب و تعاریف تایپ آن، دستور زیر را اجرا می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install ws
npm install @types/ws --save-dev
npm install ws npm install @types/ws --save-dev
npm install ws
npm install @types/ws --save-dev

گام سوم ساخت سرور WebSocket

یک فایل جدید به نام

server.ts
server.ts می‌سازیم و کد زیر را در آن قرار می‌دهیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import WebSocket, { Server } from 'ws';
import http from 'http';
const PORT = 8080;
// Create an HTTP server
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('WebSocket server running');
});
// Create a WebSocket server by passing the HTTP server instance to ws
const wss = new Server({ server });
console.log(`WebSocket server started on port ${PORT}`);
import WebSocket, { Server } from 'ws'; import http from 'http'; const PORT = 8080; // Create an HTTP server const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('WebSocket server running'); }); // Create a WebSocket server by passing the HTTP server instance to ws const wss = new Server({ server }); console.log(`WebSocket server started on port ${PORT}`);
import WebSocket, { Server } from 'ws';
import http from 'http';

const PORT = 8080;

// Create an HTTP server
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('WebSocket server running');
});

// Create a WebSocket server by passing the HTTP server instance to ws
const wss = new Server({ server });

console.log(`WebSocket server started on port ${PORT}`);

گام چهارم – مدیریت اتصالات کلاینت

کد را در فایل

server.ts
server.ts extend می‌کنیم تا اتصالات، پیام‌ها و قطع ارتباط کلاینت را مدیریت کند.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wss.on('connection', (ws: WebSocket) => {
console.log('Client connected');
// Handle messages from clients
ws.on('message', (message: string) => {
console.log(`Received message: ${message}`);
});
// Handle client disconnect
ws.on('close', () => {
console.log('Client disconnected');
});
});
wss.on('connection', (ws: WebSocket) => { console.log('Client connected'); // Handle messages from clients ws.on('message', (message: string) => { console.log(`Received message: ${message}`); }); // Handle client disconnect ws.on('close', () => { console.log('Client disconnected'); }); });
wss.on('connection', (ws: WebSocket) => {
    console.log('Client connected');

    // Handle messages from clients
    ws.on('message', (message: string) => {
        console.log(`Received message: ${message}`);
    });

    // Handle client disconnect
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

گام پنجم – اجرای سرور

پس از این که گام‌های فوق را به درستی انجام دادیم، فقط باید سرور HTTP خود را راه‌اندازی نماییم. برای این کار، کد زیر را در انتهای فایل

server.ts
server.ts اضافه می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
server.listen(PORT, () => {
console.log(`HTTP server started on port ${PORT}`);
});
server.listen(PORT, () => { console.log(`HTTP server started on port ${PORT}`); });
server.listen(PORT, () => {
    console.log(`HTTP server started on port ${PORT}`);
});

برای اجرای سرور WebSocket خود، کد تایپ اسکریپت را کامپایل کرده و سپس سرور را راه‌اندازی می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx tsc server.ts
node server.js
npx tsc server.ts node server.js
npx tsc server.ts
node server.js

اکنون سرور WebSocket ما باید در آدرس

http://localhost:8080/
http://localhost:8080/ اجرا شود. کلاینت‌ها می‌توانند به آن متصل شوند و شروع به ارسال و دریافت پیام‌های real-time نمایند.

دیدگاه‌ها:

افزودن دیدگاه جدید