Node.js WebSockets

நிகழ்நேர, இரு-திசை தொடர்பு பயன்பாடுகளை உருவாக்க கற்றுக்கொள்ளுங்கள்

WebSockets அறிமுகம்

WebSockets கிளையன்ட் மற்றும் சேவையகத்திற்கு இடையே ஒரு நிலையான இணைப்பை வழங்குகின்றன, இது நிகழ்நேர, இரு-திசை தொடர்புக்கு அனுமதிக்கிறது.

இது கோரிக்கை-பதில் மாதிரியைப் பின்பற்றும் பாரம்பரிய HTTP இலிருந்து வேறுபட்டது.

WebSockets இன் முக்கிய நன்மைகள்

நிகழ்நேர புதுப்பிப்புகள்

கிளையன்ட்களுக்கு உடனடியாக தரவைத் தள்ளவும்

திறமையானது

மீண்டும் மீண்டும் HTTP கோரிக்கைகள் தேவையில்லை

இரு-திசை

கிளையன்ட் மற்றும் சேவையகம் இரண்டும் செய்திகளை அனுப்ப முடியும்

குறைந்த தாமதம்

செய்திகள் உடனடியாக அனுப்பப்படும்

WebSockets vs HTTP

நிகழ்நேர பயன்பாடுகளை திறம்பட உருவாக்க WebSockets மற்றும் HTTP இடையே உள்ள வித்தியாசத்தைப் புரிந்துகொள்வது முக்கியமானது.

அம்சம் WebSockets HTTP
இணைப்பு நிலையான, ஒற்றை இணைப்பு கோரிக்கைக்கு புதிய இணைப்பு
தொடர்பு இரு-திசை, முழு-இரட்டை ஒற்றை-திசை, கோரிக்கை-பதில்
மேல்நிலை கைக்குலுக்கலுக்குப் பிறகு குறைந்தது ஒவ்வொரு கோரிக்கையிலும் தலைப்புகள்
பயன்பாட்டு நிகழ்வு நிகழ்நேர பயன்பாடுகள் பாரம்பரிய வலைப்பக்கங்கள், APIகள்
எடுத்துக்காட்டு அரட்டை பயன்பாடுகள், நேரடி ஊட்டங்கள் வலைப்பக்கங்களை ஏற்றுதல், படிவ சமர்ப்பிப்புகள்

💡 தொழில்நுட்ப குறிப்பு:

