flask使用geventwebsocket完成小型聊天系统

时间 2019-11-18

标签 flask 使用 geventwebsocket 完成小型聊天系统栏目 Python 繁體版

原文原文链接

geventwebsocket使用方法

websocket状态javascript

1:链接打开
2:客户端主动关闭链接
3:链接关闭(由服务器发起)
0:链接中...

socket的异步回调html

var ws = new WebSocket("ws://127.0.0.1:9527/ws");

//    onopen链接成功时,执行
    ws.onopen=function () {
        ws.send('110')
    }
    // #onmessage接收到消息时执行
    ws.onmessage=function (evenMessage) {
        console.log("接收成功")
        console.log(evenMessage.data)
    }

geventwebsocket完成群聊

模块导入java

from geventwebsocket.handler import WebSocketHandler   #ws协议请求处理
from geventwebsocket.server import WSGIServer       #替换Flask 原有的WSGI
from geventwebsocket.websocket import WebSocket    #语法提示
from flask import Flask, request      #Flask,request 模块

Flask项目的改写(建立一个websocket服务器)jquery

app=Flask(__name__)
if __name__ == '__main__':
    http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
    http_src.serve_forever()     #开始监听
    
    
WSGIServer((ip地址,端口号),flask实例化的app,handler_class=WebSocketHandler)
handler_class  指定链接方式,默认为WSGIHandler

在Flask视图函数拿到客户端发送的内容web

@app.route("/")
def index():
    sock=request.environ.get('wsgi.websocket')  #type:WebSocket    # 拿到客户端的socket对象
    while 1:                    #循环一直接收客户端链接,如无循环,接收一次链接就会关闭
        msg=sock.receive()      #拿到客户端发送的内容
        sock.send(msg)          #将客户端发送的东西再返回给客户端
        print(msg)

在html文件经过script完成信息的发送json

<script type="application/javascript">
var ws = new WebSocket("ws://127.0.0.1:9527/");
    // 使用回调函数,在链接成功时,执行代码
    ws.onopen=function () {
        ws.send("hello 怪怪")
    };
    //使用回调函数,在客户端接收到消息时执行代码
    ws.onmessage=function (MassageEven) {
        console.log("我接收到了");
        console.log(MassageEven.data)  //打印接收到的信息
    }
</script>

逻辑代码flask

服务端:使用一个列表存储全部的已经链接的客户端,经过循环列表,向全部人发送信息
客户端html:经过点击事件,将输入用户名的内容和输入的框的内容拼接好后,发送给后端,后端返回后经过jq显示在页面

html代码后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
您的用户名: <input type="text" id="username">
您想要发送的内容: <input type="text" id="send_text">
<input type="submit" id="tn">
<h1>性感太白在线luo聊</h1>
<div id="kuang">

</div>

</body>
<script src="jquery.js"></script>
<script type="application/javascript">
    var ws = new WebSocket("ws://127.0.0.1:9527/");
    //使用回调函数,在客户端接收到消息时执行代码
    ws.onmessage=function (MassageEven) {
        // console.log("我接收到了");
        // console.log(MassageEven.data);  //打印接收到的信息
        $('#kuang').append(MassageEven.data);       //当收到服务端的信息时,将信息添加到客户端页面
    };

    $('#tn').click(function () {        //当点击发送按钮后,将输入的内容发送
        var name=$("#username").val();
        var text=$("#send_text").val();
        ws.send("<p>"+name+" : "+text+"</p>");      //拼接用户名和发送内容
        $("#send_text").val("")         //清空输入框
    })




</script>
</html>

服务端代码服务器

from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.server import WSGIServer
from geventwebsocket.websocket import WebSocket

from flask import Flask, request

app=Flask(__name__)
li=[]       #使用一个列表存储全部的已经链接的客户端
@app.route("/")
def index():
    sock = request.environ.get('wsgi.websocket')  # type:WebSocket    # 拿到客户端的socket对象
    li.append(sock)
    print(li)
    while 1:
        try:
            msg = sock.receive()  # 拿到客户端发送的内容
        except:
            li.remove(sock)
            break
        for so in li:           #经过循环,向全部人发送信息
            # if so ==sock:
            #     continue
            try:
                so.send(msg)
                print(msg)
            except:
                continue

    return "sss"


if __name__ == '__main__':
    http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
    http_src.serve_forever()

geventwebsocket完成私聊

服务端:使用一个字典存储全部的已经链接的客户端,经过字典查询,向对方发送信息
客户端html:经过点击事件,将输入用户名的内容和输入的框的内容拼接好后,发送给后端,后端返回后经过jq显示在页面

html代码websocket

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名: <input type="text" id="username"> <input type="submit" id="tn" value="登录聊天室"> <br> <br>
向 <input type="text" id="sender"> 发送 <input type="text" id="text"> <input type="submit" id="send" value="发送">
<h1>与太白的那些不可说的悄悄话</h1>
<div id="nr">

</div>
</body>
<script src="jquery.js"></script>
<script>
    var ws =null;
    var username=null;
    $('#tn').click(function () {
        username=$('#username').val();
        ws = new WebSocket("ws://127.0.0.1:9527/"+username);
        ws.onopen=function () {
            alert("欢迎"+username+"登录聊天室")
        };
        ws.onmessage=function (MassageEven) {
            console.log(MassageEven.data)
            $('#nr').append(MassageEven.data)
        }

    });
    $('#send').click(function () {
        var sender =$('#sender').val();
        var text =$('#text').val();
        var send_msg={"username":username,"sender":sender,'text':text};
        console.log(send_msg);
        ws.send(JSON.stringify(send_msg))

    })


</script>
</html>

服务端代码

from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.server import WSGIServer
from geventwebsocket.websocket import WebSocket

from flask import Flask, request

import json

app=Flask(__name__)

sock_dic={}

@app.route("/<username>")
def index(username):
    sock=request.environ.get('wsgi.websocket')  #type:WebSocket
    sock_dic[username]=sock
    while 1:
        msg=sock.receive()
        msg=json.loads(msg)
        uname=msg['username']
        text=msg['text']
        text="<p>"+uname+" : " +text+"</p>"
        sender=msg['sender']
        try:
            sock_dic[sender].send(text)
            sock_dic[uname].send(text)
        except:
            sock_dic[uname].send("对方未上线或....")

    return "200 ok"




if __name__ == '__main__':
    http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
    http_src.serve_forever()