WebSocket এর মাধ্যমে Real-time Data Transfer

KoaJS এবং WebSocket Integration - কোআজেএস (KoaJS) - Web Development

248

WebSocket হল একটি যোগাযোগ প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে পূর্ণ দ্বিমুখী (bi-directional) যোগাযোগ প্রতিষ্ঠা করে, যা HTTP প্রোটোকলের তুলনায় অনেক দ্রুত এবং কার্যকরী। WebSocket ব্যবহার করলে, ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা ট্রান্সফার করা যায়, যেমন চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্রিমিং, গেমস, অথবা রিয়েল-টাইম ড্যাশবোর্ড।

KoaJS একটি HTTP সার্ভার ফ্রেমওয়ার্ক, তবে আপনি WebSocket ব্যবহার করার জন্য ws অথবা koa-websocket প্যাকেজ ব্যবহার করে KoaJS-এ WebSocket সাপোর্ট যোগ করতে পারেন। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে KoaJS-এ WebSocket কনফিগার এবং রিয়েল-টাইম ডেটা ট্রান্সফার করা যায়।


১. WebSocket ব্যবহার করার জন্য koa-websocket ইনস্টল করা

koa-websocket হল KoaJS-এর জন্য একটি WebSocket মিডলওয়্যার, যা WebSocket কানেকশন সহজে তৈরি এবং পরিচালনা করতে সহায়তা করে।

১.১. koa-websocket ইনস্টল করা

npm install koa-websocket

২. KoaJS এবং WebSocket কনফিগারেশন

এখন, আমরা দেখব কিভাবে KoaJS-এ WebSocket কনফিগার করতে হয়।

২.১. KoaJS-এ WebSocket সেটআপ করা

const Koa = require('koa');
const Router = require('koa-router');
const ws = require('koa-websocket');  // koa-websocket প্যাকেজ

const app = ws(new Koa());  // Koa অ্যাপকে WebSocket দিয়ে র‍্যাপ করা
const router = new Router();

// WebSocket কানেকশন হ্যান্ডলিং
app.ws.use((ctx) => {
  console.log('Client connected to WebSocket');
  
  // ক্লায়েন্ট থেকে মেসেজ পাওয়া
  ctx.websocket.on('message', (message) => {
    console.log('Received message:', message);
    
    // ক্লায়েন্টকে রেসপন্স পাঠানো
    ctx.websocket.send(`Server says: ${message}`);
  });

  // ক্লায়েন্ট কানেকশন বন্ধ হওয়ার সময়
  ctx.websocket.on('close', () => {
    console.log('Client disconnected');
  });
});

// সাধারণ HTTP রাউট
router.get('/', async (ctx) => {
  ctx.body = 'Welcome to Koa WebSocket example!';
});

app.use(router.routes()).use(router.allowedMethods());

// অ্যাপ চালু করা
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

এখানে:

  • app.ws.use(...) ব্লকটি WebSocket কানেকশন হ্যান্ডল করছে। যখন একটি ক্লায়েন্ট কানেক্ট করবে, তখন message ইভেন্টের মাধ্যমে ক্লায়েন্ট থেকে মেসেজ গ্রহণ করা হবে এবং send() মেথডের মাধ্যমে ক্লায়েন্টকে রেসপন্স পাঠানো হবে।
  • ctx.websocket ব্যবহার করে WebSocket কনেকশন পরিচালনা করা হচ্ছে।

৩. ক্লায়েন্ট সাইড WebSocket কোড

ক্লায়েন্ট সাইড থেকে WebSocket কানেকশন তৈরি করতে, সাধারণ WebSocket API ব্যবহার করা হয়। এখানে একটি উদাহরণ দেওয়া হল:

