server.py
import time
from flask import Flask, render_template
from flask_sock import Sock
app = Flask(__name__)
sock = Sock(app)
@app.route('/')
def hello():
return render_template('index.html')
@sock.route('/echo')
def echo(ws):
while True:
data = ws.receive()
print(data)
ws.send(data)
time.sleep(1)
if __name__ == "__main__":
from gevent import monkey
monkey.patch_all()
app.run()
index.html
<html>
<head>
<meta charSet="utf-8"/>
<title>websocket 测试</title>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js">
</script>
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
// alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:5000/echo");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("请发送数据");
$("#r_s").append("数据发送中...<br>")
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
$("#r_s").append("server says: " + decodeURI(received_msg) + "<br>")
ws.send("数据已收到。")
};
ws.onclose = function () {
// 关闭 websocket
ws.send("正在关闭连接...")
$("#r_s").append("连接已关闭...<br>")
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
<div id="r_s">
操作记录：
<br/>
</div>
</body>
</html>
