效果:

Sever:

import time
from flask_sockets import Sockets
from gevent import monkey
from flask import Flask,jsonify
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler

monkey.patch_all()

app = Flask(__name__)
sockets = Sockets(app)

@sockets.route('/test')  # 指定路由
def echo_socket(ws):
    while not ws.closed:
        ws.send(str(time.asctime()))  # 给clicent传时间

        message = ws.receive()  # 接收到消息
        if message is not None:
            print("receive msg==> ",  str(message))
            # ws.send(str(json.dumps(message)))  # 回传给clicent
        else:
            print("no receive")
        time.sleep(1)

@app.route('/')
def hello():
    return jsonify(msg="ok")

if __name__ == "__main__":
    server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
    print('server start')
    server.serve_forever()

 Client:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
</head>
<body>
    <div id="time" style="width: 300px;height: 50px;background-color: #0C0C0C;
    color: white;text-align: center;line-height: 50px;margin-left: 40%;font-size: 20px"></div>

    <script>
        function f() {
            var ws = new WebSocket("ws://127.0.0.1:5000/test");

            ws.onmessage = function (event) {  //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
                content = document.createTextNode(event.data);
                $("#time").html(content);
                ws.send("已接收:"+event.data);
            };
        }
        f();

    </script>
    </body>
</html>

 注:我的Flask版本是2.1.2,安装的Werkzeug版本是1.0.1,可以不用管安装过程中的ERROR

pip install Werkzeug==1.0.1 -i https://mirrors.aliyun.com/pypi/simple/

 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