Node.js Socket.IO

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

Socket.IO என்றால் என்ன?

Socket.IO என்பது ஒரு சக்திவாய்ந்த JavaScript நூலகமாகும், இது வலை கிளையன்ட்கள் மற்றும் சேவையகங்களுக்கு இடையே நிகழ்நேர, இரு-திசை, மற்றும் நிகழ்வு-அடிப்படையிலான தொடர்புகளை இயக்குகிறது. இது ஒவ்வொரு தளத்திலும், உலாவியிலும் அல்லது சாதனத்திலும் வேலை செய்ய வடிவமைக்கப்பட்டுள்ளது, நம்பகத்தன்மை மற்றும் வேகம் இரண்டிலும் சமமாக கவனம் செலுத்துகிறது.

முக்கிய அம்சங்கள்

நிகழ்நேர இரு-திசை தொடர்பு

கிளையன்ட்கள் மற்றும் சேவையகங்களுக்கு இடையே உடனடி தரவு பரிமாற்றத்தை இயக்குகிறது

தானியங்கி மறுஇணைப்பு

துண்டிப்புகள் மற்றும் மறுஇணைப்புகளை தானாகவே கையாளுகிறது

அறை ஆதரவு

குழு தொடர்புக்கான சேனல்களை எளிதாக உருவாக்கவும்

பைனரி ஆதரவு

பைனரி தரவை அனுப்பவும் பெறவும் (ArrayBuffer, Blob, File, முதலியன)

பல்பணித்திறன்

பெயர்வெளிகளுடன் பல சாக்கெட்டுகளை கையாளவும்

பின்வாங்கல் விருப்பங்கள்

WebSockets கிடைக்கவில்லை என்றால் தானாக HTTP நீண்ட-கண்காணிப்புக்கு பின்வாங்குகிறது

பயன்பாட்டு நிகழ்வுகள்

நிகழ்நேர அரட்டை பயன்பாடுகள்

நேரடி அறிவிப்புகள்

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

ஆன்லைன் கேமிங்

நேரடி பகுப்பாய்வு

ஆவண கூட்டு

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

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

Socket.IO இரண்டு பகுதிகளைக் கொண்டுள்ளது:

Socket.IO ஐ நிறுவுதல்

சேவையக-சைடு நிறுவல்

npm அல்லது yarn ஐப் பயன்படுத்தி உங்கள் Node.js திட்டத்தில் Socket.IO ஐ நிறுவவும்:

# npm பயன்படுத்தி
npm install socket.io

# அல்லது Yarn பயன்படுத்தி
yarn add socket.io

கிளையன்ட்-சைடு அமைப்பு

கிளையன்ட் நூலகத்தைச் சேர்க்க பின்வரும் முறைகளில் ஒன்றைத் தேர்ந்தெடுக்கவும்:

விருப்பம் 1: CDN (விரைவு தொடக்கம்)

<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>

விருப்பம் 2: NPM (உற்பத்திக்கு பரிந்துரைக்கப்படுகிறது)

# கிளையன்ட் நூலகத்தை நிறுவவும்
npm install socket.io-client

# அல்லது Yarn பயன்படுத்தி
yarn add socket.io-client

விருப்பம் 3: ES6 தொகுதிகளைப் பயன்படுத்துதல்

import { io } from 'socket.io-client';

பதிப்பு பொருந்தக்கூடிய தன்மை

Socket.IO பதிப்பு Node.js பதிப்பு உலாவி ஆதரவு
v4.x v12.22.0+ Chrome 49+, Firefox 53+, Safari 10+
v3.x v10.0.0+ Chrome 49+, Firefox 53+, Safari 10+
v2.x v6.0.0+ Chrome 5+, Firefox 6+, Safari 5.1+

💡 குறிப்பு:

உற்பத்திக்கு, கிளையன்ட் மற்றும் சேவையகம் இரண்டிலும் ஒரே பதிப்பைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.

Socket.IO உடன் எளிய அரட்டை பயன்பாடு

Node.js மற்றும் Socket.IO ஐப் பயன்படுத்தி ஒரு எளிய நிகழ்நேர அரட்டை பயன்பாட்டை உருவாக்குவோம்.

இந்த எடுத்துக்காட்டுக்கு எந்த உள்நுழைவும் தேவையில்லை மற்றும் அடிப்படை செயல்பாட்டை நிரூபிக்கிறது.

