Membina Aplikasi Sembang Masa Nyata
Bangunkan aplikasi sembang masa nyata yang mudah untuk menunjukkan keupayaan WebSocket dalam FastAPI.
Membina Aplikasi Sembang Masa Nyata ialah pelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Kem Intensif Pembangunan Bahagian Belakang FastAPI merangkumi sejumlah 4 pelajaran.
Gambaran Keseluruhan Aplikasi Sembang Masa Nyata
Selamat datang untuk membina aplikasi sembang masa nyata anda sendiri! Pelajaran ini menghimpunkan semua yang telah kita pelajari tentang WebSockets dalam FastAPI.
- Kita akan mencipta pelayan FastAPI yang mengurus berbilang sambungan sembang.
- Klien akan bersambung melalui WebSockets untuk menghantar dan menerima mesej serta-merta.
- Anda akan melihat pelaksanaan pada bahagian pelayan (FastAPI) dan pelaksanaan ringkas pada bahagian klien (HTML/JavaScript).
Bersedialah untuk melihat komunikasi masa nyata beraksi!
Mengurus Sambungan Sembang
Untuk aplikasi sembang, pelayan kita perlu menjejaki semua sambungan WebSocket yang aktif. Apabila pengguna menghantar mesej, pelayan akan menyiarkannya kepada semua pengguna lain.
Kita akan menggunakan kelas ConnectionManager yang ringkas untuk mengendalikan penambahan, pengalihan keluar dan penyiaran mesej kepada klien yang disambungkan.
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)Titik Akhir WebSocket FastAPI
Sekarang mari kita cipta titik akhir FastAPI yang akan disambungkan oleh klien. Titik akhir ini akan menggunakan ConnectionManager kita.
Apabila klien bersambung, kita menambahkannya. Apabila klien menghantar mesej, kita menyiarkannya. Jika klien memutuskan sambungan, kita mengalih keluarnya.
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")Struktur HTML pada Bahagian Klien
Aplikasi sembang kita memerlukan antara muka pengguna yang ringkas. Kita akan menggunakan HTML asas untuk medan input bagi menghantar mesej dan elemen div untuk memaparkannya.
Ini ialah asas untuk interaksi pada bahagian klien.
<!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>Menyambung dengan JavaScript
Sekarang, mari tambahkan JavaScript pada HTML kita untuk menyambung kepada pelayan WebSocket FastAPI. Kita akan membuka sambungan sebaik sahaja halaman dimuatkan.
Ingat untuk menggantikan localhost:8000 dengan alamat pelayan anda jika berbeza!
<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>Menghantar Mesej daripada Klien
Pengguna perlu boleh menaip mesej dan menghantarnya kepada pelayan. Kita akan mencipta fungsi JavaScript yang menangkap input dan menghantarnya melalui sambungan WebSocket.
Fungsi ini dipanggil apabila borang dihantar.
<script>
// ... WebSocket connection setup ...
function sendMessage(event) {
var input = document.getElementById("messageText");
ws.send(input.value);
input.value = '';
event.preventDefault();
}
</script>Menerima dan Memaparkan Mesej
Inti pati aplikasi sembang ialah menerima dan memaparkan mesej. Kita akan melaksanakan pengendali peristiwa ws.onmessage untuk menambahkan mesej baharu pada senarai kita.
<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>Pelayan Sembang FastAPI Lengkap
Berikut ialah kod Python lengkap untuk pelayan sembang FastAPI kita. Simpan kod ini sebagai main.py dan jalankannya menggunakan uvicorn main:app --reload.
Pelayan ini akan mendengar sambungan, menyiarkan mesej serta memaklumkan apabila pengguna menyertai atau meninggalkan sembang.
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")Semakan Pantas Logik Sembang
Anda telah membina aplikasi sembang asas! Pertimbangkan kaedah broadcast milik ConnectionManager serta logik titik akhir FastAPI.
Jika Klien A menghantar mesej kepada pelayan, apakah yang berlaku seterusnya untuk memastikan Klien B menerimanya?
Ringkasan Aplikasi Sembang
Tahniah! Anda telah berjaya membina aplikasi sembang masa nyata asas menggunakan FastAPI WebSockets.
- Anda telah mempelajari cara mengurus berbilang sambungan WebSocket aktif dengan
ConnectionManager. - Anda telah melaksanakan titik akhir WebSocket FastAPI untuk mengendalikan mesej masuk dan keluar.
- Anda telah mencipta klien HTML/JavaScript ringkas untuk menyambung, menghantar dan menerima mesej sembang.
Projek ini menunjukkan keupayaan WebSockets untuk komunikasi masa nyata. Selepas ini, anda boleh menambah ciri seperti pengesahan pengguna, sejarah sembang berterusan dan antara muka pengguna/pengalaman pengguna yang lebih mantap.
Pelajari Kem Intensif Pembangunan Bahagian Belakang FastAPI dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 21
- Pelajaran
- 84
Soalan Lazim
Adakah pelajaran “Membina Aplikasi Sembang Masa Nyata” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI, termasuk “Membina Aplikasi Sembang Masa Nyata”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Kem Intensif Pembangunan Bahagian Belakang FastAPI merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membina Aplikasi Sembang Masa Nyata”?
Bangunkan aplikasi sembang masa nyata yang mudah untuk menunjukkan keupayaan WebSocket dalam FastAPI. Anda berlatih Kem Intensif Pembangunan Bahagian Belakang FastAPI menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Kem Intensif Pembangunan Bahagian Belakang FastAPI?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Membina Aplikasi Sembang Masa Nyata” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI ini?
Ya. Setiap pelajaran Kem Intensif Pembangunan Bahagian Belakang FastAPI menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Asas Protokol WebSocket
- Melaksanakan WebSockets dalam FastAPI
- Membina Aplikasi Sembang Masa Nyata
- Penskalaan WebSockets dengan Backplane Pub/Sub