WebSocket এর মাধ্যমে Chat Application তৈরি করা

Web Development - ফাস্টএপিআই (FastAPI) - FastAPI এর সাথে WebSocket এবং Real-Time Communication
202

FastAPI তে WebSocket ব্যবহার করে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করা সহজ। WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দীর্ঘস্থায়ী কানেকশন তৈরি করে, যাতে ডেটা একযোগে পাঠানো এবং গ্রহণ করা সম্ভব হয়। এটি সাধারণ HTTP রিকোয়েস্ট/রেসপন্স পদ্ধতির তুলনায় অনেক দ্রুত এবং কার্যকরী, বিশেষ করে রিয়েল-টাইম অ্যাপ্লিকেশন যেমন চ্যাট সিস্টেমের জন্য।

এখানে আমরা দেখব কিভাবে FastAPI এবং WebSocket ব্যবহার করে একটি সাধারণ চ্যাট অ্যাপ্লিকেশন তৈরি করা যায়।


Step 1: FastAPI অ্যাপ তৈরি করা এবং WebSocket ইমপ্লিমেন্ট করা

প্রথমে FastAPI এবং WebSocket ইমপ্লিমেন্টেশন সেটআপ করা হবে।

WebSocket হ্যান্ডলার তৈরি করা

FastAPI তে WebSocket কানেকশন হ্যান্ডল করার জন্য WebSocket ক্লাস ব্যবহার করা হয়। এই ক্লাসের মাধ্যমে আপনি ক্লায়েন্টের সাথে একযোগে ডেটা আদান-প্রদান করতে পারবেন।

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

# WebSocket কানেকশন হ্যান্ডল করা
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()  # কানেকশন গ্রহণ
    try:
        while True:
            # ক্লায়েন্ট থেকে মেসেজ গ্রহণ করা
            message = await websocket.receive_text()
            # ক্লায়েন্টকে মেসেজ পাঠানো
            await websocket.send_text(f"You wrote: {message}")
    except WebSocketDisconnect:
        print("Client disconnected")

এখানে:

  • /ws: WebSocket এর জন্য URL রুট।
  • await websocket.accept(): WebSocket কানেকশন গ্রহণ করা।
  • await websocket.receive_text(): ক্লায়েন্ট থেকে পাঠানো মেসেজ গ্রহণ করা।
  • await websocket.send_text(): ক্লায়েন্টকে মেসেজ পাঠানো।

WebSocket কানেকশন স্থাপন

এখন, FastAPI তে একটি WebSocket হ্যান্ডলার তৈরি করা হয়েছে যা ক্লায়েন্টের কাছ থেকে মেসেজ গ্রহণ করে এবং সেগুলি পুনরায় পাঠিয়ে দেয়।


Step 2: WebSocket Chat Application with Multiple Clients

একাধিক ক্লায়েন্টের মধ্যে চ্যাটিং সিস্টেম তৈরি করতে হলে, আমাদের connection management করতে হবে। FastAPI তে WebSocket কানেকশনগুলো ট্র্যাক করতে একটি তালিকা (list) ব্যবহার করা যেতে পারে।

Multiple Clients WebSocket Chat

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

# Active WebSocket clients ট্র্যাক করা
clients = []

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # WebSocket কানেকশন গ্রহণ
    await websocket.accept()
    clients.append(websocket)
    try:
        while True:
            # ক্লায়েন্ট থেকে মেসেজ গ্রহণ করা
            message = await websocket.receive_text()
            # সক্রিয় সব ক্লায়েন্টকে মেসেজ পাঠানো
            for client in clients:
                if client != websocket:
                    await client.send_text(f"New message: {message}")
    except WebSocketDisconnect:
        clients.remove(websocket)
        print("Client disconnected")

এখানে:

  • clients: সক্রিয় WebSocket ক্লায়েন্টদের একটি তালিকা, যেখানে সব ক্লায়েন্টের WebSocket অবজেক্ট রাখা হবে।
  • await client.send_text(): প্রতিটি ক্লায়েন্টকে মেসেজ পাঠানো হয়, যা অন্যান্য ক্লায়েন্টের কাছে পৌঁছাবে।
  • WebSocketDisconnect: ক্লায়েন্ট ডিসকানেক্ট হলে তা হ্যান্ডল করা হয়।

Step 3: Frontend (HTML + JavaScript) তৈরি করা

এখন, একটি HTML ফাইল তৈরি করে আমরা ক্লায়েন্ট সাইড থেকে WebSocket কানেকশন তৈরি করব এবং মেসেজ পাঠাবো।

HTML + JavaScript (Frontend)

<!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 Room</h1>
    <div id="messages"></div>
    <input type="text" id="message_input" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

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

        // মেসেজ রিসিভ করা
        socket.onmessage = function(event) {
            const messageDiv = document.getElementById("messages");
            const message = event.data;
            messageDiv.innerHTML += `<p>${message}</p>`;
        };

        // মেসেজ পাঠানো
        function sendMessage() {
            const messageInput = document.getElementById("message_input");
            const message = messageInput.value;
            socket.send(message);  // WebSocket সার্ভারে মেসেজ পাঠানো
            messageInput.value = '';  // ইনপুট ফিল্ড পরিষ্কার করা
        }
    </script>
</body>
</html>

এখানে:

  • WebSocket("ws://localhost:8000/ws"): FastAPI সার্ভারের WebSocket URL-এর মাধ্যমে কানেকশন স্থাপন।
  • socket.onmessage: WebSocket থেকে মেসেজ গ্রহণ এবং HTML ডকুমেন্টে তা দেখানো।
  • socket.send(): মেসেজ সার্ভারে পাঠানোর জন্য ব্যবহার করা হয়।

Step 4: Run the FastAPI Application

এখন FastAPI অ্যাপ্লিকেশনটি চালু করার জন্য Uvicorn ব্যবহার করতে হবে।

uvicorn main:app --reload

এটি আপনার FastAPI অ্যাপ্লিকেশন localhost:8000 তে চালু করবে।


Step 5: Test the Chat Application

  1. আপনার ব্রাউজারে index.html ফাইলটি খুলুন।
  2. একটি মেসেজ টাইপ করুন এবং "Send" বাটনে ক্লিক করুন।
  3. আরও একটি ব্রাউজার উইন্ডো খুলে একই পেজটি রিফ্রেশ করুন এবং দেখুন যে আপনি real-time মেসেজটি অন্য ক্লায়েন্টের কাছে দেখতে পাবেন।

FastAPI এবং WebSocket ব্যবহার করে খুব সহজেই একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করা যায়। এই অ্যাপ্লিকেশনটি multiple clients এর মধ্যে asynchronous ভাবে মেসেজ পাঠাতে এবং গ্রহণ করতে সক্ষম। FastAPI এর সাহায্যে আপনি দ্রুত এবং কার্যকরভাবে রিয়েল-টাইম যোগাযোগ সিস্টেম তৈরি করতে পারেন।

Content added By
Promotion
NEW SATT AI এখন আপনাকে সাহায্য করতে পারে।

Are you sure to start over?

Loading...