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>
    

      

  • 相关阅读:
    PHP 开发 APP 接口 学习笔记与总结
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 43 字符串相乘
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 42 接雨水
    Java实现 LeetCode 41 缺失的第一个正数
    Java实现 LeetCode 41 缺失的第一个正数
    Java实现 LeetCode 41 缺失的第一个正数
  • 原文地址:https://www.cnblogs.com/PythonMrChu/p/10458649.html
Copyright © 2011-2022 走看看