欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Flask基于websocket的简单聊天室

程序员文章站 2022-03-12 16:09:14
1、安装gevent-websocket 2、chat.py文件内容如下: 3、web_chat.html文件部分内容如下: 4、js代码如下: 最终的效果图如下: ......

1、安装gevent-websocket

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ gevent-websocket

2、chat.py文件内容如下:

from flask import flask,request,render_template
import json
from geventwebsocket.handler import websockethandler
from gevent.pywsgi import wsgiserver
from geventwebsocket.websocket import websocket

user_dict = {}

chat_app = flask(__name__)
@chat_app.route('/ws/<username>')
def ws_chat(username):
    user_socket = request.environ.get('wsgi.websocket') # type:websocket
    user_dict[username]=user_socket
    while 1:
        msg = user_socket.receive()  # 等待接收客户端发来的数据
        msg_dict = json.loads(msg)
        msg_dict['from_user'] = username
        to_user = msg_dict.get('to_user')
        if to_user == "":  # 如果用户名是空表示群发
            for uname, uwebsocket in user_dict.items():
                if uname == username:  # 群发时不用给自己发
                    continue
                uwebsocket.send(json.dumps(msg_dict))
            continue
        to_user_socket = user_dict.get(to_user)
        if not to_user_socket:  # 判断用户字典中是否存在用户的websocket连接
            continue
        try:
            msg_dict['from_user'] = msg_dict['from_user'] + '@私聊我'
            to_user_socket.send(json.dumps(msg_dict))
        except:
            user_dict.pop(to_user)

@chat_app.route('/webchat')
def webchat():
    return render_template('public_chat.html')

if __name__ == '__main__':
    server = wsgiserver(('0.0.0.0',9527),chat_app,handler_class=websockethandler)
    server.serve_forever()

3、web_chat.html文件部分内容如下:

<p>你的名字:<input type="text" id="username">
    <button onclick="open_ws()">登陆聊天室</button>
</p>
<form onsubmit="return false;">
    <h3>websocket 聊天室:</h3>
    <textarea id="responsetext" style="width: 500px; height: 300px;"></textarea>
    <br>
    给:<input type="text" id="to_user">消息内容:<input type="text" id="message">
    <input type="button" value="发送消息" onclick="send_msg()">
    <input type="button" onclick="javascript:document.getelementbyid('responsetext').value=''"
           value="清空聊天记录">
</form>

4、js代码如下:

<script type="application/javascript">
    var ws = null;
    function open_ws() {
        var username = document.getelementbyid('username').value;
        ws = new websocket("ws://192.168.16.239:9527/ws/" + username);
        ws.onopen = function () {
            alert("登陆成功");
        };

        ws.onmessage = function (eventmessage) {
            // 显示消息记录
            var chat = json.parse(eventmessage.data);
            console.log(chat);
            var chat_content = document.getelementbyid('responsetext');
            chat_content.value = chat_content.value + "\n" + chat.from_user + " : " + chat.chat;
        };
    }

    function send_msg() {
        // 发送消息
        var to_user = document.getelementbyid("to_user").value;
        var msg = document.getelementbyid("message").value;
        var send_str = {
            to_user: to_user,
            chat: msg
        };
        ws.send(json.stringify(send_str));
        var chat_content = document.getelementbyid("responsetext");
        chat_content.value = chat_content.value + "\n" + "我: " + msg;
    }
</script>

最终的效果图如下:

Flask基于websocket的简单聊天室