• flask + websocket实现简单的单聊和群聊


     

    单聊

     1 from flask import Flask,request,render_template
     2 from geventwebsocket.handler import WebSocketHandler
     3 from gevent.pywsgi import WSGIServer
     4 from geventwebsocket.websocket import WebSocket
     5 import json
     6 
     7 
     8 app = Flask(__name__)
     9 
    10 user_socket_dict = {}
    11 
    12 @app.route('/ws/<username>')
    13 def ws(username):
    14     user_socket = request.environ.get('wsgi.websocket') # type:WebSocket
    15     user_socket_dict[username] = user_socket
    16 
    17     print(len(user_socket_dict),user_socket_dict)
    18 
    19     while 1:
    20         try:
    21             msg = user_socket.receive()
    22             msg = json.loads(msg)
    23             to_user = msg.get('to_user')
    24             content = msg.get('msg')
    25             usocket = user_socket_dict.get(to_user)
    26             recv_msg = {
    27                 'from_user':username,
    28                 'msg':content
    29             }
    30 
    31             usocket.send(json.dumps(recv_msg))
    32         except:
    33             pass
    34 
    35 @app.route('/chat')
    36 def chat():
    37     return render_template('chat.html')
    38 
    39 
    40 if __name__ == '__main__':
    41     http_serv = WSGIServer(('0.0.0.0',5000),app,handler_class=WebSocketHandler)
    42     http_serv.serve_forever()
    43 
    44 python代码
    代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>单聊</title>
     6 </head>
     7 <body>
     8     <input type="text" id="username">
     9     <button onclick="open_ws()">连接服务器</button>
    10     <p>给:<input type="text" id="to_user"></p>
    11     <p>发送消息:<input type="text" id="msg"></p>
    12     <button onclick="send_msg()">发送</button>
    13     <div id="chat" style=" 500px; height: 500px;"></div>
    14 
    15     <script type="text/javascript">
    16         var ws = null;
    17         function open_ws() {
    18             var username = document.getElementById('username').value;
    19             ws = new WebSocket('ws://192.168.19.34:5000/ws/' + username);
    20             ws.onmessage = function (data) {
    21                 var msg = JSON.parse(data.data);
    22                 var ptag = document.createElement('p');
    23                 ptag.innerText = msg.from_user + ':' + msg.msg;
    24                 document.getElementById('chat').appendChild(ptag);
    25             };
    26         }
    27 
    28         function send_msg() {
    29             var msg = document.getElementById('msg').value;
    30             var to_user = document.getElementById('to_user').value;
    31             var send_obj = {to_user:to_user,msg:msg};
    32             ws.send(JSON.stringify(send_obj));
    33         }
    34     </script>
    35 </body>
    36 
    37 
    38 </html>
    39 
    40 页面
    页面

    群聊

     1 #!/usr/bin/env python
     2 # -*- coding=utf-8 -*-
     3 from flask import Flask,request,render_template
     4 from geventwebsocket.handler import WebSocketHandler
     5 from gevent.pywsgi import WSGIServer
     6 from geventwebsocket.websocket import WebSocket
     7 import json
     8 
     9 app = Flask(__name__)
    10 
    11 user_socket_list = []
    12 
    13 @app.route('/ws')
    14 def ws():
    15     user_socket = request.environ.get('wsgi.websocket') # type:WebSocket
    16     user_socket_list.append(user_socket)
    17     print(len(user_socket_list),user_socket_list)
    18     while 1:
    19         try:
    20             msg = user_socket.receive()
    21             for usocket in user_socket_list:
    22                 if usocket != user_socket:
    23                     usocket.send(msg)
    24         except:
    25             user_socket_list.remove(user_socket)
    26 
    27 
    28 @app.route('/chat')
    29 def chat():
    30     return render_template('ws.html')
    31 
    32 if __name__ == '__main__':
    33     http_serv = WSGIServer(('0.0.0.0',5000),app,handler_class=WebSocketHandler)
    34     http_serv.serve_forever()
    35 
    36 Python代码
    代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <p>发送消息:<input type="text" id="msg"></p>
     9 <button onclick="send_msg()">发送</button>
    10 <div id="chat" style=" 500px;height: 500px;"></div>
    11 <script type="text/javascript">
    12     var ws = new WebSocket('ws://192.168.19.34:5000/ws');
    13     ws.onmessage = function (data) {
    14         var ptag = document.createElement('p');
    15         ptag.innerText = data.data;
    16         document.getElementById('chat').appendChild(ptag);
    17     };
    18 
    19     function send_msg() {
    20         var msg = document.getElementById('msg').value;
    21         ws.send(msg)
    22     }
    23 </script>
    24 </body>
    25 </html>
    26 
    27 页面
    页面
  • 相关阅读:
    Elasticsearch 机制 架构 集群 选举
    《Leo the late bloomer》阿虎开窍了
    各行业发明专利排行榜
    接口响应 越来越慢
    知识产权代理 与 工作流
    MBA Business Org Responsbility Account Stock
    心理学 防内耗
    Apache Kafka Zookeeper Quorum
    The different aspect of architecture(架构的不同方面)
    hPaPaas low-code/no-code 低代码
  • 原文地址:https://www.cnblogs.com/duanhaoxin/p/10021794.html
Copyright © 2020-2023  润新知