৩.১. ক্লায়েন্ট সাইড JavaScript (WebSocket Client)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Koa WebSocket Example</title>
</head>
<body>
  <h1>Koa WebSocket Client</h1>
  <input type="text" id="messageInput" placeholder="Type a message" />
  <button id="sendButton">Send</button>

  <script>
    // WebSocket কানেকশন তৈরি করা
    const socket = new WebSocket('ws://localhost:3000');

    // WebSocket কানেকশন ওপেন হলে
    socket.onopen = () => {
      console.log('WebSocket connection established');
    };

    // সার্ভার থেকে মেসেজ পাওয়া
    socket.onmessage = (event) => {
      console.log('Message from server:', event.data);
    };

    // WebSocket কানেকশন বন্ধ হলে
    socket.onclose = () => {
      console.log('WebSocket connection closed');
    };

    // মেসেজ পাঠানোর জন্য
    document.getElementById('sendButton').addEventListener('click', () => {
      const message = document.getElementById('messageInput').value;
      if (message) {
        socket.send(message);  // মেসেজ পাঠানো
      }
    });
  </script>
</body>
</html>

এখানে, WebSocket API ব্যবহার করে ক্লায়েন্ট সার্ভারের সাথে কানেক্ট হচ্ছে। আপনি একটি মেসেজ টাইপ করে "Send" বাটনে ক্লিক করলে, তা সার্ভারে পাঠানো হবে এবং সার্ভার থেকে রেসপন্সও গ্রহণ করা যাবে।


৪. Real-time Data Transfer উদাহরণ

এখন, আপনার WebSocket সার্ভার এবং ক্লায়েন্ট কনফিগার করা হয়ে গেছে। আপনি সহজেই রিয়েল-টাইম ডেটা ট্রান্সফার করতে পারবেন। উদাহরণস্বরূপ, একটি চ্যাট অ্যাপ্লিকেশন তৈরি করা:

৪.১. চ্যাট অ্যাপ্লিকেশন উদাহরণ

KoaJS সার্ভার (Server-side):

const Koa = require('koa');
const Router = require('koa-router');
const ws = require('koa-websocket');
const app = ws(new Koa());
const router = new Router();

app.ws.use((ctx) => {
  // ক্লায়েন্ট থেকে মেসেজ পাওয়া
  ctx.websocket.on('message', (message) => {
    // সকল কানেক্টেড ক্লায়েন্টকে মেসেজ পাঠানো
    app.ws.clients.forEach(client => {
      if (client !== ctx.websocket) {
        client.send(`New message: ${message}`);
      }
    });
  });

  // কানেকশন বন্ধ হলে
  ctx.websocket.on('close', () => {
    console.log('A client disconnected');
  });
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

ক্লায়েন্ট (Client-side):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Chat</title>
</head>
<body>
  <h1>Chat with WebSocket</h1>
  <div id="messages"></div>
  <input type="text" id="messageInput" placeholder="Type a message" />
  <button id="sendButton">Send</button>

  <script>
    const socket = new WebSocket('ws://localhost:3000');
    const messagesDiv = document.getElementById('messages');

    socket.onmessage = (event) => {
      const message = document.createElement('div');
      message.textContent = event.data;
      messagesDiv.appendChild(message);
    };

    document.getElementById('sendButton').addEventListener('click', () => {
      const message = document.getElementById('messageInput').value;
      if (message) {
        socket.send(message);  // মেসেজ পাঠানো
      }
    });
  </script>
</body>
</html>

এখানে, সার্ভারটি একটি চ্যাট অ্যাপ্লিকেশন তৈরি করছে যেখানে সকল ক্লায়েন্টকে নতুন মেসেজ পাঠানো হচ্ছে।


সারাংশ

KoaJS-এ WebSocket এর মাধ্যমে real-time data transfer সম্ভব। koa-websocket মিডলওয়্যার ব্যবহার করে আপনি সহজে WebSocket কানেকশন তৈরি এবং পরিচালনা করতে পারেন। WebSocket ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম, দ্বিমুখী যোগাযোগের সুবিধা প্রদান করে, যা চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্রিমিং, এবং গেমসের মতো অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

Content added By
Promotion

Are you sure to start over?

Loading...