சேவையகத்தை உருவாக்கவும் (app.js)

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

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const path = require('path');

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

// நிலையான கோப்புகளை வழங்கவும்
app.use(express.static(path.join(__dirname, 'public')));

// எளிய வழி
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Socket.IO இணைப்பு கையாளுதல்
io.on('connection', (socket) => {
  console.log('A user connected');

  // புதிய செய்திகளை கையாளவும்
  socket.on('chat message', (msg) => {
    console.log('Message received:', msg);
    // இணைக்கப்பட்ட அனைத்து கிளையன்ட்களுக்கும் செய்தியை ஒலிபரப்பவும்
    io.emit('chat message', msg);
  });

  // துண்டிப்பை கையாளவும்
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

கிளையன்டை உருவாக்கவும் (public/index.html)

ஒரு public கோப்புறையை உருவாக்கி இந்த உள்ளடக்கத்துடன் ஒரு index.html கோப்பைச் சேர்க்கவும்:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Chat</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
      margin-bottom: 20px;
      border: 1px solid #ddd;
      padding: 10px;
      height: 400px;
      overflow-y: auto;
    }
    #messages li {
      padding: 8px 16px;
      border-bottom: 1px solid #eee;
    }
    #messages li:last-child {
      border-bottom: none;
    }
    #form {
      display: flex;
      margin-top: 10px;
    }
    #input {
      flex-grow: 1;
      padding: 10px;
      font-size: 16px;
    }
    button {
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      margin-left: 10px;
    }
    button:hover {
      background: #45a049;
    }
  </style>
</head>
<body>
  <h1>Simple Chat</h1>
  <ul id="messages"></ul>
  <form id="form" action="#">
    <input id="input" autocomplete="off" placeholder="Type your message..." />
    <button>Send</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');

    // படிவ சமர்ப்பிப்பை கையாளவும்
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const message = input.value.trim();
      if (message) {
        // சேவையகத்திற்கு செய்தியை வெளியிடவும்
        socket.emit('chat message', message);
        // உள்ளீட்டை அழிக்கவும்
        input.value = '';
      }
    });

    // உள்வரும் செய்திகளைக் கேட்கவும்
    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      // கீழே உருட்டவும்
      messages.scrollTop = messages.scrollHeight;
    });
  </script>
</body>
</html>

பயன்பாட்டை இயக்கவும்

  1. சேவையகத்தைத் தொடங்கவும்: node app.js
  2. உங்கள் உலாவியைத் திறந்து http://localhost:3000 க்குச் செல்லவும்
  3. நிகழ்நேர புதுப்பிப்புகளைப் பார்க்க பல உலாவி சாளரங்களைத் திறக்கவும்

இது எவ்வாறு செயல்படுகிறது

🚀 அடுத்த படிகள்

இந்த அடிப்படை பதிப்பு வேலை செய்தவுடன், நீங்கள் சேர்க்க விரும்பலாம்:

  • ஒவ்வொரு செய்திக்கும் பயனர் பெயர்கள்
  • பயனர் சேர்தல்/வெளியேறல் அறிவிப்புகள்
  • வெவ்வேறு அரட்டை அறைகள்
  • செய்தி நிலைத்தன்மை
  • பயனர் அங்கீகாரம்

⚠️ குறிப்பு:

இது ஒரு அடிப்படை எடுத்துக்காட்டு ஆகும். ஒரு உற்பத்தி சூழலில், நீங்கள் சரியான பிழை கையாளுதல், உள்ளீட்டு சரிபார்ப்பு மற்றும் பாதுகாப்பு நடவடிக்கைகளைச் சேர்க்க விரும்புவீர்கள்.

பயனர் பெயர்களைச் சேர்த்தல்

செய்திகளில் பயனர் பெயர்களைச் சேர்ப்பதன் மூலம் எங்கள் அரட்டையை மேம்படுத்துவோம். முதலில், பயனர் பெயர்களைக் கையாள சேவையகத்தை மாற்றவும்:

