Socket.IO ইভেন্ট-ভিত্তিক যোগাযোগ মডেল ব্যবহার করে কাজ করে, যেখানে ইভেন্ট ট্রিগার এবং শোনার মাধ্যমে ডেটা ট্রান্সফার হয়। এই মডেলটি কাস্টম ইভেন্ট এবং ডেটা ট্রান্সমিশন ব্যবস্থাকে খুবই সহজ এবং কার্যকরী করে তোলে। এখানে, আমরা কাস্টম ইভেন্টস এবং ডেটা ট্রান্সমিশন কিভাবে কাজ করে তা বিস্তারিতভাবে আলোচনা করবো।
1. কাস্টম ইভেন্টস (Custom Events)
Socket.IO-তে আপনি নিজের ইভেন্ট তৈরি করতে পারেন, যেগুলি ক্লায়েন্ট এবং সার্ভারের মধ্যে বিশেষ ধরনের তথ্য বা অ্যাকশন পরিচালনার জন্য ব্যবহৃত হয়। কাস্টম ইভেন্টস একটি নির্দিষ্ট নাম পেয়ে থাকে এবং ওই নামের সাথে সংযুক্ত ডেটা পাঠানো বা গ্রহণ করা হয়।
কাস্টম ইভেন্টে ডেটা পাঠানো ও গ্রহণ করা
কাস্টম ইভেন্টের মাধ্যমে আপনি সার্ভার এবং ক্লায়েন্টের মধ্যে নির্দিষ্ট তথ্য পাঠাতে ও গ্রহণ করতে পারেন। উদাহরণস্বরূপ, ক্লায়েন্ট থেকে সার্ভারে একটি কাস্টম বার্তা পাঠানো এবং সার্ভার সেই বার্তা ফেরত পাঠানো।
ক্লায়েন্ট সাইড (Client-Side) কাস্টম ইভেন্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO Custom Event</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
// 'chat message' নামে একটি কাস্টম ইভেন্টে বার্তা পাঠানো
socket.emit('chat message', 'Hello from client!');
// সার্ভার থেকে 'chat message' কাস্টম ইভেন্টে ডেটা গ্রহণ করা
socket.on('chat message', (message) => {
console.log('Received from server: ', message);
});
</script>
</head>
<body>
<h1>Socket.IO Custom Event Example</h1>
</body>
</html>ব্যাখ্যা:
socket.emit('chat message', 'Hello from client!');: এই লাইনে একটি কাস্টম ইভেন্ট'chat message'সার্ভারে পাঠানো হচ্ছে।socket.on('chat message', (message) => {...});: এখানে, সার্ভার থেকে আসা'chat message'ইভেন্টের মাধ্যমে প্রাপ্ত ডেটা (এক্ষেত্রে মেসেজ) গ্রহণ করা হচ্ছে।
সার্ভার সাইড (Server-Side) কাস্টম ইভেন্ট
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Socket.IO server is running');
});
const io = socketIo(server);
// ক্লায়েন্টের সাথে কানেকশন হওয়া
io.on('connection', (socket) => {
console.log('A user connected');
// ক্লায়েন্ট থেকে আসা 'chat message' ইভেন্ট গ্রহণ
socket.on('chat message', (msg) => {
console.log('Message from client:', msg);
// সার্ভার থেকে ক্লায়েন্টে প্রতিক্রিয়া পাঠানো
socket.emit('chat message', 'Hello from server');
});
// ডিসকানেক্ট হলে লগ করা
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});ব্যাখ্যা:
socket.on('chat message', (msg) => {...});: সার্ভার এই ইভেন্টটি শোনে এবং ক্লায়েন্ট থেকে আসা মেসেজ গ্রহণ করে।socket.emit('chat message', 'Hello from server');: সার্ভার ক্লায়েন্টকে এই কাস্টম ইভেন্টের মাধ্যমে বার্তা পাঠায়।
2. ডেটা ট্রান্সমিশন (Data Transmission)
Socket.IO-তে ডেটা ট্রান্সফার করা খুবই সহজ এবং কার্যকরী। আপনি কাস্টম ইভেন্টস ব্যবহার করে যে কোনো ধরনের ডেটা (যেমন স্ট্রিং, অবজেক্ট, অ্যারে ইত্যাদি) ট্রান্সফার করতে পারেন। এটি real-time (রিয়েল-টাইম) ডেটা আদান-প্রদান করতে ব্যবহৃত হয়, যেমন চ্যাট, লাইভ নোটিফিকেশন, এবং গেমিং অ্যাপ্লিকেশন।
ডেটা ট্রান্সমিশনের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান:
- স্ট্রিং, নাম্বার বা অবজেক্ট পাঠানো:
আপনি সরাসরি স্ট্রিং, নাম্বার, অবজেক্ট অথবা অ্যারে পাঠাতে পারেন কাস্টম ইভেন্টের মাধ্যমে। যেমন:স্ট্রিং পাঠানো:
socket.emit('send message', 'Hello, World!');অবজেক্ট পাঠানো:
const user = { name: 'John', age: 30 }; socket.emit('user data', user);
ক্লায়েন্ট থেকে সার্ভারে কাস্টম ডেটা পাঠানো এবং তার প্রতিক্রিয়া গ্রহণ:
ক্লায়েন্ট সাইড:
const userInfo = { name: 'Alice', email: 'alice@example.com' }; // সার্ভারে ডেটা পাঠানো socket.emit('user data', userInfo); // সার্ভার থেকে প্রতিক্রিয়া গ্রহণ socket.on('server response', (response) => { console.log('Server Response: ', response); });সার্ভার সাইড:
io.on('connection', (socket) => { console.log('A user connected'); // 'user data' কাস্টম ইভেন্টে ডেটা গ্রহণ socket.on('user data', (data) => { console.log('Received user data:', data); // সার্ভার থেকে প্রতিক্রিয়া পাঠানো socket.emit('server response', 'Data received successfully'); }); });
ব্যাখ্যা:
- ক্লায়েন্ট একটি অবজেক্ট
userInfoপাঠাচ্ছে, যা সার্ভার গ্রহণ করছে। - সার্ভার একটি response ইভেন্ট পাঠাচ্ছে, যা ক্লায়েন্ট গ্রহণ করছে।
3. ব্রডকাস্টিং (Broadcasting)
Socket.IO এর মাধ্যমে আপনি একটি ইভেন্ট সমস্ত কানেক্টেড ক্লায়েন্টকে পাঠাতে পারেন, যেটি ব্রডকাস্টিং হিসেবে পরিচিত। যখন একটি ইভেন্ট ট্রিগার করা হয়, এটি সমস্ত কানেক্টেড ক্লায়েন্টে সেই ইভেন্ট পাঠিয়ে দেয়।
ব্রডকাস্টিং উদাহরণ
সার্ভার সাইড:
io.on('connection', (socket) => {
console.log('A user connected');
// 'chat message' ইভেন্টে মেসেজ গ্রহণ
socket.on('chat message', (msg) => {
// ব্রডকাস্টিং মেসেজ সব ক্লায়েন্টকে পাঠানো
io.emit('chat message', msg); // সমস্ত ক্লায়েন্টে মেসেজ পাঠানো
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});ক্লায়েন্ট সাইড:
socket.on('chat message', (msg) => {
console.log('New message: ' + msg); // সমস্ত ক্লায়েন্ট থেকে আসা মেসেজ দেখানো
});ব্যাখ্যা:
- সার্ভারে যখন একটি নতুন মেসেজ আসে, সার্ভার সেই মেসেজটি সমস্ত কানেক্টেড ক্লায়েন্টে ব্রডকাস্ট করে।
সারসংক্ষেপ
- কাস্টম ইভেন্টস হল বিশেষ ধরনের ইভেন্ট যা আপনার প্রয়োজন অনুযায়ী তৈরি করা যায় এবং সেই ইভেন্টে নির্দিষ্ট ডেটা পাঠানো বা গ্রহণ করা হয়।
- ডেটা ট্রান্সমিশন এর মাধ্যমে ক্লায়েন্ট ও সার্ভারের মধ্যে বিভিন্ন ধরনের ডেটা (যেমন স্ট্রিং, অবজেক্ট, অ্যারে) আদান-প্রদান করা সম্ভব।
- ব্রডকাস্টিং এর মাধ্যমে একটি ইভেন্ট সব কানেক্টেড ক্লায়েন্টে পাঠানো সম্ভব, যা রিয়েল-টাইম অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত কার্যকর।
এই ফিচারগুলির মাধ্যমে আপনি রিয়েল-টাইম ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে কাস্টম ইভেন্টস এবং ডেটা ট্রান্সমিশন ব্যবহৃত হবে।
Socket.IO ক্লায়েন্ট এবং সার্ভারের মধ্যে কাস্টম ইভেন্ট তৈরি করার সুবিধা দেয়। এর মাধ্যমে আপনি আপনার প্রয়োজন অনুসারে নির্দিষ্ট ইভেন্ট তৈরি করতে পারেন এবং সেই ইভেন্টে ডেটা পাঠাতে বা গ্রহণ করতে পারেন।
Socket.IO তে কাস্টম ইভেন্ট তৈরি করা এবং ইভেন্টের মাধ্যমে ডেটা আদান-প্রদান করা খুবই সহজ। নিচে এর বিস্তারিত ব্যাখ্যা দেওয়া হলো।
১. Server Side: কাস্টম ইভেন্ট তৈরি করা
প্রথমে, সার্ভার সাইডে একটি কাস্টম ইভেন্ট তৈরি করতে হবে। নিচে একটি উদাহরণ দেখানো হলো যেখানে আমরা একটি কাস্টম ইভেন্ট new user তৈরি করছি:
// server.js (Server Side)
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Socket.IO Server Running');
});
const io = socketIo(server);
// কাস্টম ইভেন্ট 'new user' হ্যান্ডল করা
io.on('connection', (socket) => {
console.log('A user connected');
// 'new user' ইভেন্ট শোনানো
socket.on('new user', (data) => {
console.log('New user connected: ', data.name);
// সার্ভার থেকে কাস্টম ইভেন্ট 'welcome' পাঠানো
socket.emit('welcome', `Welcome to the server, ${data.name}!`);
});
// ক্লায়েন্ট ডিসকানেক্ট হওয়া
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});এখানে, সার্ভারে new user নামে একটি কাস্টম ইভেন্ট তৈরি করা হয়েছে। যখন একটি ক্লায়েন্ট new user ইভেন্ট পাঠায়, সার্ভার সেই তথ্য গ্রহণ করবে এবং একটি welcome কাস্টম ইভেন্ট পাঠাবে যা ক্লায়েন্টকে অভিনন্দন জানাবে।
২. Client Side: কাস্টম ইভেন্ট তৈরি এবং শোনা
ক্লায়েন্ট সাইডে কাস্টম ইভেন্ট শোনা এবং পাঠানোর জন্য socket.emit এবং socket.on ফাংশন ব্যবহার করা হয়। নিচে একটি ক্লায়েন্ট সাইড কোড দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO Custom Events</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>Socket.IO Custom Events Example</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="sendNewUserEvent()">Send</button>
<p id="welcomeMessage"></p>
<script>
// Socket.IO সার্ভারে সংযোগ করা
const socket = io();
// ক্লিক করলে 'new user' ইভেন্ট পাঠানো
function sendNewUserEvent() {
const name = document.getElementById('nameInput').value;
socket.emit('new user', { name: name });
}
// সার্ভার থেকে 'welcome' কাস্টম ইভেন্ট শোনা
socket.on('welcome', function(message) {
document.getElementById('welcomeMessage').textContent = message;
});
</script>
</body>
</html>এখানে, ক্লায়েন্ট যখন Send বোতামটি ক্লিক করবে, তখন new user ইভেন্ট সার্ভারে পাঠানো হবে। সার্ভার থেকে একটি welcome ইভেন্ট ফিরে আসবে এবং তা ক্লায়েন্টে দেখানো হবে।
৩. কাস্টম ইভেন্টের মাধ্যমে একাধিক ডেটা পাঠানো
Socket.IO তে আপনি কাস্টম ইভেন্টের মাধ্যমে একাধিক ডেটা পাঠাতে পারেন। উদাহরণস্বরূপ, নিচে আমরা user details নামে একটি কাস্টম ইভেন্ট তৈরি করব এবং তা একটি অবজেক্টের মাধ্যমে পাঠাব।
Server Side:
// 'user details' ইভেন্ট হ্যান্ডল করা
socket.on('user details', (data) => {
console.log('User Details:', data);
// এখানে ডেটা পুনরায় ক্লায়েন্টে পাঠানো
socket.emit('details received', `User details received: ${data.name}, ${data.age}`);
});Client Side:
// 'user details' ইভেন্ট পাঠানো
socket.emit('user details', { name: 'John', age: 30 });
// 'details received' ইভেন্ট শোনা
socket.on('details received', function(message) {
console.log(message);
});এখানে, ক্লায়েন্ট user details ইভেন্ট সার্ভারে পাঠাবে যা একটি অবজেক্ট হিসেবে name এবং age ডেটা বহন করে। সার্ভার সেই তথ্য গ্রহণ করে এবং details received ইভেন্ট পাঠিয়ে ক্লায়েন্টকে নিশ্চিত করে।
৪. কাস্টম ইভেন্টের মাধ্যমে একাধিক ক্লায়েন্টে ডেটা পাঠানো
Socket.IO তে আপনি কাস্টম ইভেন্টের মাধ্যমে একাধিক ক্লায়েন্টে ডেটা পাঠাতে পারেন। সার্ভার থেকে একটি ইভেন্টে সমস্ত সংযুক্ত ক্লায়েন্টকে ডেটা পাঠাতে io.emit ব্যবহার করা হয়।
Server Side (Multiple Clients):
// কাস্টম ইভেন্ট 'broadcast' হ্যান্ডল করা
io.on('connection', (socket) => {
console.log('A user connected');
// ক্লায়েন্ট থেকে 'send broadcast' ইভেন্ট পাওয়া
socket.on('send broadcast', (message) => {
// সমস্ত ক্লায়েন্টে 'broadcast message' ইভেন্ট পাঠানো
io.emit('broadcast message', message);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});Client Side:
// 'send broadcast' ইভেন্ট পাঠানো
socket.emit('send broadcast', 'Hello, everyone!');
// 'broadcast message' শোনা
socket.on('broadcast message', function(message) {
console.log('Broadcast message: ' + message);
});এখানে, একটি ক্লায়েন্ট যখন send broadcast ইভেন্ট পাঠায়, সার্ভার তা সমস্ত সংযুক্ত ক্লায়েন্টে broadcast message ইভেন্টের মাধ্যমে পাঠিয়ে দেয়।
সারসংক্ষেপ
- Socket.IO তে কাস্টম ইভেন্ট তৈরি করা এবং ডেটা আদান-প্রদান করা খুবই সহজ।
socket.emitব্যবহার করে কাস্টম ইভেন্ট পাঠানো এবংsocket.onব্যবহার করে কাস্টম ইভেন্ট শোনা যায়।- Socket.IO তে আপনি একাধিক ক্লায়েন্টে ডেটা পাঠাতে পারেন এবং কাস্টম ইভেন্টের মাধ্যমে জটিল ইন্টারঅ্যাকশন তৈরি করতে পারেন।
এই কাস্টম ইভেন্টের সাহায্যে আপনি ক্লায়েন্ট ও সার্ভারের মধ্যে অত্যন্ত কার্যকর যোগাযোগ ব্যবস্থা তৈরি করতে পারবেন।
Socket.IO এর মাধ্যমে emit এবং on এর সাহায্যে ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান করা হয়। emit ফাংশন ডেটা পাঠানোর জন্য ব্যবহৃত হয়, এবং on ফাংশন ডেটা গ্রহণ করার জন্য ব্যবহৃত হয়। এটি ইভেন্ট-ভিত্তিক পদ্ধতিতে কাজ করে, যেখানে নির্দিষ্ট ইভেন্ট ট্রিগার করা হয় এবং ডেটা পাঠানো হয় বা গ্রহণ করা হয়।
এখানে emit এবং on ব্যবহার করে ডেটা আদান-প্রদান করার একটি উদাহরণ দেওয়া হলো:
1. সার্ভার সাইড (Node.js)
socket.emit() এবং socket.on() এর মাধ্যমে সার্ভার সাইডে ডেটা পাঠানো এবং গ্রহণ করা যায়।
সার্ভার সাইড কোড:
const http = require('http');
const socketIo = require('socket.io');
// HTTP সার্ভার তৈরি করা
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Socket.IO Server');
});
// Socket.IO সার্ভার তৈরি করা
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('A user connected');
// ক্লায়েন্টে ডেটা পাঠানো (emit)
socket.emit('welcomeMessage', 'Welcome to the Socket.IO Server!');
// ক্লায়েন্ট থেকে ডেটা গ্রহণ করা (on)
socket.on('clientMessage', (data) => {
console.log('Received from client: ' + data);
});
// ক্লায়েন্ট ডিসকানেক্ট হলে
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
// সার্ভার 3000 পোর্টে চলবে
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});- এখানে,
socket.emit('welcomeMessage', 'Welcome to the Socket.IO Server!')সার্ভার থেকে ক্লায়েন্টে একটি ওয়েলকাম মেসেজ পাঠাচ্ছে। socket.on('clientMessage', callback)ব্যবহার করে ক্লায়েন্ট থেকে কোনো ডেটা গ্রহণ করা হচ্ছে এবং সেটি কনসোলে প্রদর্শন করা হচ্ছে।
2. ক্লায়েন্ট সাইড (HTML + JavaScript)
ক্লায়েন্ট সাইডে socket.emit() এবং socket.on() ব্যবহার করে সার্ভার থেকে ডেটা গ্রহণ এবং পাঠানো যায়।
ক্লায়েন্ট সাইড কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO Client</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>Socket.IO Client</h1>
<div id="messages"></div>
<button onclick="sendMessage()">Send Message to Server</button>
<script>
// সার্ভারের সাথে কানেক্ট করা
var socket = io();
// সার্ভার থেকে ডেটা গ্রহণ করা
socket.on('welcomeMessage', function (data) {
document.getElementById('messages').innerHTML = data;
});
// সার্ভারে ডেটা পাঠানো
function sendMessage() {
socket.emit('clientMessage', 'Hello from the client!');
}
</script>
</body>
</html>socket.on('welcomeMessage', callback)সার্ভার থেকে পাঠানো ওয়েলকাম মেসেজ গ্রহণ করে এবংdocument.getElementById('messages').innerHTMLদিয়ে HTML পৃষ্ঠায় প্রদর্শন করে।socket.emit('clientMessage', 'Hello from the client!')ক্লায়েন্ট থেকে সার্ভারে একটি মেসেজ পাঠায়।
3. ফ্লো এবং ব্যাখ্যা:
- ক্লায়েন্ট সার্ভারে কানেক্ট হওয়া: যখন ক্লায়েন্ট প্রথম সার্ভারের সাথে কানেক্ট করে,
connectionইভেন্টটি ট্রিগার হয় এবং একটি নতুনsocketতৈরি হয়। - ডেটা পাঠানো (emit): সার্ভার
socket.emit()ব্যবহার করে ক্লায়েন্টকে একটি মেসেজ পাঠায়। উদাহরণস্বরূপ, সার্ভার'welcomeMessage'ইভেন্টের মাধ্যমে ক্লায়েন্টে মেসেজ পাঠাচ্ছে। - ডেটা গ্রহণ (on): ক্লায়েন্ট
socket.on()ব্যবহার করে সার্ভার থেকে পাঠানো ডেটা গ্রহণ করে এবং সেটি কনসোলে বা HTML পৃষ্ঠায় প্রদর্শন করে। উদাহরণস্বরূপ, ক্লায়েন্ট'welcomeMessage'ইভেন্টে সার্ভারের মেসেজ গ্রহণ করছে। - ক্লায়েন্ট থেকে ডেটা পাঠানো (emit): ক্লায়েন্ট
socket.emit()ব্যবহার করে সার্ভারে মেসেজ পাঠায়। উদাহরণস্বরূপ, ক্লায়েন্ট'clientMessage'ইভেন্টে একটি মেসেজ পাঠাচ্ছে। - ক্লায়েন্ট থেকে ডেটা গ্রহণ (on): সার্ভার
socket.on()ব্যবহার করে ক্লায়েন্ট থেকে পাঠানো ডেটা গ্রহণ করে এবং সেটি কনসোলে প্রদর্শন করে।
সারসংক্ষেপ:
socket.emit(): ডেটা পাঠানোর জন্য ব্যবহৃত হয়, যেমন সার্ভার ক্লায়েন্টে মেসেজ পাঠানো বা ক্লায়েন্ট সার্ভারে ডেটা পাঠানো।socket.on(): ডেটা গ্রহণ করার জন্য ব্যবহৃত হয়, যেমন ক্লায়েন্ট সার্ভার থেকে মেসেজ গ্রহণ করা বা সার্ভার ক্লায়েন্ট থেকে মেসেজ গ্রহণ করা।
এইভাবে, emit এবং on এর মাধ্যমে আমরা সহজেই Socket.IO এর সাহায্যে ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা আদান-প্রদান করতে পারি।
Socket.IO ব্যবহার করে ইভেন্টগুলির মাধ্যমে Text, JSON, এবং Binary Data পাঠানো যায়। ইভেন্ট-ভিত্তিক যোগাযোগ মডেলটি আপনাকে বিভিন্ন ধরনের ডেটা পাঠাতে এবং গ্রহণ করতে সহায়তা করে। এটি রিয়েল-টাইম অ্যাপ্লিকেশনগুলোতে বিভিন্ন ধরনের ডেটা পরিচালনা করার জন্য গুরুত্বপূর্ণ।
নিচে আমরা দেখবো কীভাবে Socket.IO ব্যবহার করে ইভেন্টের মাধ্যমে Text, JSON, এবং Binary Data পাঠানো যায়।
1. Text Data পাঠানো
Text ডেটা সাধারাণত স্ট্রিং আকারে থাকে এবং এটি সবচেয়ে সাধারণ এবং সহজে প্রেরিত ডেটা। Socket.IO এর মাধ্যমে একটি সাধারণ টেক্সট ইভেন্ট পাঠানোর উদাহরণ:
Server-Side (Node.js)
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer((req, res) => {
res.end('Hello, Socket.IO!');
});
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('A user connected');
// Text Data পাঠানো
socket.emit('message', 'Hello from the server!');
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});Client-Side (HTML + JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO Example</title>
<script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>
<script>
const socket = io('http://localhost:3000');
// Text Data গ্রহণ করা
socket.on('message', (data) => {
console.log('Received message:', data);
});
</script>
</head>
<body>
<h1>Socket.IO Example</h1>
</body>
</html>এখানে, সার্ভার একটি message ইভেন্ট পাঠাচ্ছে এবং ক্লায়েন্ট সেই ইভেন্ট গ্রহণ করে এবং টেক্সট ডেটা কনসোল লগে দেখাচ্ছে।
2. JSON Data পাঠানো
JSON ডেটা একটি জনপ্রিয় ডেটা ফরম্যাট যা সহজেই পাঠানো এবং গ্রহণ করা যায়। Socket.IO JSON ডেটা পাঠাতে এবং গ্রহণ করতে সহজেই কাজ করে।
Server-Side (Node.js)
io.on('connection', (socket) => {
console.log('A user connected');
// JSON Data পাঠানো
const jsonData = { name: 'John', age: 30 };
socket.emit('userData', jsonData);
socket.on('disconnect', () => {
console.log('User disconnected');
});
});Client-Side (HTML + JavaScript)
<script>
const socket = io('http://localhost:3000');
// JSON Data গ্রহণ করা
socket.on('userData', (data) => {
console.log('Received JSON data:', data);
});
</script>এখানে, সার্ভার একটি userData ইভেন্টের মাধ্যমে JSON ডেটা পাঠাচ্ছে, এবং ক্লায়েন্ট সেই JSON ডেটা গ্রহণ করে এবং কনসোল লগে দেখাচ্ছে।
3. Binary Data পাঠানো
Socket.IO binary data যেমন Buffer, ArrayBuffer বা Blob সমর্থন করে। এটি সাধারণত বড় আকারের ডেটা যেমন ছবি, ভিডিও বা অন্য কোনো বাইনারি ফাইল পাঠানোর জন্য ব্যবহৃত হয়।
Server-Side (Node.js)
const fs = require('fs');
io.on('connection', (socket) => {
console.log('A user connected');
// Binary Data পাঠানো (ফাইল থেকে)
const imageBuffer = fs.readFileSync('image.jpg');
socket.emit('imageData', imageBuffer);
socket.on('disconnect', () => {
console.log('User disconnected');
});
});Client-Side (HTML + JavaScript)
<script>
const socket = io('http://localhost:3000');
// Binary Data গ্রহণ করা
socket.on('imageData', (data) => {
console.log('Received binary data:', data);
// এখানে আপনি imageBuffer বা অন্য Binary Data দিয়ে কিছু কাজ করতে পারেন
});
</script>এখানে, সার্ভার একটি imageData ইভেন্টের মাধ্যমে বাইনারি ডেটা (এখানে একটি ছবি) পাঠাচ্ছে এবং ক্লায়েন্ট সেই বাইনারি ডেটা গ্রহণ করছে। সাধারণত, বাইনারি ডেটা ব্যবহার করে আপনি ফাইল আপলোড বা ডাউনলোড করতে পারেন।
সারাংশ
- Text Data: সাধারণ স্ট্রিং ডেটা, যা সরাসরি পাঠানো এবং গ্রহণ করা হয়।
- JSON Data: একটি স্ট্যান্ডার্ড ডেটা ফরম্যাট যা অবজেক্ট হিসেবে পাঠানো হয় এবং JSON.stringify ও JSON.parse ব্যবহার করে সহজে প্রক্রিয়া করা যায়।
- Binary Data: বাইনারি ডেটা (যেমন ছবি, অডিও বা ভিডিও ফাইল), যা বাইনারি আকারে পাঠানো হয় এবং সাধারণত Buffer বা ArrayBuffer ব্যবহার করে পাঠানো হয়।
Socket.IO বিভিন্ন ধরনের ডেটা পাঠাতে এবং গ্রহণ করতে সক্ষম, এবং এটি রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশনে ডেটার ধরণ অনুযায়ী ইভেন্ট ভিত্তিক যোগাযোগ পরিচালনা করার জন্য খুবই উপকারী।
Client এবং Server এর মধ্যে দুই-দিকের ডেটা আদান-প্রদান এমন একটি প্রক্রিয়া যেখানে ডেটা ক্লায়েন্ট থেকে সার্ভারে এবং সার্ভার থেকে ক্লায়েন্টে যেতে পারে, তা রিয়েল-টাইম এবং দ্বৈত দিকের (ডুয়াল-ডিরেকশনাল) যোগাযোগে ঘটে। এটি ওয়েব অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে যখন দ্রুত ইন্টারঅ্যাকশন এবং ডেটা আপডেট প্রয়োজন।
এটির বাস্তব উদাহরণ হিসেবে WebSockets, Socket.IO, এবং AJAX প্রযুক্তির ব্যবহার হয়।
1. WebSockets
WebSockets একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে একটানা, পূর্ণ-ডুয়াল-ডিরেকশনাল যোগাযোগ স্থাপন করে। একবার কানেকশন স্থাপিত হলে, ক্লায়েন্ট এবং সার্ভার পরস্পর ডেটা আদান-প্রদান করতে পারে যেকোনো সময়, এটি HTTP এর চেয়ে অনেক দ্রুত এবং স্থিতিশীল।
উদাহরণ:
একটি ওয়েব চ্যাট অ্যাপ্লিকেশন যেখানে ব্যবহারকারী একটি মেসেজ পাঠায় এবং সার্ভার তা অবিলম্বে অন্য ব্যবহারকারীর স্ক্রীনে পাঠায়।
উদাহরণ কোড (JavaScript WebSockets):
// ক্লায়েন্ট সাইড WebSocket কানেকশন
var socket = new WebSocket("ws://localhost:3000");
socket.onopen = function() {
console.log("Connection established.");
socket.send("Hello Server!"); // ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো
};
socket.onmessage = function(event) {
console.log("Received from server: " + event.data); // সার্ভার থেকে ক্লায়েন্টে ডেটা গ্রহণ
};
// কানেকশন বন্ধ হলে
socket.onclose = function() {
console.log("Connection closed.");
};2. Socket.IO
Socket.IO একটি লাইব্রেরি যা WebSockets সহ অন্যান্য প্রযুক্তি ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে দুই-দিকের (ডুয়াল-ডিরেকশনাল) যোগাযোগ স্থাপন করে। এটি WebSockets এর উপর তৈরি হলেও, যদি WebSockets সমর্থিত না থাকে তবে এটি পোলিং প্রযুক্তি ব্যবহার করে কানেকশন স্থাপন করতে পারে। এর মাধ্যমে ইভেন্ট-ভিত্তিক ডেটা আদান-প্রদান করা সম্ভব।
উদাহরণ:
চ্যাট অ্যাপ্লিকেশন যেখানে ব্যবহারকারী একটি বার্তা পাঠায় এবং তা অন্য ব্যবহারকারীকে অবিলম্বে পৌঁছায়।
উদাহরণ কোড (Node.js with Socket.IO):
// সার্ভার সাইড (Node.js with Express and Socket.IO)
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('A user connected');
// ক্লায়েন্ট থেকে বার্তা গ্রহণ
socket.on('chat message', (msg) => {
console.log('Message: ' + msg);
// সার্ভার থেকে ক্লায়েন্টে বার্তা পাঠানো
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});ক্লায়েন্ট সাইড (HTML + JavaScript with Socket.IO):
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
// বার্তা পাঠানো
function sendMessage() {
var message = document.getElementById('message').value;
socket.emit('chat message', message);
document.getElementById('message').value = '';
}
// সার্ভার থেকে বার্তা গ্রহণ করা
socket.on('chat message', function(msg) {
var node = document.createElement("LI");
var textnode = document.createTextNode(msg);
node.appendChild(textnode);
document.getElementById('messages').appendChild(node);
});
</script>
</head>
<body>
<h1>Socket.IO Chat</h1>
<ul id="messages"></ul>
<input id="message" autocomplete="off">
<button onclick="sendMessage()">Send</button>
</body>
</html>3. AJAX (Asynchronous JavaScript and XML)
AJAX প্রযুক্তি ওয়েব পেজের মধ্যে আনসিঙ্ক্রোনাস (Asynchronous) ডেটা আদান-প্রদান সম্ভব করে। AJAX শুধুমাত্র ক্লায়েন্ট সাইডে কাজ করে, যেখানে ক্লায়েন্ট সার্ভারে ডেটা পাঠায় এবং সার্ভার থেকে সাড়া পাওয়ার পর পেজ রিফ্রেশ না করে ডেটা আপডেট হয়। এটি দুই-দিকের যোগাযোগের জন্য ব্যবহৃত হলেও, এটি সাধারণত "request-response" পদ্ধতিতে কাজ করে।
উদাহরণ:
একটি সাইট যেখানে ব্যবহারকারী একটি পণ্য কিনলে, সেটি সিস্টেমে অবিলম্বে আপডেট হয়ে যায়।
উদাহরণ কোড (AJAX Request):
// AJAX মাধ্যমে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো
function sendData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "server_url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ productId: 123, quantity: 1 }));
// সার্ভার থেকে রেসপন্স গ্রহণ করা
xhr.onload = function() {
if (xhr.status === 200) {
console.log("Server response:", xhr.responseText);
}
};
}4. HTTP/2 (Bidirectional Streams)
HTTP/2 উন্নত HTTP প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দুটি দিকের ডেটা আদান-প্রদান সমর্থন করে। HTTP/2-তে, streaming এবং server push এর মাধ্যমে ডেটা একাধিক অ্যাক্সেস পয়েন্টে পাঠানো সম্ভব।
সারসংক্ষেপ
- WebSockets এবং Socket.IO দুটি শক্তিশালী প্রযুক্তি যা ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম, ডুয়াল-ডিরেকশনাল যোগাযোগে ব্যবহৃত হয়।
- AJAX সাধারণত ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানোর জন্য ব্যবহৃত হয় এবং এটি "request-response" ভিত্তিতে কাজ করে।
- HTTP/2 এ দুটি দিকের ডেটা আদান-প্রদান এবং streaming সুবিধা প্রদান করে।
এগুলো সবই আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিতে গুরুত্বপূর্ণ ভূমিকা পালন করে, যেখানে ডেটার দ্রুত এবং স্থিতিশীল আদান-প্রদান প্রয়োজন।
Read more