WebSockets ஒரு HTTP கைக்குலுக்கலுடன் (நிலை குறியீடு 101) தொடங்குகின்றன, பின்னர் WebSocket நெறிமுறைக்கு (ws:// அல்லது wss://) மேம்படுத்தப்படுகின்றன.

WebSockets ஐ அமைத்தல்

1. ws தொகுதியை நிறுவவும்

முதலில், உங்கள் திட்டத்திற்கான ஒரு புதிய கோப்புறையை உருவாக்கி அதைத் தொடக்கவும்:

mkdir websocket-demo
cd websocket-demo
npm init -y

பின்னர், ws தொகுப்பை நிறுவவும்:

npm install ws

📝 குறிப்பு:

ws தொகுதி ஒரு எளிய, வேகமான மற்றும் முழுமையாக சோதிக்கப்பட்ட WebSocket கிளையன்ட் மற்றும் சேவையக செயலாக்கமாகும்.

WebSocket சேவையகத்தை உருவாக்குதல்

அது பெறும் எந்த செய்தியையும் எதிரொலிக்கும் ஒரு எளிய WebSocket சேவையகத்தை உருவாக்குவோம்.

server.js என்ற புதிய கோப்பை உருவாக்கவும்:

const WebSocket = require('ws');

// போர்ட் 8080 இல் ஒரு WebSocket சேவையகத்தை உருவாக்கவும்
const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket server is running on ws://localhost:8080');

// இணைப்பு நிகழ்வு கையாளுதல்
wss.on('connection', (ws) => {
  console.log('New client connected');
  
  // கிளையன்டுக்கு ஒரு வரவேற்பு செய்தியை அனுப்பவும்
  ws.send('Welcome to the WebSocket server!');

  // செய்தி நிகழ்வு கையாளுதல்
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // செய்தியை கிளையன்டுக்கு எதிரொலிக்கவும்
    ws.send(`Server received: ${message}`);
  });

  // மூடு நிகழ்வு கையாளுதல்
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

குறியீட்டைப் புரிந்துகொள்வது

முயற்சிக்கவும்

  1. மேலே உள்ள குறியீட்டை server.js ஆக சேமிக்கவும்
  2. சேவையகத்தை இயக்கவும்: node server.js
  3. சேவையகம் தொடங்கி ws://localhost:8080 இல் கேட்கும்

WebSocket கிளையன்டை உருவாக்குதல்

இப்போது எங்களிடம் ஒரு WebSocket சேவையகம் உள்ளது, அதனுடன் இணைய கிளையன்ட்களை உருவாக்குவோம். நாங்கள் ஒரு Node.js கிளையன்ட் மற்றும் ஒரு உலாவி கிளையன்ட் இரண்டையும் உருவாக்குவோம்.

1. Node.js கிளையன்ட்

client.js என்ற புதிய கோப்பை உருவாக்கவும்:

const WebSocket = require('ws');
const readline = require('readline');

// பயனர் உள்ளீட்டிற்கான readline இடைமுகத்தை உருவாக்கவும்
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// WebSocket சேவையகத்துடன் இணையவும்
const ws = new WebSocket('ws://localhost:8080');

// இணைப்பு திறக்கப்பட்டது
ws.on('open', () => {
  console.log('Connected to the WebSocket server');
  promptForMessage();
});

// சேவையகத்திலிருந்து செய்திகளைக் கேட்கவும்
ws.on('message', (message) => {
  console.log(`Server: ${message}`);
});

// பிழைகளைக் கையாளவும்
ws.on('error', (error) => {
  console.error('WebSocket error:', error);
});

// இணைப்பு மூடுவதைக் கையாளவும்
ws.on('close', () => {
  console.log('Disconnected from the server');
  process.exit(0);
});

// பயனருக்கு செய்திகளைக் கேட்கும் செயல்பாடு
function promptForMessage() {
  rl.question('Enter a message (or "exit" to quit): ', (message) => {
    if (message.toLowerCase() === 'exit') {
      ws.close();
      rl.close();
      return;
    }
    ws.send(message);
    promptForMessage();
  });
}

Node.js கிளையன்டைப் பயன்படுத்துவது எப்படி

  1. மேலே உள்ள குறியீட்டை client.js ஆக சேமிக்கவும்
  2. WebSocket சேவையகம் இயங்குகிறது என்பதை உறுதிப்படுத்தவும்
  3. கிளையன்டை இயக்கவும்: node client.js
  4. செய்திகளைத் தட்டச்சு செய்து Enter ஐ அழுத்தவும்
  5. வெளியேற "exit" ஐ தட்டச்சு செய்யவும்

2. உலாவி கிளையன்ட்

எங்கள் WebSocket சேவையகத்துடன் இணைய ஒரு எளிய HTML பக்கத்தை JavaScript உடன் உருவாக்குவோம்.

index.html என்ற கோப்பை உருவாக்கவும்:

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Client</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    #messages {
      height: 300px;
      border: 1px solid #ccc;
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 10px;
    }
    .message { margin: 5px 0; }
  </style>
</head>
<body>
  <h1>WebSocket Client</h1>
  <div id="status">Connecting to server...</div>
  <div id="messages"></div>
  <div>
    <input type="text" id="messageInput" placeholder="Type your message">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script>
    const status = document.getElementById('status');
    const messages = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');

    // WebSocket சேவையகத்துடன் இணையவும்
    const ws = new WebSocket('ws://localhost:8080');

    // இணைப்பு திறக்கப்பட்டது
    ws.onopen = () => {
      status.textContent = 'Connected to server';
      status.style.color = 'green';
    };

    // செய்திகளைக் கேட்கவும்
    ws.onmessage = (event) => {
      const message = document.createElement('div');
      message.className = 'message';
      message.textContent = event.data;
      messages.appendChild(message);
      messages.scrollTop = messages.scrollHeight;
    };

    // பிழைகளைக் கையாளவும்
    ws.onerror = (error) => {
      status.textContent = 'Error: ' + error.message;
      status.style.color = 'red';
    };

    // இணைப்பு மூடுவதைக் கையாளவும்
    ws.onclose = () => {
      status.textContent = 'Disconnected from server';
      status.style.color = 'red';
    };

    // செய்தியை அனுப்பும் செயல்பாடு
    function sendMessage() {
      const message = messageInput.value.trim();
      if (message) {
        ws.send(message);
        messageInput.value = '';
      }
    }

    // Enter விசையில் செய்தியை அனுப்பவும்
    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
  </script>
</body>
</html>

உலாவி கிளையன்டைப் பயன்படுத்துவது எப்படி

  1. மேலே உள்ள குறியீட்டை index.html ஆக சேமிக்கவும்
  2. WebSocket சேவையகம் இயங்குகிறது என்பதை உறுதிப்படுத்தவும்
  3. ஒரு வலை உலாவியில் HTML கோப்பைத் திறக்கவும்
  4. உள்ளீட்டுப் புலத்தில் செய்திகளைத் தட்டச்சு செய்து Send ஐக் கிளிக் செய்யவும் அல்லது Enter ஐ அழுத்தவும்

