上一篇文章，我們分享了WebSockets一些入門的，我們這節課，在原來的基礎上，對於講解的進行一個演示。我們最后分享了依賴token等。首先我們對上次的代碼進行調整。
我們之前分享FastAPI 學習之路（三十八）Static Files，我們分享了動態文件的使用，我們按照之前分享的。將之前代碼的靜態文件抽離出來。
放在了templates下面的webchat.html。
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<h1>WebSocket 聊天</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/items/ws");
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)
};
function sendMessage(event) {
var input = document.getElementById("messageText")
ws.send(input.value)
input.value = ''
event.preventDefault()
}
</script>
</body>
</html>
我們對於main里面的代碼調整為
from typing import Optional from fastapi import Cookie, Depends, FastAPI,Request, Query, WebSocket, status from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="./templates") @app.get("/") async def get(request: Request): return templates.TemplateResponse( "webchat.html", { "request": request } ) async def get_cookie_or_token( websocket: WebSocket, session: Optional[str] = Cookie(None), token: Optional[str] = Query(None), ): if session is None and token is None: await websocket.close(code=status.WS_1008_POLICY_VIOLATION) return session or token @app.websocket("/items/ws") async def websocket_endpoint( websocket: WebSocket, cookie_or_token: str = Depends(get_cookie_or_token), ): await websocket.accept() while True: data = await websocket.receive_text() await websocket.send_text(f"消息是: {data}")
但是我們之前的html代碼去調試的時候，發現報錯，因為我們需要依靠session或者token。那么我們需要對html進行調整。
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<h1>WebSocket Chat</h1>
<form action="" onsubmit="sendMessage(event)">
<label>Token: <input type="text" id="token" autocomplete="off" value="some-key-token"/></label>
<button onclick="connect(event)">鏈接</button>
<hr>
<label>消息: <input type="text" id="messageText" autocomplete="off"/></label>
<button>發送</button>
</form>
<ul id='messages'>
</ul>
<script>
var ws = null;
function connect(event) {
var token = document.getElementById("token")
ws = new WebSocket("ws://localhost:8000/items/ws?token=" + token.value);
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)
};
event.preventDefault()
}
function sendMessage(event) {
var input = document.getElementById("messageText")
ws.send(input.value)
input.value = ''
event.preventDefault()
}
</script>
</body>
</html>
其實我們就是增加了帶了token。
但是我們直接點擊發送。無法發送消息，但是我們增加了帶token之后就可以發送成功了。
這樣我們的WebSockets就可以帶token來做登錄了，但是我們的token呢，只是做了簡單的校驗。那么我們是不是可以和登錄退出放在一起呢。肯定是可以的，我們在下次分享的時候將登錄退出分享出來。
文章首發在公眾號，歡迎關注。