// app.js இல், இணைப்பு கையாளுதலை மாற்றவும்
io.on('connection', (socket) => {
  console.log('A user connected');

  // சாக்கெட்டுடன் பயனர் பெயரை சேமிக்கவும்
  socket.username = 'Anonymous';
  
  // பயனர் பெயருடன் புதிய செய்திகளை கையாளவும்
  socket.on('chat message', (msg) => {
    io.emit('chat message', {
      username: socket.username,
      message: msg,
      timestamp: new Date().toISOString()
    });
  });
  
  // பயனர் பெயர் மாற்றத்தை கையாளவும்
  socket.on('set username', (username) => {
    const oldUsername = socket.username;
    socket.username = username || 'Anonymous';
    io.emit('user joined', {
      oldUsername: oldUsername,
      newUsername: socket.username
    });
  });

  // துண்டிப்பை கையாளவும்
  socket.on('disconnect', () => {
    console.log('A user disconnected');
    io.emit('user left', { username: socket.username });
  });
});

இப்போது, பயனர் பெயர்களைக் கையாள கிளையன்டைப் புதுப்பிக்கவும்:

<!-- அரட்டையின் மேல் பயனர் பெயர் உள்ளீட்டைச் சேர்க்கவும் -->
<div id="username-container">
    <input type="text" id="username-input" placeholder="Enter your username" />
    <button id="set-username">Set Username</button>
</div>

<script>
    // பயனர் பெயர் கையாளுதலைச் சேர்க்கவும்
    const usernameInput = document.getElementById('username-input');
    const setUsernameBtn = document.getElementById('set-username');
    let currentUsername = 'Anonymous';

    setUsernameBtn.addEventListener('click', () => {
        const newUsername = usernameInput.value.trim();
        if (newUsername) {
            socket.emit('set username', newUsername);
            currentUsername = newUsername;
            usernameInput.value = '';
        }
    });

    // பயனர் பெயர்களைக் காட்ட செய்தி காட்சியைப் புதுப்பிக்கவும்
    socket.on('chat message', (data) => {
        const item = document.createElement('li');
        item.innerHTML = `<strong>${data.username}:</strong> ${data.message}`;
        messages.appendChild(item);
        messages.scrollTop = messages.scrollHeight;
    });

    // பயனர் சேர்தல் அறிவிப்புகளை கையாளவும்
    socket.on('user joined', (data) => {
        const item = document.createElement('li');
        item.className = 'system-message';
        if (data.oldUsername === 'Anonymous') {
            item.textContent = `${data.newUsername} has joined the chat`;
        } else {
            item.textContent = `${data.oldUsername} is now known as ${data.newUsername}`;
        }
        messages.appendChild(item);
        messages.scrollTop = messages.scrollHeight;
    });

    // பயனர் வெளியேறல் அறிவிப்புகளை கையாளவும்
    socket.on('user left', (data) => {
        const item = document.createElement('li');
        item.className = 'system-message';
        item.textContent = `${data.username} has left the chat`;
        messages.appendChild(item);
        messages.scrollTop = messages.scrollHeight;
    });
</script>

<style>
.system-message {
    color: #666;
    font-style: italic;
    font-size: 0.9em;
}
</style>

அரட்டை அறைகளைச் சேர்த்தல்

வெவ்வேறு அரட்டை அறைகளை உருவாக்கவும் சேரவும் திறனைச் சேர்ப்போம். முதலில், சேவையகத்தைப் புதுப்பிக்கவும்:

// app.js இல், அறை கையாளுதலைச் சேர்க்கவும்
const rooms = new Set(['general', 'random']);

io.on('connection', (socket) => {
  // ... இருக்கும் குறியீடு ...

  // ஒரு அறையில் சேருங்கள்
  socket.on('join room', (room) => {
    // இயல்புநிலை ஒன்றைத் தவிர அனைத்து அறைகளையும் விட்டு வெளியேறவும்
    socket.rooms.forEach(r => {
      if (r !== socket.id) {
        socket.leave(r);
        socket.emit('left room', r);
      }
    });

    // புதிய அறையில் சேருங்கள்
    socket.join(room);
    socket.emit('joined room', room);

    // அறையில் உள்ள மற்றவர்களுக்கு அறிவிக்கவும்
    socket.to(room).emit('room message', {
      username: 'System',
      message: `${socket.username} has joined the room`,
      timestamp: new Date().toISOString()
    });
  });

  // அறை உருவாக்கத்தை கையாளவும்
  socket.on('create room', (roomName) => {
    if (!rooms.has(roomName)) {
      rooms.add(roomName);
      io.emit('room created', roomName);
    }
  });

  // அறைக்கு அனுப்ப செய்தி கையாளுதலை மாற்றவும்
  socket.on('chat message', (data) => {
    const room = Array.from(socket.rooms).find(r => r !== socket.id) || 'general';
    io.to(room).emit('chat message', {
      username: socket.username,
      message: data.message,
      timestamp: new Date().toISOString(),
      room: room
    });
  });
});

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

