WebSockets পরিচিতি
WebSockets ক্লায়েন্ট এবং সার্ভারের মধ্যে একটি স্থিতিশীল সংযোগ প্রদান করে, যা রিয়েল-টাইম, দ্বি-দিকনির্দেশক যোগাযোগের অনুমতি দেয়।
এটি প্রথাগত HTTP থেকে পৃথক যা একটি অনুরোধ-প্রতিক্রিয়া মডেল অনুসরণ করে।
WebSockets এর মূল সুবিধা
রিয়েল টাইম আপডেট
তাত্ক্ষণিকভাবে ক্লায়েন্টদের কাছে ডেটা পুশ করুন
দক্ষ
বারবার HTTP অনুরোধের প্রয়োজন নেই
দ্বিমুখী
ক্লায়েন্ট এবং সার্ভার উভয়ই বার্তা পাঠাতে পারে
কম বিলম্ব
বার্তা অবিলম্বে পাঠানো হয়
WebSockets vs HTTP
WebSockets এবং HTTP এর মধ্যে পার্থক্য বোঝা কার্যকরভাবে রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করার জন্য গুরুত্বপূর্ণ।
| বৈশিষ্ট্য | WebSockets | HTTP |
|---|---|---|
| সংযোগ | স্থির, একক লিঙ্ক | অনুরোধ করার জন্য নতুন লিঙ্ক |
| যোগাযোগ | দ্বি-মুখী, পূর্ণ-দ্বৈত | একমুখী, অনুরোধ-প্রতিক্রিয়া |
| ওভারহেড | অন্তত হ্যান্ডশেকের পরে | প্রতিটি অনুরোধে হেডার |
| কেস ব্যবহার করুন | রিয়েল টাইম অ্যাপ্লিকেশন | ঐতিহ্যগত ওয়েব পেজ, API |
| উদাহরণ | চ্যাট অ্যাপ, লাইভ ফিড | ওয়েব পেজ, ফর্ম জমা লোড হচ্ছে |
প্রযুক্তিগত নোট:
ওয়েবসকেটগুলি একটি HTTP হ্যান্ডশেক (স্ট্যাটাস কোড 101) দিয়ে শুরু হয় এবং তারপরে ওয়েবসকেট প্রোটোকলে আপগ্রেড হয় (ws:// বা wss://)।
WebSockets সেট আপ করা হচ্ছে
1. ws মডিউল ইনস্টল করুন
প্রথমে, আপনার প্রকল্পের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং এটি চালু করুন:
mkdir websocket-demo
cd websocket-demo
npm init -yতারপর, ws প্যাকেজ ইনস্টল করুন:
npm install wsদ্রষ্টব্য:
ws মডিউল হল একটি সহজ, দ্রুত এবং সম্পূর্ণ পরীক্ষিত WebSocket ক্লায়েন্ট এবং সার্ভার বাস্তবায়ন।
একটি ওয়েবসকেট সার্ভার তৈরি করা
আসুন একটি সাধারণ WebSocket সার্ভার তৈরি করি যা এটি প্রাপ্ত যেকোনো বার্তাকে প্রতিধ্বনিত করে।
server.js :
const WebSocket = প্রয়োজন('ws'); // পোর্ট 8080 এ একটি ওয়েবসকেট সার্ভার তৈরি করুন const wss = new WebSocket.Server({ পোর্ট: 8080 }); console.log('ওয়েবসকেট সার্ভার চলছে ws://localhost:8080'); // সংযোগ ইভেন্ট হ্যান্ডলার wss.on('সংযোগ', (ws) => { console.log('নতুন ক্লায়েন্ট সংযুক্ত'); // ক্লায়েন্টকে একটি স্বাগত বার্তা পাঠান ws.send('ওয়েবসকেট সার্ভারে স্বাগতম!'); // বার্তা ইভেন্ট হ্যান্ডলার ws.on('বার্তা', (বার্তা) => { console.log(`প্রাপ্ত হয়েছে: ${message}`); // ক্লায়েন্টের কাছে বার্তাটি ইকো করুন ws.send(`সার্ভার গৃহীত হয়েছে: ${message}`); }); // ইভেন্ট হ্যান্ডলার বন্ধ করুন ws.on('close', () => { console.log('ক্লায়েন্ট সংযোগ বিচ্ছিন্ন'); }); });কোড বোঝা
- আমরা ws মডিউল আমদানি করি
- পোর্ট 8080 এ একটি নতুন ওয়েবসকেট সার্ভার তৈরি করুন
- সংযোগ, বার্তা এবং সংযোগ বিচ্ছিন্ন করার জন্য ইভেন্ট হ্যান্ডলার সেট আপ করুন
- ক্লায়েন্টের কাছে কোনো প্রাপ্ত বার্তা প্রতিধ্বনিত করুন
চেষ্টা করে দেখুন
- উপরের কোডটিকে server.js হিসেবে সেভ করুন
- সার্ভার শুরু করুন:
node server.js - সার্ভারটি শুরু হয় এবং ws://localhost:8080 এ শোনে
একটি ওয়েবসকেট ক্লায়েন্ট তৈরি করা
এখন যেহেতু আমাদের একটি WebSocket সার্ভার আছে, আসুন এটি দিয়ে ওয়েব ক্লায়েন্ট তৈরি করি। আমরা একটি Node.js ক্লায়েন্ট এবং একটি ব্রাউজার ক্লায়েন্ট উভয়ই তৈরি করব।
1. Node.js ক্লায়েন্ট
client.js :
const WebSocket = প্রয়োজন('ws'); const readline = require('readline'); // ব্যবহারকারীর ইনপুটের জন্য একটি রিডলাইন ইন্টারফেস তৈরি করুন const rl = readline.createInterface({ ইনপুট: process.stdin, আউটপুট: process.stdout }); // WebSocket সার্ভারের সাথে সংযোগ করুন const ws = নতুন ওয়েবসকেট('ws://localhost:8080'); // সংযোগ খোলা হয় ws.on('ওপেন', () => { console.log('ওয়েবসকেট সার্ভারের সাথে সংযুক্ত'); promptForMessage(); }); // সার্ভার থেকে বার্তা শুনুন ws.on('বার্তা', (বার্তা) => { console.log(`সার্ভার: ${message}`); }); // ত্রুটিগুলি পরিচালনা করুন ws.on('error', (error) => { console.error('ওয়েবসকেট ত্রুটি:', ত্রুটি); }); // সংযোগ বন্ধ হ্যান্ডেল ws.on('close', () => { console.log('সার্ভার থেকে সংযোগ বিচ্ছিন্ন'); process.exit(0); }); // একটি ফাংশন যা ব্যবহারকারীকে বার্তার জন্য অনুরোধ করে ফাংশন promptForMessage() { rl.question('একটি বার্তা লিখুন (বা প্রস্থান করতে "প্রস্থান করুন"): ', (বার্তা) => { যদি (message.toLowerCase() === 'প্রস্থান') { ws.close(); rl.close(); প্রত্যাবর্তন } ws.send(বার্তা); promptForMessage(); }); }Node.js
- উপরের কোডটি client.js হিসাবে সংরক্ষণ করুন
- WebSocket সার্ভার চলছে তা নিশ্চিত করুন
- ক্লায়েন্ট চালান:
node client.js - বার্তা টাইপ করুন এবং এন্টার টিপুন
- প্রস্থান করতে "প্রস্থান" টাইপ করুন
2. ব্রাউজার ক্লায়েন্ট
আমাদের WebSocket সার্ভারের সাথে সংযোগ করতে জাভাস্ক্রিপ্ট দিয়ে একটি সাধারণ HTML পৃষ্ঠা তৈরি করা যাক।
index.html :
<!DOCTYPE html> <html> <মাথা> <title>ওয়েবসকেট ক্লায়েন্ট</title> <স্টাইল> শরীর { font-family: Arial, sans-serif; সর্বোচ্চ-প্রস্থ: 600px; মার্জিন: 0 অটো; প্যাডিং: 20px; } #বার্তা { উচ্চতা: 300px; সীমানা: 1px কঠিন #ccc; overflow-y: স্বয়ংক্রিয়; প্যাডিং: 10px; মার্জিন-নিচ: 10px; } .বার্তা { মার্জিন: 5px 0; } </style> </head> <body> <h1>ওয়েবসকেট ক্লায়েন্ট</h1> <div id="status">সার্ভারের সাথে সংযোগ করা হচ্ছে...</div> <div id="messages"></div> <div> <input type="text" id="messageInput" placeholder="আপনার বার্তা টাইপ করুন">৷ <button onclick="sendMessage()">পাঠান</button> </div> <script> const status = document.getElementById('status'); const messages = document.getElementById('messages'); const messageInput = document.getElementById('messageInput'); // WebSocket সার্ভারের সাথে সংযোগ করুন const ws = নতুন ওয়েবসকেট('ws://localhost:8080'); // সংযোগ খোলা হয় ws.onopen = () => { status.textContent = 'সার্ভারের সাথে সংযুক্ত'; status.style.color = 'সবুজ'; }; // বার্তা শুনুন ws.onmessage = (ঘটনা) => { const বার্তা = document.createElement('div'); message.className = 'বার্তা'; message.textContent = event.data; messages.appendChild(বার্তা); messages.scrollTop = messages.scrollHeight; }; // ত্রুটিগুলি পরিচালনা করুন ws.onerror = (ত্রুটি) => { status.textContent = 'ত্রুটি:' + error.message; status.style.color = 'লাল'; }; // সংযোগ বন্ধ হ্যান্ডেল ws.onclose = () => { status.textContent = 'সার্ভার থেকে সংযোগ বিচ্ছিন্ন'; status.style.color = 'লাল'; }; // বার্তা পাঠানোর ফাংশন ফাংশন sendMessage() { const বার্তা = messageInput.value.trim(); যদি (বার্তা) { ws.send(বার্তা); messageInput.value = ''; } } // এন্টার কী-তে বার্তা পাঠান messageInput.addEventListener('keypress', (e) => { যদি (e.key === 'এন্টার') { sendMessage(); } }); </script> </body> </html>একটি ব্রাউজার ক্লায়েন্ট কিভাবে ব্যবহার করবেন
- উপরের কোডটি index.html হিসাবে সংরক্ষণ করুন
- WebSocket সার্ভার চলছে তা নিশ্চিত করুন
- একটি ওয়েব ব্রাউজারে HTML ফাইল খুলুন
- ইনপুট ক্ষেত্রে বার্তা টাইপ করুন এবং পাঠান ক্লিক করুন বা এন্টার টিপুন
দ্রষ্টব্য:
ব্রাউজার ক্লায়েন্ট কাজ করার জন্য, ব্রাউজার নিরাপত্তা বিধিনিষেধের কারণে আপনাকে অবশ্যই একটি ওয়েব সার্ভারের (যেমন http-সার্ভার বা লাইভ-সার্ভার) মাধ্যমে HTML ফাইল পরিবেশন করতে হবে।
আবেদন পরীক্ষা করা হচ্ছে
- WebSocket সার্ভার শুরু করুন:
node server.js - ক্লায়েন্ট এইচটিএমএল পৃষ্ঠা সহ একাধিক ব্রাউজার উইন্ডো খুলুন
- বিভিন্ন ক্লায়েন্ট থেকে বার্তা পাঠান এবং তাদের রিয়েল-টাইমে উপস্থিত দেখুন
- একটি Node.js ক্লায়েন্ট ব্রাউজার ক্লায়েন্টের পাশাপাশি চালানো যেতে পারে
প্রক্রিয়াকরণ বোঝা
- সার্ভার সমস্ত সংযুক্ত ক্লায়েন্টদের একটি সংগ্রহ বজায় রাখে
- যখন একটি ক্লায়েন্ট থেকে একটি বার্তা প্রাপ্ত হয়, এটি অন্য সকলের কাছে সম্প্রচারিত হয়
- ক্লায়েন্ট সংযোগ, সংযোগ বিচ্ছিন্ন, এবং ত্রুটি ইভেন্ট পরিচালনা করে
- বার্তাগুলি রিসিভ হওয়ার সাথে সাথে রিয়েল-টাইমে প্রদর্শিত হয়
ওয়েবসকেট ইভেন্ট
WebSockets একটি ইভেন্ট-চালিত মডেল ব্যবহার করে। এখানে মূল ঘটনাগুলি রয়েছে:
| ঘটনা | ব্যাখ্যা |
|---|---|
| সংযোগ (সার্ভার) | ক্লায়েন্ট সার্ভারের সাথে সংযোগ করলে বহিস্কার করা হয় |
| খোলা (ক্লায়েন্ট) | সংযোগ স্থাপন করা হলে আগুন ছেড়ে দেওয়া হয় |
| message | মেসেজ পেলে বরখাস্ত হয় |
| error | একটি ত্রুটি বহিস্কার করা হয় |
| close | সংযোগ বন্ধ থাকলে, আগুন ছেড়ে দেওয়া হয় |
বাস্তব বিশ্বের অ্যাপ্লিকেশন
ওয়েবসকেটগুলি বিভিন্ন বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়:
চ্যাট অ্যাপ্লিকেশন
তাত্ক্ষণিক বার্তা বিতরণ
লাইভ ড্যাশবোর্ড
মেট্রিক্স এবং ডেটার রিয়েল-টাইম আপডেট
যৌগিক সরঞ্জাম
একাধিক ব্যবহারকারী একই নথি সম্পাদনা করে
গেমিং
মাল্টিপ্লেয়ার অনলাইন গেম যাতে দ্রুত মিথস্ক্রিয়া প্রয়োজন
আর্থিক প্ল্যাটফর্ম
রিয়েল-টাইম স্টক টিকার এবং ট্রেডিং প্ল্যাটফর্ম
আইওটি অ্যাপ্লিকেশন
সংযুক্ত ডিভাইস নিরীক্ষণ এবং নিয়ন্ত্রণ
উন্নত WebSocket বৈশিষ্ট্য
1. বাইনারি ডেটা স্থানান্তর
WebSockets বাইনারি ডেটা পাঠাতে সমর্থন করে, যা নির্দিষ্ট ধরণের ডেটার জন্য অত্যন্ত দক্ষ:
// বাইনারি ডেটা পাঠানো হচ্ছে (সার্ভার-সাইড) const buffer = Buffer.from([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // বাইনারিতে 'হ্যালো' ws.send(বাফার, { বাইনারি: সত্য }); // বাইনারি ডেটা পান (ক্লায়েন্ট-সাইড) ws.binaryType = 'অ্যারেবাফার'; ws.onmessage = (ঘটনা) => { যদি (অ্যারেবাফারের ঘটনা ডেটা উদাহরণ) { const view = new Uint8Array(event.data); console.log('প্রাপ্ত বাইনারি ডেটা:', দেখুন); } };2. হার্টবিট এবং সংযোগ পর্যবেক্ষণ
সংযোগ বিচ্ছিন্নতা সনাক্ত এবং পরিচালনা করতে হার্টবিট প্রয়োগ করুন:
// সার্ভার-সাইড হার্টবিট ফাংশন সেটআপহার্টবিট(ডব্লিউএস) { ws.isAlive = সত্য; ws.on('pong', () => { ws.isAlive = true; }); } // প্রতি 30 সেকেন্ডে সমস্ত ক্লায়েন্টকে পিং করুন const interval = setInterval(() => { wss.clients.forEach((ws) => { যদি (ws.isAlive === মিথ্যা) ws.terminate(); ws.isAlive = মিথ্যা; ws.ping(); }); }, 30000); // সার্ভার বন্ধ হয়ে গেলে ক্লিনআপ wss.on('close', () => { clearInterval(ব্যবধান); });নিরাপত্তা বিবেচনা
1. স্বীকৃতি
সর্বদা WebSocket সংযোগ অনুমোদন করুন:
const http = প্রয়োজন('http'); const WebSocket = প্রয়োজন('ws'); const jwt = প্রয়োজন('jsonwebtoken'); const সার্ভার = http.createServer(); const wss = new WebSocket.Server({ noServer: true }); // অনুমোদন সহ আপডেট পরিচালনা করুন server.on('আপগ্রেড', (অনুরোধ, সকেট, হেড) => { চেষ্টা করুন { const token = request.url.split('token=')[1]; যদি (!টোকেন) নতুন ত্রুটি ফেলে ('কোন টোকেন দেওয়া হয়নি'); // JWT টোকেন যাচাই করুন jwt.verify(টোকেন, 'your-secret-key', (err, decoded) => { যদি (ভুল) { socket.write('HTTP/1.1 401 অননুমোদিত\r\n\r\n'); socket.destroy(); প্রত্যাবর্তন } // WebSocket হ্যান্ডশেক দিয়ে এগিয়ে যান wss.handleUpgrade(অনুরোধ, সকেট, হেড, (ws) => { ws.user = ডিকোড করা; // ওয়েবসকেটের সাথে ব্যবহারকারীর ডেটা সংযুক্ত করুন wss.emit('সংযোগ', ws, অনুরোধ); }); }); } ধরা (ত্রুটি) { socket.write('HTTP/1.1 401 অননুমোদিত\r\n\r\n'); socket.destroy(); } });2. হার সীমা
অপব্যবহার রোধ করার জন্য একটি হার সীমা সহ:
const rateLimit = প্রয়োজন('ws-rate-limit'); // সংযোগ প্রতি মিনিটে 100টি বার্তা সীমিত করুন const limiter = rate Limit({ windowMs: 60*1000, // 1 মিনিট সর্বোচ্চ: 100, বার্তা: 'অনেক বার্তা, অনুগ্রহ করে গতি কমিয়ে দিন!', }); wss.on('সংযোগ', (ws) => { limiter(ws); // ... আপনার সংযোগ হ্যান্ডলার বাকি });3. ইনপুট যাচাইকরণ
সর্বদা আগত বার্তা পরীক্ষা করুন:
const Joi = require('joi'); const messageSchema = Joi.object({ প্রকার: Joi.string().valid('chat', 'join', 'leave').required(), ব্যবহারকারীর নাম: Joi.string().alphanum().min(3).max(30), বার্তা: Joi.string().max(1000), রুম: Joi.string().alphanum().max(50), }); ws.on('বার্তা', (ডেটা) => { চেষ্টা করুন { const বার্তা = JSON.parse(data); const { error, value } = messageSchema.validate(message); যদি (ত্রুটি) { নতুন ত্রুটি নিক্ষেপ (`অবৈধ বার্তা: ${error.details[0].message}`); } // একটি বৈধ বার্তা প্রক্রিয়া করুন... } ধরা (ত্রুটি) { ws.send(JSON.stringify({ error: err.message })); } });কর্মক্ষমতা অপ্টিমাইজেশান
সারাংশ
ব্যান্ডউইথের ব্যবহার কমাতে মেসেজ-বাই-মেসেজ ডিফ্লেট সক্ষম করুন:
const WebSocket = প্রয়োজন('ws'); const wss = new WebSocket.Server({ পোর্ট: 8080, perMessageDeflate: { zlibDeflateOptions: { খণ্ড আকার: 1024, মেম লেভেল: 7, স্তর: 3 }, zlibInflateOptions: { খণ্ড আকার: 10 * 1024 }, // অন্যান্য বিকল্প ক্লায়েন্ট নো কনটেক্সট টেকওভার: সত্য, serverNoContextTakeover: সত্য, সঙ্গতিসীমা: 10, } });সর্বোত্তম অনুশীলন:
প্রোডাকশন অ্যাপ্লিকেশানগুলির জন্য, Socket.IO এর মতো লাইব্রেরিগুলি ব্যবহার করার কথা বিবেচনা করুন যা ওয়েবসকেট সমর্থন করে না এমন ব্রাউজারগুলির জন্য ফলব্যাকগুলির মতো অতিরিক্ত বৈশিষ্ট্যগুলি প্রদান করে৷