Flask websocker

群聊版

安装

pip install gevent-websocket  

 

视图

  1. # -*- coding: utf-8 -*-  
  2. import json  
  3. from flask import Flask, request, render_template  
  4. from geventwebsocket.handler import WebSocketHandler  # 导入websocker的方法  
  5. from gevent.pywsgi import WSGIServer  
  6.     
  7. app = Flask(__name__)  
  8.     
  9. user_socker_list = []  # 保存所有的websocker对象  
  10.     
  11. @app.route('/ws')  
  12. def ws():  
  13.     # print(request.headers)  
  14.     user_socker = request.environ.get('wsgi.websocket')  # type  WebSocket  
  15.     
  16.     """  
  17.     readyState: 3  连接正常,然后断开  
  18.     readyState: 1  表示正常连接  
  19.     """  
  20.     if user_socker:  
  21.         user_socker_list.append(user_socker)  
  22.         while 1:  
  23.             msg = user_socker.receive()  # 接收消息  
  24.             print(msg)  # 接受完信息后断开,所有加循环变成长连接  
  25.             for u_socker in user_socker_list:  
  26.                 if u_socker == user_socker:  
  27.                     continue  
  28.                 try:  
  29.                     u_socker.send(msg)  
  30.                 except:  
  31.                     continue  
  32.     
  33.     return render_template('ws.html')  
  34.     
  35.     
  36. if __name__ == '__main__':  
  37.     # app.run(host='0.0.0.'debug=True)  
  38.     http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)  
  39.     http_serv.serve_forever()  

 

前端

  1. >  
  2.  lang="en">  
  3.   
  4.      charset="UTF-8">  
  5.     </strong><span style="color:black">ws<span style="color:#006699"><strong>  
  6.   
  7.   
  8.  type="text" id="msg">  onclick="snd_msm()">发送  
  9.     
  10.  id="chat_list" style="width: 500px; height: 500px;">  
  11.     
  12.   
  •     
  •   
  •     
  •  type="application/javascript">  
  •     var ws = new WebSocket('ws://192.168.32.71:5000/ws');  {# 设置websocker连接 #}  
  •     ws.onmessage = function (data) {  
  •         console.log(data.data);  {# 数据在datadata里面 #}  
  •         var ptag = document.createElement('p');  
  •         ptag.innerText = data.data;  
  •         document.getElementById('chat_list').appendChild(ptag)  
  •     
  •     }; {# 打印收到的数据 #}  
  •         
  •     function snd_msm() {  
  •         var msg = document.getElementById('msg').value;  
  •         ws.send(msg)  
  •     }  
  •   
  •   
  •  

    一对一单机版

    视图

    1. # -*- coding: utf-8 -*-  
    2. import json  
    3. from flask import Flask, request, render_template  
    4. from geventwebsocket.handler import WebSocketHandler  # 导入websocker的方法  
    5. from gevent.pywsgi import WSGIServer  
    6.     
    7. app = Flask(__name__)  
    8.     
    9. user_socker_dict = {}  # 这里仿照flask上下文的方式  
    10.     
    11. """  
    12. 借用  
    13. flask 上下文  
    14.     
    15. {  
    16. "线程id": 偏函数,  
    17. "线程id": 偏函数,  
    18. }  
    19. """  
    20.     
    21. @app.route('/ws2/')  
    22. def ws2(usename):  
    23.     # print(request.headers)  
    24.     user_socker = request.environ.get('wsgi.websocket')  # type  WebSocket  
    25.     
    26.     """  
    27.     readyState: 3  连接正常,然后断开  
    28.     readyState: 1  表示正常连接  
    29.     """  
    30.     print(user_socker)  
    31.     if user_socker:  
    32.         user_socker_dict[usename] = user_socker  
    33.         print(user_socker_dict)  
    34.         while 1:  
    35.             msg = user_socker.receive()  # 接收人,消息,发送人  
    36.             msg_dict = json.loads(msg)  
    37.             msg_dict['from_user'] = usename  
    38.             to_user = msg_dict.get('to_user')  
    39.             u_socker = user_socker_dict.get(to_user)  # type  WebSocket  
    40.             u_socker.send(json.dumps(msg_dict))  
    41.     
    42.     return render_template('ws2.html')  
    43.     
    44.     
    45. if __name__ == '__main__':  
    46.     # app.run(host='0.0.0.'debug=True)  
    47.     http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)  
    48.     http_serv.serve_forever()  

     

    前端

    1. >  
    2.  lang="en">  
    3.   
    4.      charset="UTF-8">  
    5.     </strong><span style="color:black">ws<span style="color:#006699"><strong>  
    6.   
    7.   
    8.  type="text" id="username">  onclick="login()">登陆聊天室  
    9.     
    10.  type="text" id="to_user">发送: type="text" id="msg">  onclick="snd_msm()">发送  
    11.     
    12.  id="chat_list" style="width: 500px; height: 500px;">  
    13.     
    14.   
  •     
  •   
  •     
  •  type="application/javascript">  
  •     var ws = null;  {# 为什么设置null, 被其他函数执行 #}  
  •     
  •     function login() {  
  •         var username = document.getElementById('username').value;  
  •         ws = new WebSocket('ws://192.168.32.71:5000/ws2/' + username);  {# 设置websocker连接 #}  
  •         ws.onmessage = function (data) {  
  •             var recv_msg = JSON.parse(data.data);  
  •             var ptag = document.createElement('p');  
  •             ptag.innerText = recv_msg.from_user + ":" + recv_msg.msg;  
  •             document.getElementById('chat_list').appendChild(ptag)  
  •         }; {# 打印收到的数据 #}  
  •     
  •     }  
  •     
  •     function snd_msm() {  
  •         var to_user = document.getElementById('to_user').value;  
  •         var msg = document.getElementById('msg').value;  
  •         send_msg = {  
  •             "to_user" : to_user,  
  •             "msg": msg  
  •         };  
  •         ws.send(JSON.stringify(send_msg));  
  •     }  
  •   
  •   
  •  

    Websocker

    视图

    1. import time  
    2. from django.shortcuts import render  
    3. from dwebsocket.decorators import accept_websocket  
    4.     
    5.     
    6. @accept_websocket  
    7. def test(request):  
    8.     if request.is_websocket():  
    9.         print('websocket connection....')  
    10.         msg = request.websocket.wait()  # 接收前端发来的消息  
    11.         print(msg, type(msg), json.loads(msg))  # b'["1","2","3"]'  'bytes'> ['1', '2', '3']  
    12.         while 1:  
    13.             if msg:  
    14.                 # 你要返回的结果  
    15.                 for i in range(10):  
    16.                     request.websocket.send(str(i).encode())  # 向客户端发送数据  
    17.                 request.websocket.close()  
    18.     else:  # 如果是普通的请求返回页面  
    19.         return render(request, 'test.html')  

    前端

    1. >  
    2.  lang="en">  
    3.   
    4.      charset="UTF-8">  
    5.      http-equiv="x-ua-compatible" content="IE=edge">  
    6.      name="viewport" content="width=device-width, initial-scale=1">  
    7.     </strong><span style="color:black">test<span style="color:#006699"><strong>  
    8.   
    9.   
    10.   
    11.     
    12.   
    13.  type="text" id="message" value="Hello, World!"/>  
    14.  type="button" id="send_message">发送 message  
    15.     
    16.   
    17.  src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">  
    18.   
    19.   

    你可能感兴趣的:(Flask websocker)