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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。