WebSocket简单使用

Flask + WebSocket实现即时聊天功能

群聊的简单实现：

需要先安装genvent-websocket三方模块

群聊服务器：s1.py

from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler  # 请求处理
from geventwebsocket.server import WSGIServer   # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket  # 语法提示

app = Flask(__name__)
socket_list = []
@app.route("/wechat")
def wechat():
    return render_template("ws.html")

@app.route("/ws")
def my_ws():
    # print(request.environ)
    ws_socket = request.environ.get("wsgi.websocket")
    socket_list.append(ws_socket)
    print(len(socket_list),socket_list)
    while True:
        msg = ws_socket.receive()
        for usocket in socket_list:
            if usocket == ws_socket:
                continue
            try:
                usocket.send(msg)
            except:
                continue


if __name__ == '__main__':
    # app.run()
    http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()

群聊窗口：ws.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="content"><button onclick="send_msg()">发送消息</button>
<p>--------------------</p>
<div id="content_list" style="border:1px solid #ff00ff;width: 33%">
    
</div>

<script type="application/javascript">
    var ws = new WebSocket("ws://127.0.0.1:9527/ws",);
    ws.onmessage = function (messageEvent) {
        var my_div = document.getElementById("content_list");
        var ptag = document.createElement("p");
        ptag.innerText = messageEvent.data;
        my_div.appendChild(ptag);
    };
    
    function send_msg() {
        var msg = document.getElementById("content").value;
        ws.send(msg);
    }
    
</script>
</body>
</html>

 

 

单点聊天的简单实现

聊天服务器：s2.py

import json

from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler  # 请求处理
from geventwebsocket.server import WSGIServer   # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket  # 语法提示

app = Flask(__name__)

# socket_dict = {"username":"fadfadf"}
socket_dict = {}

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

@app.route("/ws/<username>")
def my_ws(username):
    print(username)
    # print(request.environ)
    ws_socket = request.environ.get("wsgi.websocket")
    socket_dict[username] = ws_socket
    print(len(socket_dict),socket_dict)
    while True:
        msg = ws_socket.receive()
        msg_dict = json.loads(msg)
        receiver = msg_dict.get("receiver")
        receiver_socker = socket_dict.get(receiver)
        receiver_socker.send(msg)

        for usocket in socket_dict:
            if usocket == ws_socket:
                continue
            try:
                usocket.send(msg)
            except:
                continue

if __name__ == '__main__':
    # app.run()
    http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()

单聊窗口：onetalk.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>你的昵称：<input type="text" id="username">
    <button onclick="login()">登录聊天室</button>
</p>
给 <input type="text" id="receiver">发送<input type="text" id="content">
<button onclick="send_msg()">发送消息</button>
<p>--------------------</p>
<div id="content_list" style="border:1px solid #ff00ff;width: 33%">

</div>

<script type="application/javascript">
    var ws = null;

    function send_msg() {
        var msg = document.getElementById("content").value;
        var receiver = document.getElementById("receiver").value;
        var sender = document.getElementById("username").value;
        var send_str = {
            receiver: receiver,
            sender: sender,
            data: msg,
        };
        ws.send(JSON.stringify(send_str));
        var my_div = document.getElementById("content_list");
        var ptag = document.createElement("p");
        ptag.innerText = msg + " : 我";
        ptag.style.cssText = "text-align:right";
        my_div.appendChild(ptag);
    };

    function login() {
        var username = document.getElementById("username").value;
        ws = new WebSocket("ws://127.0.0.1:9527/ws/" + username);
        ws.onmessage = function (messageEvent) {
            var obj = JSON.parse(messageEvent.data);
            var my_div = document.getElementById("content_list");
            var ptag = document.createElement("p");
            ptag.innerText = obj.sender + " : " + obj.data;
            my_div.appendChild(ptag);
        };
    }

</script>
</body>
</html>

 

posted @ 2020-04-16 21:29  无夜。  阅读(161)  评论(0)    收藏  举报