近来项目使用了fastapi进行开发,项目中有消息提示模块,考虑基于websockets实现,故有以下内容
直接上代码
fastapi代码 main.py
如下:
from redis import StrictRedis
from fastapi import FastAPI
from fastapi.testclient import TestClient
from fastapi.websockets import WebSocket
app = FastAPI()
@app.websocket_route("/ws")
async def websocket(websocket: WebSocket):
await websocket.accept()
# 需要异步的连接,否则会造成阻塞
r = await aioredis.create_redis("redis://hadoop101:6379/1", encoding='utf-8')
while True:
key, msg = r.blpop("message") # 从redis中读取消息体
await websocket.send_json({"msg": msg}) # 发送到前端
启动后端代码
uvicorn main:app --host 0.0.0.0 --port 8080 --reload
前端代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>websocket通信客户端</title>
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:8000/ws"); // 和后端代码在一个机器启动
// 连接建立后的回调函数
ws.onopen = function () {
console.log("已经建立websocket连接")
};
// 接收到服务器消息后的回调函数
ws.onmessage = function (evt) {
var received_msg = evt.data;
console.log(received_msg)
};
// 连接关闭后的回调函数
ws.onclose = function () {
// 关闭 websocket
console.log("连接已关闭...");
};
} else {
// 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body onload="WebSocketTest()">
</body>
</html>
搞定收工
参考文章:
https://www.cnblogs.com/lsdb/p/10949766.html
https://fastapi.tiangolo.com/advanced/testing-websockets/