<div id="chat-container">
    <div id="sidebar">
        <h3>Rooms</h3>
        <ul id="room-list">
            <li class="room active" data-room="general">General</li>
            <li class="room" data-room="random">Random</li>
        </ul>
        <div id="create-room">
            <input type="text" id="new-room" placeholder="New room name" />
            <button id="create-room-btn">Create Room</button>
        </div>
    </div>
    <div id="chat-area">
        <div id="messages"></div>
        <form id="form">
            <input id="input" autocomplete="off" />
            <button>Send</button>
        </form>
    </div>
</div>

<script>
    // அறை கையாளுதல்
    const roomList = document.getElementById('room-list');
    const newRoomInput = document.getElementById('new-room');
    const createRoomBtn = document.getElementById('create-room-btn');
    let currentRoom = 'general';

    // பட்டியலில் அறையைக் கிளிக் செய்யும் போது அறையில் சேருங்கள்
    roomList.addEventListener('click', (e) => {
        if (e.target.classList.contains('room')) {
            const room = e.target.dataset.room;
            socket.emit('join room', room);
            currentRoom = room;
            document.querySelectorAll('.room').forEach(r => r.classList.remove('active'));
            e.target.classList.add('active');
        }
    });

    // புதிய அறையை உருவாக்கவும்
    createRoomBtn.addEventListener('click', () => {
        const roomName = newRoomInput.value.trim();
        if (roomName && !document.querySelector(`[data-room="${roomName}"]`)) {
            socket.emit('create room', roomName);
            newRoomInput.value = '';
        }
    });

    // புதிய அறை உருவாக்கத்தை கையாளவும்
    socket.on('room created', (roomName) => {
        const roomItem = document.createElement('li');
        roomItem.className = 'room';
        roomItem.dataset.room = roomName;
        roomItem.textContent = roomName;
        roomList.appendChild(roomItem);
    });

    // அறை சேர்தல் உறுதிப்பாட்டை கையாளவும்
    socket.on('joined room', (room) => {
        const item = document.createElement('li');
        item.className = 'system-message';
        item.textContent = `You joined ${room}`;
        messages.appendChild(item);
        currentRoom = room;
        messages.scrollTop = messages.scrollHeight;
    });

    // அறை செய்திகளை கையாளவும்
    socket.on('room message', (data) => {
        const item = document.createElement('li');
        item.className = 'system-message';
        item.textContent = data.message;
        messages.appendChild(item);
        messages.scrollTop = messages.scrollHeight;
    });
</script>

<style>
#chat-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

#sidebar {
    width: 250px;
    padding: 20px;
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
}

#chat-area {
    flex: 1;
    padding: 20px;
}

.room {
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    margin: 4px 0;
}

.room:hover {
    background-color: #e9e9e9;
}

.room.active {
    background-color: #4CAF50;
    color: white;
}

#create-room {
    margin-top: 20px;
}

#new-room {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
}

#create-room-btn {
    width: 100%;
    padding: 8px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#create-room-btn:hover {
    background-color: #45a049;
}
</style>

பயனர் பட்டியல் மற்றும் தட்டச்சு குறிகாட்டிகளைச் சேர்த்தல்

பயனர் பட்டியல் மற்றும் தட்டச்சு குறிகாட்டிகளுடன் எங்கள் அரட்டையை மேம்படுத்துவோம். முதலில், பயனர்களைக் கண்காணிக்கவும் மற்றும் தட்டச்சு நிலையைக் கண்காணிக்க சேவையகத்தைப் புதுப்பிக்கவும்:

// app.js இல், பயனர்கள் மற்றும் தட்டச்சு நிலையைக் கண்காணிக்கவும்
const usersInRooms = new Map();
const typingUsers = new Map();

