रीयल-टाइम चैट अनुप्रयोग बनाना
FastAPI में WebSocket की क्षमताओं को प्रदर्शित करने वाला सरल रीयल-टाइम चैट अनुप्रयोग बनाएँ।
रीयल-टाइम चैट अनुप्रयोग बनाना, CoddyKit पर FastAPI बैकएंड डेवलपमेंट बूटकैंप का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह FastAPI बैकएंड डेवलपमेंट बूटकैंप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। FastAPI बैकएंड डेवलपमेंट बूटकैंप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Real-time Chat App का अवलोकन
अपने स्वयं के real-time chat application के निर्माण में आपका स्वागत है! यह lesson FastAPI में WebSockets के बारे में अब तक सीखी गई सभी बातों को एक साथ लाता है।
- हम एक FastAPI server बनाएँगे, जो कई chat connections का प्रबंधन करेगा।
- Clients WebSockets के माध्यम से connect होकर तुरंत messages भेज और प्राप्त कर सकेंगे।
- आप server-side (FastAPI) और एक सरल client-side (HTML/JavaScript) implementation, दोनों देखेंगे।
Real-time communication को काम करते हुए देखने के लिए तैयार हो जाइए!
Chat Connections का प्रबंधन
Chat application के लिए हमारे server को सभी active WebSocket connections का रिकॉर्ड रखना होगा। जब कोई user message भेजेगा, तो server उसे बाकी सभी users को broadcast करेगा।
Connected clients को जोड़ने, हटाने और messages broadcast करने के लिए हम एक सरल ConnectionManager class का उपयोग करेंगे।
from typing import List
from fastapi import WebSocket
class ConnectionManager:
def __init__(self):
self.active_connections: List[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def send_personal_message(self, message: str, websocket: WebSocket):
await websocket.send_text(message)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)FastAPI WebSocket Endpoint
अब वह FastAPI endpoint बनाएँ, जिससे clients connect करेंगे। यह endpoint हमारे ConnectionManager का उपयोग करेगा।
जब कोई client connect करेगा, तो हम उसे जोड़ेंगे। जब वह message भेजेगा, तो हम उसे broadcast करेंगे। यदि वह disconnect हो जाएगा, तो हम उसे हटा देंगे।
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
# ... ConnectionManager class from previous scene ...
app = FastAPI()
manager = ConnectionManager()
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
message = f"Client #{client_id} says: {data}"
await manager.broadcast(message)
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"Client #{client_id} left the chat")Client-Side HTML Structure
हमारे chat application को एक सरल user interface की आवश्यकता है। Messages भेजने के लिए हम एक input field और उन्हें दिखाने के लिए एक div बनाने हेतु basic HTML का उपयोग करेंगे।
यह हमारे client-side interaction की नींव है।
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
</head>
<body>
<h1>FastAPI Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'>
</ul>
</body>
</html>JavaScript से Connect करना
अब अपने HTML में JavaScript जोड़कर FastAPI WebSocket server से connect करें। Page load होते ही हम connection खोल देंगे।
यदि आपका server address अलग है, तो localhost:8000 को उससे बदलना याद रखें!
<script>
var ws = new WebSocket("ws://localhost:8000/ws/1");
ws.onopen = function(event) {
console.log("Connected to WebSocket server!");
};
ws.onclose = function(event) {
console.log("Disconnected from WebSocket server.");
};
ws.onerror = function(error) {
console.error("WebSocket Error: ", error);
};
</script>Client से Messages भेजना
Users को message लिखकर उसे server पर भेजने में सक्षम होना चाहिए। हम एक JavaScript function बनाएँगे, जो input प्राप्त करके उसे WebSocket connection के माध्यम से भेजेगा।
यह function form submit होने पर call किया जाता है।
<script>
// ... WebSocket connection setup ...
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>Messages प्राप्त करना और दिखाना
Chat application का मुख्य भाग messages प्राप्त करना और उन्हें दिखाना है। हम ws.onmessage event handler लागू करेंगे, जो हमारी list में नए messages जोड़ देगा।
<script>
// ... WebSocket connection & sendMessage function ...
ws.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
var content = document.createTextNode(event.data);
message.appendChild(content);
messages.appendChild(message);
};
</script>पूरा FastAPI Chat Server
यह हमारे FastAPI chat server का पूरा Python code है। इसे main.py के रूप में save करें और uvicorn main:app --reload का उपयोग करके चलाएँ।
यह server connections के लिए listen करेगा, messages broadcast करेगा और users के join या leave करने की सूचना देगा।
from typing import List
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
class ConnectionManager:
def __init__(self):
self.active_connections: List[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)
app = FastAPI()
manager = ConnectionManager()
html = """
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
</head>
<body>
<h1>FastAPI Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
<ul id='messages'>
</ul>
<script>
var ws = new WebSocket("ws://localhost:8000/ws/1"); // Client ID is 1 for this example
ws.onopen = function(event) {
console.log("Connected to WebSocket server!");
};
ws.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
var content = document.createTextNode(event.data);
message.appendChild(content);
messages.appendChild(message);
};
ws.onclose = function(event) {
console.log("Disconnected from WebSocket server.");
};
ws.onerror = function(error) {
console.error("WebSocket Error: ", error);
};
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>
</body>
</html>
"""
@app.get("/")
async def get():
return HTMLResponse(html)
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
await manager.broadcast(f"Client #{client_id} joined the chat")
try:
while True:
data = await websocket.receive_text()
message = f"Client #{client_id} says: {data}"
await manager.broadcast(message)
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"Client #{client_id} left the chat")त्वरित Chat Logic जाँच
आपने एक basic chat app बना लिया है! ConnectionManager के broadcast method और FastAPI endpoint के logic पर विचार करें।
यदि Client A server को message भेजता है, तो Client B तक उसे पहुँचाने के लिए आगे क्या होता है?
Chat App का सारांश
बधाई हो! आपने FastAPI WebSockets का उपयोग करके सफलतापूर्वक एक basic real-time chat application बना लिया है।
- आपने
ConnectionManagerके साथ कई active WebSocket connections का प्रबंधन करना सीखा। - आपने incoming और outgoing messages संभालने के लिए FastAPI WebSocket endpoint लागू किया।
- आपने connect करने, chat messages भेजने और प्राप्त करने के लिए एक सरल HTML/JavaScript client बनाया।
यह project real-time communication के लिए WebSockets की शक्ति दिखाता है। अब आप user authentication, persistent chat history और अधिक मजबूत UI/UX जैसी सुविधाएँ जोड़ सकते हैं।
एआई शिक्षक के साथ FastAPI बैकएंड डेवलपमेंट बूटकैंप सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 21
- पाठ
- 84
अक्सर पूछे जाने वाले प्रश्न
क्या “रीयल-टाइम चैट अनुप्रयोग बनाना” पाठ निःशुल्क है?
हाँ — FastAPI बैकएंड डेवलपमेंट बूटकैंप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “रीयल-टाइम चैट अनुप्रयोग बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। FastAPI बैकएंड डेवलपमेंट बूटकैंप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“रीयल-टाइम चैट अनुप्रयोग बनाना” में मैं क्या सीखूँगा?
FastAPI में WebSocket की क्षमताओं को प्रदर्शित करने वाला सरल रीयल-टाइम चैट अनुप्रयोग बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ FastAPI बैकएंड डेवलपमेंट बूटकैंप का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या FastAPI बैकएंड डेवलपमेंट बूटकैंप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर FastAPI बैकएंड डेवलपमेंट बूटकैंप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“रीयल-टाइम चैट अनुप्रयोग बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस FastAPI बैकएंड डेवलपमेंट बूटकैंप पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर FastAPI बैकएंड डेवलपमेंट बूटकैंप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- WebSocket प्रोटोकॉल की मूल बातें
- FastAPI में WebSockets लागू करना
- रीयल-टाइम चैट अनुप्रयोग बनाना
- Pub/Sub बैकप्लेन से WebSockets का स्केलिंग