WebSocket 協(xié)議在10年前就已經(jīng)標(biāo)準(zhǔn)化了(在2011年，你能相信嗎?)所以我相信你不需要介紹。但是如果你不熟悉它，WebSocket 是 HTTP 協(xié)議的一個(gè)擴(kuò)展，它在客戶端和服務(wù)器之間提供了一個(gè)永久的、雙向的通信通道，在這里雙方可以實(shí)時(shí)地發(fā)送和接收數(shù)據(jù)，而不受 HTTP 的請(qǐng)求/響應(yīng)周期的限制。
如果您正在使用 Flask 2，那么您現(xiàn)在有了一個(gè)名為 Flask-Sock 的新擴(kuò)展，它為您的應(yīng)用程序提供了現(xiàn)代 WebSocket 支持。在本文中，我將向您展示如何使用這個(gè)擴(kuò)展。
先安裝依賴：
pip install flask-sock擴(kuò)展通過(guò)創(chuàng)建 Sock ()實(shí)例添加到 Flask 應(yīng)用程序中。如果您有一個(gè)全局應(yīng)用程序?qū)ο螅梢允褂弥苯映跏蓟椒?
sock = Sock(app)?如果在工廠函數(shù)中創(chuàng)建應(yīng)用程序?qū)嵗?，那么兩步初始化方法也可以工?
sock = Sock()
def create_app():
app = Flask(__name__)
sock.init_app(app)Sock 實(shí)例有一個(gè)路由修飾器，它的工作方式與 Flask 的非常相似，但是它添加了 WebSocket 協(xié)議握手，這樣路由就可以使用 WebSocket 而不是 HTTP。下面是一個(gè)簡(jiǎn)單的服務(wù)器，它向客戶機(jī)發(fā)送任何內(nèi)容都會(huì)回顯到該服務(wù)器:
@sock.route('/echo')
def echo(ws):
while True:
data = ws.receive()
ws.send(data)一個(gè)完整的例子
讓我們來(lái)看一個(gè)完整的例子，下面是 Flask 應(yīng)用程序的代碼:
from flask import Flask, render_template
from flask_sock import Sock
app = Flask(__name__)
sock = Sock(app)
@app.route('/')
def index():
return "你好，世界"
@app.route('/ws')
def websocket():
return """
<!doctype html>
<html>
<head>
<title>Flask-Sock Demo</title>
</head>
<body>
<h1>Flask-Sock Demo</h1>
<div id="log"></div>
<br>
<form id="form">
<label for="text">Input: </label>
<input type="text" id="text" autofocus>
</form>
<script>
const log = (text, color) => {
document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
};
const socket = new WebSocket('ws://' + location.host + '/echo');
socket.addEventListener('message', ev => {
log('<<< ' + ev.data, 'blue');
});
document.getElementById('form').onsubmit = ev => {
ev.preventDefault();
const textField = document.getElementById('text');
log('>>> ' + textField.value, 'red');
socket.send(textField.value);
textField.value = '';
};
</script>
</body>
</html>
"""
@sock.route('/echo')
def echo(self):
while True:
data = self.receive()
self.send(data)
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8989)
這基于上面顯示的 echo 服務(wù)器代碼。應(yīng)用程序有一個(gè)url：http://192.168.110.196:8989/ws，它返回客戶端頁(yè)面，還有一個(gè)/echo 路由，它實(shí)現(xiàn)了 WebSocket 回顯端點(diǎn)。
下面是html 頁(yè)面內(nèi)容:
<!doctype html>
<html>
<head>
<title>Flask-Sock Demo</title>
</head>
<body>
<h1>Flask-Sock Demo</h1>
<div id="log"></div>
<br>
<form id="form">
<label for="text">Input: </label>
<input type="text" id="text" autofocus>
</form>
<script>
const log = (text, color) => {
document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
};
const socket = new WebSocket('ws://' + location.host + '/echo');
socket.addEventListener('message', ev => {
log('<<< ' + ev.data, 'blue');
});
document.getElementById('form').onsubmit = ev => {
ev.preventDefault();
const textField = document.getElementById('text');
log('>>> ' + textField.value, 'red');
socket.send(textField.value);
textField.value = '';
};
</script>
</body>
</html>當(dāng)你訪問(wèn)：http://192.168.110.196:8989/ws
你就能看到一個(gè)這樣的頁(yè)面： 并且會(huì)默認(rèn)創(chuàng)建一個(gè)websocket鏈接
讓你輸入消息并發(fā)送的時(shí)候，就能看到效果了：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-731804.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-731804.html
到了這里，關(guān)于用flask框架flask-sock和websocket創(chuàng)建一個(gè)自己的聊天界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