⚠️ குறிப்பு:

உலாவி கிளையன்ட் வேலை செய்வதற்கு, உலாவி பாதுகாப்பு கட்டுப்பாடுகள் காரணமாக நீங்கள் HTML கோப்பை ஒரு வலை சேவையகம் (http-server அல்லது live-server போன்றவை) மூலம் வழங்க வேண்டும்.

பயன்பாட்டை சோதித்தல்

  1. WebSocket சேவையகத்தைத் தொடங்கவும்: node server.js
  2. கிளையன்ட் HTML பக்கத்துடன் பல உலாவி சாளரங்களைத் திறக்கவும்
  3. வெவ்வேறு கிளையன்ட்களிலிருந்து செய்திகளை அனுப்பி அவை நிகழ்நேரத்தில் தோன்றுவதைக் காணவும்
  4. உலாவி கிளையன்ட்களுடன் Node.js கிளையன்டையும் இயக்கலாம்

செயலாக்கத்தைப் புரிந்துகொள்வது

WebSocket நிகழ்வுகள்

WebSockets ஒரு நிகழ்வு-இயக்கப்பட்ட மாதிரியைப் பயன்படுத்துகின்றன. முக்கிய நிகழ்வுகள் இங்கே:

நிகழ்வு விளக்கம்
connection (சேவையகம்) ஒரு கிளையன்ட் சேவையகத்துடன் இணையும் போது தீக்கொழுந்து விடப்படுகிறது
open (கிளையன்ட்) இணைப்பு நிறுவப்பட்டால் தீக்கொழுந்து விடப்படுகிறது
message ஒரு செய்தி பெறப்பட்டால் தீக்கொழுந்து விடப்படுகிறது
error ஒரு பிழை ஏற்பட்டால் தீக்கொழுந்து விடப்படுகிறது
close இணைப்பு மூடப்பட்டால் தீக்கொழுந்து விடப்படுகிறது

நிஜ உலக பயன்பாடுகள்

WebSockets பல்வேறு நிஜ உலக பயன்பாடுகளில் பயன்படுத்தப்படுகின்றன:

அரட்டை பயன்பாடுகள்

உடனடி செய்தி விநியோகம்

நேரடி டாஷ்போர்டுகள்

அளவீடுகள் மற்றும் தரவின் நிகழ்நேர புதுப்பிப்புகள்

கூட்டு கருவிகள்

பல பயனர்கள் ஒரே ஆவணத்தைத் திருத்துகிறார்கள்

கேமிங்

விரைவான தொடர்புகள் தேவைப்படும் பல வீரர் ஆன்லைன் விளையாட்டுகள்

நிதி தளங்கள்

நிகழ்நேர பங்கு டிக்கர்கள் மற்றும் வர்த்தக தளங்கள்

IoT பயன்பாடுகள்

இணைக்கப்பட்ட சாதனங்களை கண்காணித்தல் மற்றும் கட்டுப்படுத்துதல்

மேம்பட்ட WebSocket அம்சங்கள்

1. பைனரி தரவு பரிமாற்றம்

WebSockets பைனரி தரவை அனுப்புவதை ஆதரிக்கின்றன, இது சில வகையான தரவுகளுக்கு மிகவும் திறமையானது:

// பைனரி தரவை அனுப்புதல் (சேவையக-சைடு)
const buffer = Buffer.from([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // 'Hello' in binary
ws.send(buffer, { binary: true });

// பைனரி தரவைப் பெறுதல் (கிளையன்ட்-சைடு)
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Received binary data:', view);
  }
};

2. இதயத் துடிப்புகள் மற்றும் இணைப்பு கண்காணிப்பு

துண்டிப்புகளைக் கண்டறிந்து கையாள இதயத் துடிப்புகளைச் செயல்படுத்தவும்:

// சேவையக-சைடு இதயத் துடிப்பு
function setupHeartbeat(ws) {
  ws.isAlive = true;
  ws.on('pong', () => { ws.isAlive = true; });
}

// ஒவ்வொரு 30 வினாடிகளுக்கும் அனைத்து கிளையன்ட்களுக்கும் பிங் செய்யவும்
const interval = setInterval(() => {
  wss.clients.forEach((ws) => {
    if (ws.isAlive === false) return ws.terminate();
    ws.isAlive = false;
    ws.ping();
  });
}, 30000);

