flask websocket

一.websocket

简介:

轮询：

玉帝不定的传达室 - 凌霄宝殿 - 一秒钟100次

开启高速公路(带宽) - 占用网络带宽

 

前后端一秒钟交互多次
前后端压力极大
并且带宽消耗
资源浪费极其严重

长轮询：

玉帝在传达室 盖了几个宿舍 住着玉帝的小弟

让服务器保存我的一个连接状态，用于快速传递消息
节省带宽释放压力
数据实时性

长连接''

websocket
    玉帝按电话了，并且把电话号码放在传达室了
    服务端及客户端节省极大的资源
    能保证数据实时性

 

使用

首先下载模块:

gevent-websocket

引用模块

from flask import Flask,render_template,request
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
import json

 

 

流程就是

客户端通过登录链接那把""伞"",

在服务端创建一个字典user_socket_dict={},以用户名登录作为建存储许多把伞

客户端发送字典数据

"to_user":to_user,
"msg":msg

服务端通过

 

to_user = msg_dict.get("to_user")

 

存储

再有放在字典user_socket_dict={},通过登录用户名找到发送的那把伞

 

u_socket = user_socket_dict.get(to_user)

 

 

最后发送数据返回客户端

 

服务端.py

user_socket_dict={}

@app.route("/ws/<username>")#同flask的路由，username是为了区分用户名
def we(username):

    user_socket = request.environ.get('wsgi.websocket')#type:WebSocket  #相当于连接的那把伞，成功连接后意味着可以进行通信了
    ##type:WebSocket ：作用，使定义的user_socket拥有很多属性
    if user_socket:
        user_socket_dict[username]=user_socket#将用户登录时对信息存储,为了下次找到发送的对象
    while 1:
        msg = user_socket.receive()#通过"伞".receive()接收那个信息数据
        msg_dict = json.loads(msg)
        msg_dict["from_user"]=username#返回客户端发送数据的用户名
        to_user = msg_dict.get("to_user")
        u_socket = user_socket_dict.get(to_user) #type:WebSocket  #找到要发送数据的的人
        # 通过"伞".receive()获取那个信息 找出send属性
        u_socket.send(json.dumps(msg_dict))  #通过后端发送给要发送的人,服务器模拟发送,u_socket就是那把伞
        #通过"伞".send发送数据

@app.route("/")
def index():
    return render_template("ws.html")


if __name__ == '__main__':
        http_serv = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)#找对象
        http_serv.serve_forever()#对象的属性

 

客户端.tml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username"><button onclick="login()">登录聊天室</button>
给 <input type="text" id="">
发送:<input type="text" id="msg"><button onclick="send_msg()">发送</button>
<div id="chat_list" style="width: 500px;height: 500px"></div>
</body>

<script type="application/javascript">
    var ws = null;
    function login() {
        var username = document.getElementById("username").value;
        ws = new  WebSocket("ws://192.168.72.1:9527/ws/"+username);
        ws.onmessage=function (data) {
            {#  通过ws 按个"伞".onmessage接收数据 data.data获取出传来的数据#}
            console.log(data.data)
            var recv_msg = JSON.parse(data.data);
            var ptag = document.createElement("p"); #定义一个标签p
            ptag.innerText=recv_msg.from_user + ":" + recv_msg.msg;
            document.getElementById("chat_list").appendChild(ptag);
        }
    }


    function send_msg() {
        {#获取发送者和数据信息#}
        var to_user = document.getElementById("to_user").value;
        var msg = document.getElementById("msg").value;
        var send_str ={
            "to_user":to_user,
            "msg":msg
        };
        ws.send(JSON.stringify(send_str));

    }
</script>
</html>

 

posted @ 2019-01-10 19:43  逆欢  阅读(607)  评论(0)  编辑  收藏  举报