1. 建立 WebSocket 連接：

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()  # 產生 FastAPI物件

# WebSocket 端點
@app.websocket("/wsbot")
async def websocket_endpoint(websocket: WebSocket):
	 
	 # 接受前端的 websocket 連接請求
   await websocket.accept()
   try:
        while True:
            
            # 等待前端訊息
            data = await websocket.receive_text()
            # 發送給前端
	          await websocket.send_text(f"你發送的消息是: {data}")
    except WebSocketDisconnect:
        # 前端斷開連接的處理
        print("客戶端已斷開連接")

• WebSocket 端點：
  • @app.websocket("/wsbot")：WebSocket 連接的 URL 是 /wsbot，前端可以透過這個 URL 連接。
• 接受 WebSocket 連接：
  • await websocket.accept()：接受前端的 WebSocket 連接請求。
• 持續接收和回應消息：
  • data = await websocket.receive_text()：接受使用者的訊息。
  • await websocket.send_text(f"你發送的消息是: {data}")：發送給使用者回應。
• 處理客戶端斷開連接：
  • except WebSocketDisconnect 記錄使用者斷開連接的情況。

2. 運行服務：

uvicorn main:app --reload

3. Next.js 中建立 WebSocket 連接：

建立一個 Hook 管理 WebSocket 的連接和通信

import { useEffect, useState } from 'react';

const useWebSocket = (url) => {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket(url);
    setSocket(ws);

    ws.onopen = () => {
      console.log('已連接到 WebSocket');
    };

    ws.onmessage = (event) => {
      setMessages((prev) => [...prev, event.data]);
      console.log('收到伺服器的回應:', event.data);
    };

    ws.onclose = () => {
      console.log('WebSocket 連接已關閉');
    };

    ws.onerror = (error) => {
      console.error('WebSocket 發生錯誤:', error);
    };

    // 在組件卸載時關閉 WebSocket
    return () => {
      ws.close();
    };
  }, [url]);

  // 發送消息的函數
  const sendMessage = (message) => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send(message);
    }
  };

  return { messages, sendMessage };
};

export default useWebSocket;

• useEffect：在組件加載時創建 WebSocket 連接，並在組件卸載時關閉連接，這樣可以避免內存洩漏。
• ws.onmessage：當從服務器接收到消息時，更新 messages 狀態後在介面上顯示消息。
• sendMessage 函數：向服務端發送消息。

以上就是在前端後服務端建立 WebSocket ，明天開始就會建立前端頁面啦~