Socket.IO কি?
Socket.IO JavaScript , , -, - . , , .
মূল বৈশিষ্ট্য
রিয়েল-টাইম দ্বিমুখী যোগাযোগ
ক্লায়েন্ট এবং সার্ভারের মধ্যে তাত্ক্ষণিক ডেটা স্থানান্তর সক্ষম করে
স্বয়ংক্রিয় পুনঃসংযোগ
স্বয়ংক্রিয়ভাবে সংযোগ বিচ্ছিন্ন এবং পুনঃসংযোগ পরিচালনা করে
রুম সমর্থন
টিম যোগাযোগের জন্য সহজেই চ্যানেল তৈরি করুন
বাইনারি সমর্থন
বাইনারি ডেটা পাঠান এবং গ্রহণ করুন (অ্যারেবাফার, ব্লব, ফাইল, ইত্যাদি)
মাল্টিটাস্কিং
নামস্থান সহ একাধিক সকেট পরিচালনা করুন
প্রত্যাহারের বিকল্প
WebSockets উপলব্ধ না হলে স্বয়ংক্রিয়ভাবে HTTP লং-ট্র্যাকিং-এ ফিরে আসে
কেস ব্যবহার করুন
রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন
লাইভ বিজ্ঞপ্তি
যৌগিক সরঞ্জাম
অনলাইন গেমিং
সরাসরি বিশ্লেষণ
ডকুমেন্ট গ্রুপিং
রিয়েল-টাইম ড্যাশবোর্ড
আইওটি অ্যাপ্লিকেশন
Socket.IO :
- একটি ক্লায়েন্ট-সাইড লাইব্রেরি যা ব্রাউজারে চলে
- Node.js -
Socket.IO ইনস্টল করা হচ্ছে
সার্ভার-সাইড ইনস্টলেশন
npm বা সুতা ব্যবহার করে আপনার Node.js প্রকল্পে Socket.IO ইনস্টল করুন:
# npm ব্যবহার করে npm install socket.io # বা সুতা ব্যবহার করে সুতা যোগ করুন 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 # বা সুতা ব্যবহার করে সুতা যোগ করুন 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 = প্রয়োজন('http'); const { সার্ভার } = প্রয়োজন('socket.io'); const path = require('path'); const app = express(); const server = http.createServer(app); const io = নতুন সার্ভার(সার্ভার); // স্ট্যাটিক ফাইল ফেরত দিন app.use(express.static(path.join(__dirname, 'public'))); // সহজ উপায় app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'index.html')); }); // Socket.IO সংযোগ হ্যান্ডলিং io.on('সংযোগ', (সকেট) => { console.log('একজন ব্যবহারকারী সংযুক্ত'); // নতুন বার্তা পরিচালনা করুন socket.on('চ্যাট মেসেজ', (msg) => { console.log('বার্তা গৃহীত:', বার্তা); // সমস্ত সংযুক্ত ক্লায়েন্টদের কাছে বার্তাটি সম্প্রচার করুন io.emit('চ্যাট মেসেজ', বার্তা); }); // সংযোগ বিচ্ছিন্ন হ্যান্ডেল socket.on('সংযোগ বিচ্ছিন্ন', () => { console.log('একজন ব্যবহারকারী সংযোগ বিচ্ছিন্ন'); }); }); const PORT = process.env.PORT || 3000; server.listen(PORT, () => { console.log(`${PORT}` পোর্টে চলছে সার্ভার); });ক্লায়েন্ট তৈরি করুন (public/index.html)
একটি সর্বজনীন ফোল্ডার তৈরি করুন এবং এই সামগ্রীর সাথে একটি index.html ফাইল যোগ করুন:
<!DOCTYPE html> <html> <মাথা> <title>সাধারণ চ্যাট</title> <স্টাইল> শরীর { মার্জিন: 0; প্যাডিং: 20px; font-family: Arial, sans-serif; } #বার্তা { list-style-type: none; মার্জিন: 0; প্যাডিং: 0; মার্জিন-নিচ: 20px; সীমানা: 1px কঠিন #ddd; প্যাডিং: 10px; উচ্চতা: 400px; overflow-y: স্বয়ংক্রিয়; } #বার্তা li { প্যাডিং: 8px x 16px; বর্ডার-নিচ: 1px কঠিন #eee; } #বার্তা li:last-child { বর্ডার-নিচে: কোনোটিই নয়; } #ফর্ম { প্রদর্শন: flex; মার্জিন-টপ: 10px; } #ইনপুট { ফ্লেক্স-গ্রো: 1; প্যাডিং: 10px; ফন্ট-আকার: 16px; } বোতাম { প্যাডিং: 10px x 20px; পটভূমি: #4CAF50; রঙ: সাদা; সীমানা: কোনোটিই নয়; কার্সার: পয়েন্টার; মার্জিন-বাম: 10px; } বোতাম: হোভার { পটভূমি: #45a049; } </style> </head> <body> <h1>সাধারণ চ্যাট</h1> <ul id="messages"></ul> <form id="form" action="#"> <input id="input" autocomplete="off" placeholder="আপনার বার্তা টাইপ করুন..." /> <button>পাঠান</bton> </form> <script src="/socket.io/socket.io.js"></script> <script> const সকেট = io(); const form = document.getElementById('form'); const input = document.getElementById('input'); const messages = document.getElementById('messages'); // ফর্ম জমা হ্যান্ডেল form.addEventListener('submit', (e) => { e.preventDefault(); const বার্তা = input.value.trim(); যদি (বার্তা) { // সার্ভারে বার্তা পোস্ট করুন socket.emit('চ্যাট মেসেজ', মেসেজ); // ইনপুট সাফ করুন input.value = ''; } }); // ইনকামিং বার্তা শুনুন socket.on('চ্যাট মেসেজ', (msg) => { const item = document.createElement('li'); item.textContent = msg; messages.appendChild(আইটেম); // নিচে স্ক্রোল করুন messages.scrollTop = messages.scrollHeight; }); </script> </body> </html>অ্যাপটি চালান
- সার্ভার শুরু করুন:
node app.js - আপনার ব্রাউজার খুলুন এবং http://localhost:3000-এ নেভিগেট করুন
- রিয়েল-টাইম আপডেট দেখতে একাধিক ব্রাউজার উইন্ডো খুলুন
এটা কিভাবে কাজ করে
- সার্ভারটি স্ট্যাটিক ফাইল পরিবেশন করে এবং Socket.IO সংযোগ পরিচালনা করতে Express ব্যবহার করে
- যখন একটি ক্লায়েন্ট সংযোগ করে, তারা সমস্ত সংযুক্ত ক্লায়েন্টকে সম্প্রচার বার্তা পাঠাতে পারে
- ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট রিয়েল-টাইমে বার্তা পাঠানো এবং গ্রহণ করা পরিচালনা করে
পরবর্তী পদক্ষেপ
এই মৌলিক সংস্করণটি কাজ করার পরে, আপনি যোগ করতে চাইতে পারেন:
- প্রতিটি বার্তার জন্য ব্যবহারকারীর নাম
- ব্যবহারকারী অপ্ট-ইন/আউট বিজ্ঞপ্তি
- বিভিন্ন চ্যাট রুম
- বার্তা ধারাবাহিকতা
- ব্যবহারকারীর প্রমাণীকরণ
দ্রষ্টব্য:
এটি একটি মৌলিক উদাহরণ। একটি উত্পাদন পরিবেশে, আপনি সঠিক ত্রুটি পরিচালনা, ইনপুট বৈধতা এবং নিরাপত্তা ব্যবস্থা যোগ করতে চাইবেন।
ব্যবহারকারীর নাম যোগ করা হচ্ছে
আমরা বার্তাগুলিতে ব্যবহারকারীর নাম যোগ করে আমাদের চ্যাট উন্নত করব৷ প্রথমে, ব্যবহারকারীর নামগুলি পরিচালনা করতে সার্ভার পরিবর্তন করুন:
// app.js-এ, সংযোগ হ্যান্ডলার পরিবর্তন করুন io.on('সংযোগ', (সকেট) => { console.log('একজন ব্যবহারকারী সংযুক্ত'); // সকেটের সাথে ব্যবহারকারীর নাম সংরক্ষণ করুন socket.username = 'বেনামী'; // ব্যবহারকারীর নাম সহ নতুন বার্তা পরিচালনা করুন socket.on('চ্যাট মেসেজ', (msg) => { io.emit('চ্যাট বার্তা', { ব্যবহারকারীর নাম: socket.username, বার্তা: বার্তা, টাইমস্ট্যাম্প: নতুন তারিখ().toISOSstring() }); }); // ব্যবহারকারীর নাম পরিবর্তন পরিচালনা করুন socket.on('set username', (username) => { const oldUsername = socket.username; socket.username = ব্যবহারকারীর নাম || 'বেনামী'; io.emit('ব্যবহারকারী যোগদান করেছে', { oldUsername: oldUsername, নতুন ব্যবহারকারীর নাম: socket.username }); }); // সংযোগ বিচ্ছিন্ন হ্যান্ডেল socket.on('সংযোগ বিচ্ছিন্ন', () => { console.log('একজন ব্যবহারকারী সংযোগ বিচ্ছিন্ন'); io.emit('user left', { username: socket.username }); }); });এখন, ব্যবহারকারীর নামগুলি পরিচালনা করতে ক্লায়েন্ট আপডেট করুন:
<!-- চ্যাটের শীর্ষে ব্যবহারকারীর নাম এন্ট্রি যোগ করুন --> <div id="username-container"> <input type="text" id="username-input" placeholder="আপনার ব্যবহারকারীর নাম লিখুন" /> <button id="set-username">ব্যবহারকারীর নাম সেট করুন</button> </div> <script> // ব্যবহারকারীর নাম হ্যান্ডলিং যোগ করুন const usernameInput = document.getElementById('username-input'); const setUsernameBtn = document.getElementById('set-username'); let currentUsername = 'বেনামী'; setUsernameBtn.addEventListener('ক্লিক', () => { const newUsername = usernameInput.value.trim(); যদি (নতুন ব্যবহারকারীর নাম) { socket.emit('সেট ইউজারনেম', নতুন ইউজারনেম); বর্তমান ব্যবহারকারীর নাম = নতুন ব্যবহারকারীর নাম; usernameInput.value = ''; } }); // ব্যবহারকারীর নাম দেখানোর জন্য বার্তা প্রদর্শন আপডেট করুন socket.on('চ্যাট বার্তা', (ডেটা) => { const item = document.createElement('li'); item.innerHTML = `<strong>${data.username}:</strong> ${data.message}`; messages.appendChild(আইটেম); messages.scrollTop = messages.scrollHeight; }); // ব্যবহারকারীর যোগদানের বিজ্ঞপ্তিগুলি পরিচালনা করুন socket.on('ব্যবহারকারী যোগ দিয়েছেন', (ডেটা) => { const item = document.createElement('li'); item.className = 'সিস্টেম-বার্তা'; যদি (data.oldUsername === 'বেনামী') { item.textContent = `${data.newUsername} চ্যাটে যোগ দিয়েছে`; } অন্য { item.textContent = `${data.oldUsername} এখন ${data.newUsername}` নামে পরিচিত; } messages.appendChild(আইটেম); messages.scrollTop = messages.scrollHeight; }); // ব্যবহারকারীর প্রস্থান বিজ্ঞপ্তিগুলি পরিচালনা করুন socket.on('ব্যবহারকারী বাম', (ডেটা) => { const item = document.createElement('li'); item.className = 'সিস্টেম-বার্তা'; item.textContent = `${data.username} চ্যাট ত্যাগ করেছে`; messages.appendChild(আইটেম); messages.scrollTop = messages.scrollHeight; }); </script> <স্টাইল> .system-বার্তা { রঙ: #666; ফন্ট-স্টাইল: তির্যক; ফন্ট সাইজ: 0.9em; } </style>চ্যাট রুম যোগ করা হচ্ছে
আমরা বিভিন্ন চ্যাট রুম তৈরি এবং যোগদান করার ক্ষমতা যোগ করব। প্রথমে সার্ভার আপডেট করুন:
// app.js-এ, রুম হ্যান্ডলার যোগ করুন const rooms = new Set(['general', 'random']); io.on('সংযোগ', (সকেট) => { // ... বিদ্যমান কোড ... // একটি রুমে যোগ দিন socket.on('join room', (room) => { // ডিফল্ট একটি ছাড়া সব কক্ষ থেকে প্রস্থান করুন socket.rooms.forEach(r => { যদি (r!== socket.id) { socket.leave(r); socket.emit('বাম ঘর', আর); } }); // নতুন রুমে যোগ দিন socket.join(রুম); socket.emit('joined room', room); // রুমে অন্যদের অবহিত করুন socket.to(room).emit('রুম বার্তা', { ব্যবহারকারীর নাম: 'সিস্টেম', বার্তা: `${socket.username} রুমে যোগদান করেছে`, টাইমস্ট্যাম্প: নতুন তারিখ().toISOSstring() }); }); // রুম সৃষ্টি হ্যান্ডেল socket.on('রুম তৈরি করুন', (রুমের নাম) => { যদি (!rooms.has(roomName)) { rooms.add(roomName); io.emit('রুম তৈরি', রুমের নাম); } }); // রুমে পাঠাতে বার্তা হ্যান্ডলার পরিবর্তন করুন socket.on('চ্যাট বার্তা', (ডেটা) => { const room = Array.from(socket.rooms).find(r => r !== socket.id) || 'সাধারণ'; io.to(room).emit('চ্যাট বার্তা', { ব্যবহারকারীর নাম: socket.username, বার্তা: data.message, টাইমস্ট্যাম্প: নতুন তারিখ().toISOSstring(), রুম: রুম }); }); });রুম পরিচালনা করতে ক্লায়েন্ট আপডেট করুন:
<div id="chat-container"> <div id="sidebar"> <h3>রুম</h3> <ul id="room-list"> <li class="room active" data-room="general">সাধারণ</li> <li class="room" data-room="random">এলোমেলো</li> </ul> <div id="create-room"> <input type="text" id="new-room" placeholder="New room name" /> <button id="create-room-btn">রুম তৈরি করুন</button> </div> </div> <div id="chat-area"> <div id="messages"></div> <form id="form"> <input id="input" autocomplete="off" /> <button>পাঠান</bton> </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 = 'সাধারণ'; // তালিকায় রুম ক্লিক করা হলে রুমে যোগ দিন roomList.addEventListener('click', (e) => { যদি (e.target.classList.contains('রুম')) { const room = e.target.dataset.room; socket.emit('যোগদান রুম', রুম); বর্তমান রুম = রুম; document.querySelectorAll('.room').forEach(r => r.classList.remove('active')); e.target.classList.add('active'); } }); // একটি নতুন রুম তৈরি করুন createRoomBtn.addEventListener('ক্লিক', () => { const roomName = newRoomInput.value.trim(); যদি (roomName && !document.querySelector(`[data-room="${roomName}"]`)) { socket.emit('রুম তৈরি করুন', রুমের নাম); newRoomInput.value = ''; } }); // নতুন রুম তৈরি হ্যান্ডেল socket.on('রুম তৈরি', (roomName) => { const roomItem = document.createElement('li'); roomItem.className = 'রুম'; roomItem.dataset.room = roomName; roomItem.textContent = roomName; roomList.appendChild(roomItem); }); // রুম জয়েন কমিট হ্যান্ডেল socket.on('joined room', (room) => { const item = document.createElement('li'); item.className = 'সিস্টেম-বার্তা'; item.textContent = `আপনি যোগ দিয়েছেন ${room}`; messages.appendChild(আইটেম); বর্তমান রুম = রুম; messages.scrollTop = messages.scrollHeight; }); // রুমের বার্তা পরিচালনা করুন socket.on('রুম বার্তা', (ডেটা) => { const item = document.createElement('li'); item.className = 'সিস্টেম-বার্তা'; item.textContent = data.message; messages.appendChild(আইটেম); messages.scrollTop = messages.scrollHeight; }); </script> <স্টাইল> #চ্যাট-কন্টেইনার { প্রদর্শন: flex; সর্বোচ্চ-প্রস্থ: 1200px; মার্জিন: 0 অটো; } #সাইডবার { প্রস্থ: 250px; প্যাডিং: 20px; ব্যাকগ্রাউন্ড-রঙ: #f5f5f5; সীমানা-ডান: 1px কঠিন #ddd; } #চ্যাট-এরিয়া { flex: 1; প্যাডিং: 20px; } .রুম { প্যাডিং: 8px; কার্সার: পয়েন্টার; সীমানা-ব্যাসার্ধ: 4px; মার্জিন: 4px 0; } .রুম: হোভার { ব্যাকগ্রাউন্ড-রঙ: #e9e9e9; } .room.active { ব্যাকগ্রাউন্ড-রঙ: #4CAF50; রঙ: সাদা; } # তৈরি-রুম { মার্জিন-টপ: 20px; } #নতুন ঘর { প্রস্থ: 100%; প্যাডিং: 8px; মার্জিন-নিচ: 8px; } #create-room-btn { প্রস্থ: 100%; প্যাডিং: 8px; ব্যাকগ্রাউন্ড-রঙ: #4CAF50; রঙ: সাদা; সীমানা: কোনোটিই নয়; সীমানা-ব্যাসার্ধ: 4px; কার্সার: পয়েন্টার; } #create-room-btn:হোভার { ব্যাকগ্রাউন্ড-রঙ: #45a049; } </style>ব্যবহারকারীর তালিকা এবং টাইপিং সূচক যোগ করা হচ্ছে
আমরা ব্যবহারকারীর তালিকা এবং টাইপিং সূচকগুলির সাথে আমাদের চ্যাট উন্নত করব। প্রথমত, ব্যবহারকারীদের নিরীক্ষণ করুন এবং টাইপিং অবস্থা নিরীক্ষণ করতে সার্ভার আপডেট করুন:
// app.js-এ, ব্যবহারকারী এবং টাইপিং অবস্থা ট্র্যাক করুন const userInRooms = নতুন মানচিত্র(); const টাইপিং ব্যবহারকারী = নতুন মানচিত্র(); io.on('সংযোগ', (সকেট) => { // ... বিদ্যমান কোড ... // ব্যবহারকারীর ডেটা শুরু করুন socket.on('join room', (room) => { // ... বিদ্যমান রুম জয়েন কোড ... // রুমের জন্য ব্যবহারকারীর ডেটা শুরু করুন যদি (!usersInRooms.has(room)) { userInRooms.set(রুম, নতুন মানচিত্র()); typingUsers.set(রুম, নতুন সেট()); } // রুমে ব্যবহারকারী যোগ করুন userInRooms.get(room).set(socket.id, { ব্যবহারকারীর নাম: socket.username, আইডি: socket.id }); // রুমে আপডেট করা ব্যবহারকারীর তালিকা পাঠান updateUserList(রুম); }); // টাইপিং অবস্থা হ্যান্ডেল socket.on('টাইপিং', (isTyping) => { const room = Array.from(socket.rooms).find(r => r !== socket.id); যদি (!রুম) ফিরে আসে; যদি (টাইপিং হয়) { typingUsers.get(room).add(socket.username); } অন্য { typingUsers.get(room).delete(socket.username); } // টাইপিং ব্যবহারকারীদের সম্পর্কে রুমে অবহিত করুন io.to(room).emit('টাইপিং ব্যবহারকারী', Array.from(typingUsers.get(room))); }); // সংযোগ বিচ্ছিন্ন হ্যান্ডেল socket.on('সংযোগ বিচ্ছিন্ন', () => { // সব রুম থেকে সরান Array.from(usersInRooms.entries()).forEach(([রুম, user]) => { যদি (users.has(socket.id)) { user.delete(socket.id); typingUsers.get(room)?.delete(socket.username); updateUserList(রুম); } }); }); // একটি রুমের ব্যবহারকারীর তালিকা আপডেট করার ফাংশন ফাংশন আপডেটUserList(রুম) { const user = Array.from(usersInRooms.get(room)?.values() || []); io.to(room).emit('ব্যবহারকারীর তালিকা', { রুম: রুম, ব্যবহারকারী: user.map(u => ({ ব্যবহারকারীর নাম: u.username, isTyping: typingUsers.get(room)?.has(u.username) || মিথ্যা })) }); } });ব্যবহারকারীর তালিকা প্রদর্শন করুন এবং টাইপিং পয়েন্টার পরিচালনা করতে ক্লায়েন্ট আপডেট করুন:
<div id="chat-container"> <div id="sidebar"> <h3>রুম</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">রুম তৈরি করুন</button> </div> <h3>রুমে ব্যবহারকারীরা</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="একটি বার্তা টাইপ করুন..." /> <button>পাঠান</bton> </form> </div> </div> <script> // ... বিদ্যমান কোড ... const userList = document.getElementById('user-list'); const typingIndicator = document.getElementById('টাইপিং-ইন্ডিকেটর'); const messageInput = document.getElementById('input'); টাইপ করার সময় শেষ হতে দিন; // টাইপিং ইভেন্টগুলি পরিচালনা করুন messageInput.addEventListener('input', () => { // ব্যবহারকারী টাইপ করছে যদি (!টাইপিং টাইমআউট) { socket.emit('টাইপিং', সত্য); } // পূর্ববর্তী সময় ফ্রেম সাফ করুন clearTimeout(টাইপিংটাইমআউট); // ব্যবহারকারী কখন টাইপ করা বন্ধ করেছে তা নির্দেশ করার জন্য একটি সময়সীমা সেট করুন টাইপিংটাইমআউট = সেটটাইমআউট(() => { socket.emit('টাইপিং', মিথ্যা); টাইপিংটাইমআউট = নাল; }, 1000); }); // ফর্ম জমা হ্যান্ডেল form.addEventListener('submit', (e) => { e.preventDefault(); যদি (messageInput.value.trim()) { socket.emit('চ্যাট বার্তা', { বার্তা: messageInput.value, রুম: বর্তমান রুম }); messageInput.value = ''; // টাইপিং অবস্থা সাফ করুন যদি (টাইপিং টাইমআউট) { clearTimeout(টাইপিংটাইমআউট); টাইপিংটাইমআউট = নাল; socket.emit('টাইপিং', মিথ্যা); } } }); // ব্যবহারকারীর তালিকা আপডেট করুন socket.on('ব্যবহারকারীর তালিকা', (ডেটা) => { যদি (data.room === currentRoom) { userList.innerHTML = ''; data.users.forEach(user => { const userItem = document.createElement('li'); userItem.textContent = user.username; যদি (user.isTyping) { userItem.innerHTML += ' <span class="typing">টাইপিং...</span>'; } userList.appendChild(userItem); }); } }); // টাইপ পয়েন্টার আপডেট করুন socket.on('টাইপিং ব্যবহারকারী', (ব্যবহারকারীর নাম) => { const typingUsers = usernames.filter(u => u !== currentUsername); যদি (typingUsers.length > 0) { typingIndicator.textContent = `${typingUsers.join(', ')} ${typingUsers.length > 1 ? 'are' : 'is'} টাইপিং...`; typingIndicator.style.display = 'ব্লক'; } অন্য { typingIndicator.style.display = 'কোনোটি নয়'; } }); </script> <স্টাইল> /* বিদ্যমান শৈলীতে যোগ করুন */ #টাইপিং-সূচক { রঙ: #666; ফন্ট-স্টাইল: তির্যক; ফন্ট সাইজ: 0.9em; প্যাডিং: 5px x 10px; প্রদর্শন: কোনোটিই নয়; } .টাইপিং { রঙ: #666; ফন্ট সাইজ: 0.8em; ফন্ট-স্টাইল: তির্যক; } #ব্যবহারকারী-তালিকা { তালিকা-শৈলী: কোনোটিই নয়; প্যাডিং: 0; মার্জিন: 10px 0; } # ব্যবহারকারী-তালিকা li { প্যাডিং: 5px x 10px; সীমানা-ব্যাসার্ধ: 3px; মার্জিন: 2px 0; } #user-list li:hover { ব্যাকগ্রাউন্ড-রঙ: #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 = নতুন সার্ভার(সার্ভার); // প্রমাণীকরণের জন্য মিডলওয়্যার io.use((সকেট, পরবর্তী) => { const টোকেন = socket.handshake.auth.token; যদি (!টোকেন) { পরবর্তী ফেরত দিন(নতুন ত্রুটি('প্রমাণিকরণ ত্রুটি: টোকেন অনুপস্থিত')); } // টোকেন যাচাই করুন (JWT সহ উদাহরণ) চেষ্টা করুন { const user = jwt.verify(টোকেন, 'your-secret-key'); socket.user = ব্যবহারকারী; পরবর্তী(); } ধরা (ত্রুটি) { পরবর্তী (নতুন ত্রুটি ('প্রমাণকরণ ত্রুটি: অবৈধ টোকেন')); } }); io.on('সংযোগ', (সকেট) => { console.log(`প্রমাণিত ব্যবহারকারী সংযুক্ত: ${socket.user.username}`); });Socket.IO বনাম নেটিভ ওয়েবসকেট
| বৈশিষ্ট্য | Socket.IO | নেটিভ ওয়েবসকেট |
|---|---|---|
| প্রত্যাহার প্রক্রিয়া | হ্যাঁ (HTTP লং-ট্র্যাকিং, ইত্যাদি) | না |
| স্বয়ংক্রিয় পুনঃসংযোগ | হ্যাঁ | না (অবশ্যই সক্রিয় হতে হবে) |
| সম্প্রচার | বিল্ট ইন | ম্যানুয়াল প্রক্রিয়াকরণ |
| রুম/নেমস্পেস | বিল্ট ইন | ম্যানুয়াল প্রক্রিয়াকরণ |
| ব্রাউজার সমর্থন | সমস্ত ব্রাউজার | শুধুমাত্র আধুনিক ব্রাউজার |
| প্যাকেটের আকার | বড় (আদর্শগত ওভারহেড) | ছোট |
| বাইনারি ডেটা | সমর্থিত হয় | সমর্থিত হয় |
যখন নির্ভরযোগ্যতা, সামঞ্জস্যতা এবং উচ্চ-স্তরের বৈশিষ্ট্যগুলির প্রয়োজন হয় তখন Socket.IO পছন্দ করা হয়, যখন নেটিভ ওয়েবসকেটগুলি হালকা এবং কম ওভারহেড থাকে।