web-socket 

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


app = Flask(__name__)
user_socket_list = []


@app.route("/ws")
def ws():
    user_socket = request.environ.get("wsgi.websocket") #type:WebSocket  #可以让user_socket变量当成WebSocket，可以点出方法  #只有当ws协议访问时原数据中才有wsgi.websocket
    if user_socket:
        user_socket_list.append(user_socket)
    print(len(user_socket_list), user_socket_list)
    while 1:
        msg = user_socket.receive()
        for u_socket in user_socket_list:
            if u_socket == user_socket:
                continue
            try: 　　# 因为当一个连接断开时，我们再循环这个列表会报一个连接已死亡的错
                u_socket.send(msg)  
            except:
                continue


@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()

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="msg" type="text"><button onclick="send_msg()">发送</button>
<div id="chat_list" style="width:500px;height:500px;"></div>
</body>
<script type="application/javascript">
    var ws = new WebSocket("ws://172.20.10.2:9527/ws");  #实例化一个websocket对象，在加载时就会建立连接
    ws.onmessage = function (data) {                      #成功的回调函数
        console.log(data.data);
        var recv_msg = data.data;
        var ptag = document.createElement("p");
        ptag.innerText = recv_msg;
        document.getElementById("chat_list").appendChild(ptag);
    };

    function send_msg() {
        var msg = document.getElementById("msg").value;
        ws.send(msg)
    }
</script>
</html>

上面是一个群聊，下面是一个升级版的私聊（双方不能掉线）

import json

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


app = Flask(__name__)
# user_socket_list = []
user_socket_dict = {}


@app.route("/ws/<username>")
def ws(username):
    user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
    if user_socket:
        user_socket_dict[username] = user_socket
    print(len(user_socket_dict), user_socket_dict)
    while 1:
        msg = user_socket.receive()  # 收件人 消息 发件人
        msg_dict = json.loads(msg)
        print(msg_dict)
        msg_dict["from_user"] = username
        to_user = msg_dict.get("to_user")
        u_socket = user_socket_dict.get(to_user) #type:WebSocket
        u_socket.send(json.dumps(msg_dict))


@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()

前端

<!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="to_user">发送:<input id="msg" type="text"><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 = null;
        ws = new WebSocket("ws://172.20.10.2:9527/ws/" + username);
        ws.onmessage = function (data) {
        console.log(data.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 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
        };
        console.log(send_str);
        console.log(ws);
        ws.send(JSON.stringify(send_str));
    }
</script>
</html>

 

posted @ 2019-01-10 17:22  被嫌弃的胖子  阅读(278)  评论(0)  编辑  收藏  举报