io.on('connection', (socket) => {
   // ... இருக்கும் குறியீடு ...

   // பயனர் தரவைத் தொடங்கவும்
   socket.on('join room', (room) => {
     // ... இருக்கும் அறை சேர்தல் குறியீடு ...

     // அறைக்கான பயனர் தரவைத் தொடங்கவும்
     if (!usersInRooms.has(room)) {
         usersInRooms.set(room, new Map());
         typingUsers.set(room, new Set());
     }

     // அறையில் பயனரைச் சேர்க்கவும்
     usersInRooms.get(room).set(socket.id, {
         username: socket.username,
         id: socket.id
     });
    
     // அறைக்கு புதுப்பிக்கப்பட்ட பயனர் பட்டியலை அனுப்பவும்
     updateUserList(room);
   });

   // தட்டச்சு நிலையை கையாளவும்
   socket.on('typing', (isTyping) => {
     const room = Array.from(socket.rooms).find(r => r !== socket.id);
     if (!room) return;
    
     if (isTyping) {
         typingUsers.get(room).add(socket.username);
     } else {
         typingUsers.get(room).delete(socket.username);
     }
    
     // தட்டச்சு செய்யும் பயனர்களைப் பற்றி அறையை அறிவிக்கவும்
     io.to(room).emit('typing users', Array.from(typingUsers.get(room)));
   });

   // துண்டிப்பை கையாளவும்
   socket.on('disconnect', () => {
     // அனைத்து அறைகளிலிருந்தும் அகற்றவும்
     Array.from(usersInRooms.entries()).forEach(([room, users]) => {
         if (users.has(socket.id)) {
            users.delete(socket.id);
            typingUsers.get(room)?.delete(socket.username);
            updateUserList(room);
         }
     });
   });

   // ஒரு அறைக்கான பயனர் பட்டியலைப் புதுப்பிக்க உதவும் செயல்பாடு
   function updateUserList(room) {
     const users = Array.from(usersInRooms.get(room)?.values() || []);
     io.to(room).emit('user list', {
         room: room,
         users: users.map(u => ({
            username: u.username,
            isTyping: typingUsers.get(room)?.has(u.username) || false
         }))
     });
   }
});

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

<div id="chat-container">
  <div id="sidebar">
    <h3>Rooms</h3>
    <ul id="room-list">
     <!-- அறை பட்டியல் இங்கே நிரப்பப்படும் -->
    </ul>
    <div id="create-room">
     <input type="text" id="new-room" placeholder="New room name" />
     <button id="create-room-btn">Create Room</button>
    </div>
    <h3>Users in Room</h3>
    <ul id="user-list">
     <!-- பயனர் பட்டியல் இங்கே நிரப்பப்படும் -->
    </ul>
  </div>
  <div id="chat-area">
    <div id="typing-indicator"></div>
    <div id="messages"></div>
    <form id="form">
     <input id="input" autocomplete="off" placeholder="Type a message..." />
     <button>Send</button>
    </form>
  </div>
</div>

<script>
   // ... இருக்கும் குறியீடு ...

   const userList = document.getElementById('user-list');
   const typingIndicator = document.getElementById('typing-indicator');
   const messageInput = document.getElementById('input');
   let typingTimeout;

   // தட்டச்சு நிகழ்வுகளை கையாளவும்
   messageInput.addEventListener('input', () => {
     // பயனர் தட்டச்சு செய்கிறார்
     if (!typingTimeout) {
         socket.emit('typing', true);
     }
    
     // முந்தைய நேரக்கட்டத்தை அழிக்கவும்
     clearTimeout(typingTimeout);
    
     // பயனர் தட்டச்சு நிறுத்தியதைக் குறிக்க ஒரு நேரக்கட்டத்தை அமைக்கவும்
     typingTimeout = setTimeout(() => {
         socket.emit('typing', false);
         typingTimeout = null;
     }, 1000);
   });

   // படிவ சமர்ப்பிப்பை கையாளவும்
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     if (messageInput.value.trim()) {
         socket.emit('chat message', {
            message: messageInput.value,
            room: currentRoom
         });
         messageInput.value = '';
        
         // தட்டச்சு நிலையை அழிக்கவும்
         if (typingTimeout) {
            clearTimeout(typingTimeout);
            typingTimeout = null;
            socket.emit('typing', false);
         }
     }
   });

   // பயனர் பட்டியலைப் புதுப்பிக்கவும்
   socket.on('user list', (data) => {
     if (data.room === currentRoom) {
         userList.innerHTML = '';
         data.users.forEach(user => {
            const userItem = document.createElement('li');
            userItem.textContent = user.username;
            if (user.isTyping) {
               userItem.innerHTML += ' <span class="typing">typing...</span>';
            }
            userList.appendChild(userItem);
         });
     }
   });

   // தட்டச்சு குறிகாட்டியைப் புதுப்பிக்கவும்
   socket.on('typing users', (usernames) => {
     const typingUsers = usernames.filter(u => u !== currentUsername);
     if (typingUsers.length > 0) {
         typingIndicator.textContent = `${typingUsers.join(', ')} ${typingUsers.length > 1 ? 'are' : 'is'} typing...`;
         typingIndicator.style.display = 'block';
     } else {
         typingIndicator.style.display = 'none';
     }
   });