// சேவையக மூடும் போது சுத்தம் செய்யவும்
wss.on('close', () => {
  clearInterval(interval);
});

பாதுகாப்பு பரிசீலனைகள்

1. அங்கீகாரம்

எப்போதும் WebSocket இணைப்புகளை அங்கீகரிக்கவும்:

const http = require('http');
const WebSocket = require('ws');
const jwt = require('jsonwebtoken');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

// அங்கீகாரத்துடன் மேம்படுத்தலைக் கையாளவும்
server.on('upgrade', (request, socket, head) => {
  try {
    const token = request.url.split('token=')[1];
    if (!token) throw new Error('No token provided');
    
    // JWT டோக்கனை சரிபார்க்கவும்
    jwt.verify(token, 'your-secret-key', (err, decoded) => {
      if (err) {
        socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
        socket.destroy();
        return;
      }
      
      // WebSocket கைக்குலுக்கலுடன் தொடரவும்
      wss.handleUpgrade(request, socket, head, (ws) => {
        ws.user = decoded; // WebSocket க்கு பயனர் தரவை இணைக்கவும்
        wss.emit('connection', ws, request);
      });
    });
  } catch (error) {
    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
    socket.destroy();
  }
});

2. விகித வரம்பு

தவறாகப் பயன்படுத்துவதைத் தடுக்க விகித வரம்புடன்:

const rateLimit = require('ws-rate-limit');

// இணைப்புக்கு நிமிடத்திற்கு 100 செய்திகள் வரம்பு
const limiter = rateLimit({
  windowMs: 60 * 1000, // 1 நிமிடம்
  max: 100,
  message: 'Too many messages, please slow down!',
});

wss.on('connection', (ws) => {
  limiter(ws);
  // ... உங்கள் இணைப்பு கையாளியின் மீதமுள்ளவை
});

3. உள்ளீட்டு சரிபார்ப்பு

உள்வரும் செய்திகளை எப்போதும் சரிபார்க்கவும்:

const Joi = require('joi');

const messageSchema = Joi.object({
  type: Joi.string().valid('chat', 'join', 'leave').required(),
  username: Joi.string().alphanum().min(3).max(30),
  message: Joi.string().max(1000),
  room: Joi.string().alphanum().max(50),
});

ws.on('message', (data) => {
  try {
    const message = JSON.parse(data);
    const { error, value } = messageSchema.validate(message);
    if (error) {
      throw new Error(`Invalid message: ${error.details[0].message}`);
    }
    // செல்லுபடியாகும் செய்தியை செயலாக்கவும்...
  } catch (err) {
    ws.send(JSON.stringify({ error: err.message }));
  }
});

செயல்திறன் மேம்படுத்தல்

சுருக்கம்

பட்டைஅகல பயன்பாட்டைக் குறைக்க செய்திக்கு-செய்தி deflate ஐ இயக்கவும்:

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: {
    zlibDeflateOptions: {
      chunkSize: 1024,
      memLevel: 7,
      level: 3
    },
    zlibInflateOptions: {
      chunkSize: 10 * 1024
    },
    // பிற விருப்பங்கள்
    clientNoContextTakeover: true,
    serverNoContextTakeover: true,
    concurrencyLimit: 10,
  }
});

🚀 சிறந்த நடைமுறை:

உற்பத்தி பயன்பாடுகளுக்கு, WebSockets ஐ ஆதரிக்காத உலாவிகளுக்கான பின்வாங்கல்கள் போன்ற கூடுதல் அம்சங்களை வழங்கும் Socket.IO போன்ற நூலகங்களைப் பயன்படுத்தக் கவனியுங்கள்.

பயிற்சி

❓ WebSockets கிளையன்ட் மற்றும் சேவையகத்திற்கு இடையே ஒரு ______ இணைப்பை வழங்குகின்றன.

தற்காலிக
✗ தவறு! WebSockets ஒரு நிலையான இணைப்பை வழங்குகின்றன, தற்காலிக இணைப்பு அல்ல
கோரிக்கை-பதில்
✗ தவறு! WebSockets ஒரு நிலையான இணைப்பை வழங்குகின்றன, கோரிக்கை-பதில் மாதிரி அல்ல
நிலையான
✓ சரி! WebSockets கிளையன்ட் மற்றும் சேவையகத்திற்கு இடையே ஒரு நிலையான, நீடித்த இணைப்பை வழங்குகின்றன, இது நிகழ்நேர தொடர்புக்கு அனுமதிக்கிறது
மறைக்கப்பட்ட
✗ தவறு! WebSockets ஒரு நிலையான இணைப்பை வழங்குகின்றன, ஆனால் அது மறைக்கப்பட்டதல்ல