zoukankan      html  css  js  c++  java
  • Flask websocket

    一.单方聊天
    1.app.py
    
    # websocket
    from geventwebsocket.server import WSGIServer # 我要WSGI为我提供服务
    from geventwebsocket.handler import WebSocketHandler # WSGI 遇到 WS协议的时候,处理方式
    from geventwebsocket.websocket import WebSocket # 语法提示
    
    # 基于 Flask + geventwebsocket
    
    from flask import Flask,request,render_template
    import json
    
    app = Flask(__name__)
    
    # user_socket_dict = {"YWB":<geventwebsocket.websocket.WebSocket object at 0x000002699374A730>,
    # "JWB":<geventwebsocket.websocket.WebSocket object at 0x000002699374A5F8>}
    
    user_socket_dict = {}
    
    @app.route("/ws/<nickname>")
    def my_ws_func(nickname):
        # print(dir(request.environ))
        user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
        user_socket_dict[nickname] = user_socket
        print(len(user_socket_dict),user_socket_dict)
        # web + socket
        print(user_socket)
        while 1:
            msg = user_socket.receive() # 等待接收客户端发送过来的消息
            print(msg)
            msg = json.loads(msg) # Dict
            """
            {
                to_user:YWB
                from_user:JWB
                message:"你就是一只WB"
            }
            """
            to_user_socket = user_socket_dict.get(msg.get("to_user"))
            msg_json = json.dumps(msg)
            to_user_socket.send(msg_json)
    
    @app.route("/one_p")
    def one_p():
        return render_template("one_p.html")
    
    
    
    
    if __name__ == '__main__':
        # app.run()
        http_serv = WSGIServer(("0.0.0.0",9527),application=app,handler_class=WebSocketHandler)
        http_serv.serve_forever()
    
    
    
    2.one_p.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p>登录<input type="text" id="nick"><button onclick="login()">登录</button></p>
        <p>给<input type="text" id="to_user"></p>
        <p>发送消息:<input type="text" id="message"><button onclick="send_msg()">发送</button></p>
        <div id="message_list" style=" 500px">
    
        </div>
    </body>
    <script type="text/javascript">
        var ws = null;
    
        function send_msg() {
            var msg = document.getElementById("message").value;
            var to_user = document.getElementById("to_user").value;
            var nick = document.getElementById("nick").value;
            var msg_obj = {
                to_user:to_user,
                from_user:nick,
                msg:msg
            };
            var msg_json = JSON.stringify(msg_obj);
            ws.send(msg_json);
        };
    
        function login() {
            var nick = document.getElementById("nick").value;
            ws = new WebSocket("ws://192.168.15.113:9527/ws/"+nick);
            ws.onmessage = function (event) {
                console.log(event.data);
                data_obj = JSON.parse(event.data);
                var ptag = document.createElement("p");
                ptag.innerText = data_obj.from_user + " : " + data_obj.msg;
                var divtag = document.getElementById("message_list");
                divtag.appendChild(ptag);
            };
        }
    
    
    </script>
    </html>
    
    二.多方聊天
    1.app.py
    # websocket
    from geventwebsocket.server import WSGIServer # 我要WSGI为我提供服务
    from geventwebsocket.handler import WebSocketHandler # WSGI 遇到 WS协议的时候,处理方式
    from geventwebsocket.websocket import WebSocket # 语法提示
    
    # 基于 Flask + geventwebsocket
    
    from flask import Flask,request,render_template
    
    app = Flask(__name__)
    
    user_socket_list = []
    
    @app.route("/ws")
    def my_ws_func():
        # print(dir(request.environ))
        user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
        user_socket_list.append(user_socket)
        # web + socket
        print(user_socket)
        while 1:
            msg = user_socket.receive() # 等待接收客户端发送过来的消息
            for us in user_socket_list:
                if us == user_socket:
                    continue
                try:
                    us.send(msg)
                except:
                    continue
    
            # print(msg)
            # user_socket.send(msg)
    
    @app.route("/group_p")
    def group_p():
        return render_template("group_p.html")
    
    
    
    
    if __name__ == '__main__':
        # app.run()
        http_serv = WSGIServer(("0.0.0.0",9527),application=app,handler_class=WebSocketHandler)
        http_serv.serve_forever()
    
    2.group_p.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p>发送消息:<input type="text" id="message"><button onclick="send_msg()">发送</button></p>
        <div id="message_list" style=" 500px">
    
        </div>
    </body>
    <script type="text/javascript">
        var ws = new WebSocket("ws://192.168.15.113:9527/ws");
        ws.onmessage = function (event) {
            console.log(event.data);
    
            var ptag = document.createElement("p");
            ptag.innerText = event.data;
    
            var divtag = document.getElementById("message_list");
            divtag.appendChild(ptag);
        };
    
        function send_msg() {
            var msg = document.getElementById("message").value;
            ws.send(msg);
        };
    
    
    </script>
    </html>
    

      

  • 相关阅读:
    团队博客-会议之初
    5.2 个人作业2
    5.1 如何利用Intellij Idea搭建python编译运行环境
    4.27 python神器——Anaconda的安装与优化配置
    4.26 AlertDialog(对话框)详解
    4.25 xmapp启动mysql出现Error: MySQL shutdown unexpectedly.
    4.24 Android Studio下应用签名的方法以及获取 MD5、SHA1(签名)、SHA256 值
    4.23 2020.2新版本idea创建javaEE web文件
    4.22 Android studio 通过获取验证码用户登陆成功
    4.21 Android 记住密码和自动登录界面的实现(SharedPreferences 的用法)
  • 原文地址:https://www.cnblogs.com/PythonMrChu/p/10458649.html
Copyright © 2011-2022 走看看