</script>

<style>
   /* இருக்கும் பாணிகளில் சேர்க்கவும் */
   #typing-indicator {
         color: #666;
         font-style: italic;
         font-size: 0.9em;
         padding: 5px 10px;
         display: none;
   }

   .typing {
         color: #666;
         font-size: 0.8em;
         font-style: italic;
   }

   #user-list {
         list-style: none;
         padding: 0;
         margin: 10px 0;
   }

   #user-list li {
         padding: 5px 10px;
         border-radius: 3px;
         margin: 2px 0;
   }

   #user-list li:hover {
         background-color: #f0f0f0;
   }
</style>

கிளையன்ட்-சைடு API கண்ணோட்டம்

கிளையன்ட்-சைடு Socket.IO API பின்வரும் முறைகளை வழங்குகிறது:

io() - சேவையகத்துடன் இணைகிறது
socket.emit() - சேவையகத்திற்கு ஒரு நிகழ்வை அனுப்புகிறது
socket.on() - சேவையகத்திலிருந்து நிகழ்வுகளைக் கேட்கிறது
socket.disconnect() - சேவையகத்திலிருந்து துண்டிக்கிறது

Socket.IO நிகழ்வுகள்

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

உள்ளமைக்கப்பட்ட நிகழ்வுகள்

நிகழ்வு விளக்கம்
connect இணைப்பின் போது தீக்கொழுந்து விடப்படுகிறது
disconnect துண்டிப்பின் போது தீக்கொழுந்து விடப்படுகிறது
error ஒரு பிழையின் போது தீக்கொழுந்து விடப்படுகிறது
reconnect வெற்றிகரமான மறுஇணைப்பின் போது தீக்கொழுந்து விடப்படுகிறது
reconnect_attempt மறுஇணைப்பு முயற்சியின் போது தீக்கொழுந்து விடப்படுகிறது

Socket.IO Middleware

Socket.IO அங்கீகாரம் மற்றும் பிற நோக்கங்களுக்கான middleware செயல்பாடுகளை வரையறுக்க உங்களை அனுமதிக்கிறது:

const io = new Server(server);

// அங்கீகாரத்திற்கான middleware
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  
  if (!token) {
    return next(new Error('Authentication error: Token missing'));
  }
  
  // டோக்கனை சரிபார்க்கவும் (JWT உடன் எடுத்துக்காட்டு)
  try {
    const user = jwt.verify(token, 'your-secret-key');
    socket.user = user;
    next();
  } catch (error) {
    next(new Error('Authentication error: Invalid token'));
  }
});

io.on('connection', (socket) => {
  console.log(`Authenticated user connected: ${socket.user.username}`);
});

Socket.IO vs நேட்டிவ் WebSockets

அம்சம் Socket.IO நேட்டிவ் WebSockets
பின்வாங்கல் வழிமுறைகள் ஆம் (HTTP நீண்ட-கண்காணிப்பு, முதலியன) இல்லை
தானியங்கி மறுஇணைப்பு ஆம் இல்லை (செயல்படுத்த வேண்டும்)
ஒலிபரப்பு உள்ளமைக்கப்பட்டது கையேடு செயலாக்கம்
அறைகள்/பெயர்வெளிகள் உள்ளமைக்கப்பட்டது கையேடு செயலாக்கம்
உலாவி ஆதரவு அனைத்து உலாவிகளும் நவீன உலாவிகள் மட்டும்
பாக்கெட் அளவு பெரியது (நெறிமுறை மேல்நிலை) சிறியது
பைனரி தரவு ஆதரிக்கப்படுகிறது ஆதரிக்கப்படுகிறது

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

பயிற்சி

❓ Socket.IO கிளையன்ட்கள் மற்றும் சேவையகத்திற்கு இடையே ______ தொடர்புகளை இயக்குகிறது.

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