Flask框架-2-[单聊]: flask-socketio实现websocket的功能，实现单对单聊天，flask实现单聊功能

news2025/1/4 5:32:36

一、概述和项目结构

在使用flask-socketio实现单聊时，需要将会话id(sid) 与用户进行绑定，通过emit('事件','消息',to=sid) ,就可以把消息单独发送给某个用户了。

flask_websocket

|--static

|--js

|--jquery-3.7.0.min.js

|--socket.io_4.3.1.js

|--templates

|--chat

|--single.html

|--app.py

1.1、python版本

python3.9.0

1.2、依赖包

Flask==2.1.0
eventlet==0.33.3
Flask-SocketIO==5.3.4

1.3、js文件下载

https://code.jquery.com/jquery-3.7.0.min.jshttps://code.jquery.com/jquery-3.7.0.min.jshttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.min.jshttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.min.js

二、具体代码

2.1、具体逻辑

1、先请求http://127.0.0.1:5000/single/chat?name=lhz 与后端建立连接，将会用户名与会话id绑定关系

2、指定消息发送给哪个用户

3、展示在线的用户名字，用户退出连接时通知其他用户

2.2、app.py

from flask import Flask,render_template,request,jsonify
from flask_socketio import SocketIO,send,emit,join_room,leave_room

app = Flask(__name__,static_folder='./static',template_folder='./templates')
socketio = SocketIO(app,cors_allowed_origins='*',async_mode ='eventlet')
from flask_socketio import ConnectionRefusedError

'''
单对单聊天功能
1、用户连接时，携带上用户名，sid记录到该用户名的字典中
2、通过sid实现单聊
3、通过sid判断用户是否在线中
'''

USER = {}  #{'lhz':{'sid':'xxxx'}}

@app.route('/single/chat')
def single():
    name = request.args.get('name')
    return render_template('chat/single.html',data={'name':name})

class SingleChat(Namespace):
    def on_connect(self):
        name = request.args.get('name')
        sid = request.sid
        # 把当前用户写入到在线中
        if name in USER:
            print('有其他用户了', '直接覆盖')
            # raise ConnectionRefusedError('用户已经在线了')
            USER[name] = {'sid': sid}
        else:
            USER[name] = {'sid': sid}
            # send({'code':200,'msg':'使用send返回的，给connect事件'})

        #告诉在线用户，现在在线的用户情况
        online_users = [name_ for name_, dic in USER.items()]
        emit('connect',online_users,broadcast=True)

    def on_disconnect(self):
        sid = request.sid
        print('disconnect,','sid=',sid)
        del_name = False
        for name,dic in USER.items():
            if sid == dic.get('sid'):
                del_name = name
                break
        if del_name:
            USER.pop(del_name)
        print(USER,'当前用户消息')
        online_users = [name_ for name_, dic in USER.items()]
        emit('disconnect', {'leave':del_name,'online_users':online_users}, broadcast=True)

    def on_single_chat(self,data):
        name = data.get('name') #接收消息的用户
        msg = data.get('msg') #消息
        sendName = data.get('sendName') #发送消息的用户
        sid_dic = USER.get(name)
        if sid_dic:
            #给该用户发送消息
            emit('single_chat',{'name':sendName,'msg':msg},to=sid_dic.get('sid'))
            #告诉发送方，消息发送成功
            emit('success',{'code':200,'msg':msg,'name':name})
            print(name,'用户在线，可以发送')
        else:
            #告诉发送方，消息发送失败
            emit('success',{'code':400,'msg':'该用户不在线，无法发送消息'})
            print(name, '用户不在线，不可以发送')

socketio.on_namespace(SingleChat('/single/chat'))


if __name__ == '__main__':
    socketio.run(app,debug=True)

2.3、single.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="/static/js/jquery-3.7.0.min.js"></script>
    <script type="application/javascript" src="/static/js/socket.io_4.3.1.js"></script>
    <script type="application/javascript">
        const data = {{ data|tojson }};
        const name = data.name; // 当前用户名
        //1、发起连接
        const socket = io('http://'+document.domain+':'+location.port+'/single/chat',
            {query:{'token':'123456','name':name}}
        );


        //2、监听connect事件，
        socket.on('connect',function (data) {
            console.log(data);
            const showDiv = $('#showDataId');
            if (data){
                //将当前用户的名字删除
                for (let i = data.length - 1; i >= 0; i--) {
                    if (data[i] === name) {
                      data.splice(i, 1);
                    }
                  }
                //展示在线的用户名
                if(data.length>=1){
                    const pElement = $('<p>').text('[公告]在线的用户：'+data);
                    //添加到展示的div标签中
                    showDiv.append(pElement);
                }else{
                    const pElement = $('<p>').text('[公告] 当前只有您在线...');
                    //添加到展示的div标签中
                    showDiv.append(pElement);
                }
            }
        });

        // 3、监听disconnect事件，展示退出的用户消息，通知其他人
        socket.on('disconnect',function (dic) {
            const showDiv = $('#showDataId');
            const data = dic.online_users;
            const leave = dic.leave;
            if (data){
                //将当前用户的名字删除
                for (let i = data.length - 1; i >= 0; i--) {
                    if (data[i] === name) {
                      data.splice(i, 1);
                    }
                  }
                // 1、展示谁离线了
                const pElement = $('<p>').text('[公告] '+leave+'离线了...');
                //添加到展示的div标签中
                showDiv.append(pElement);

                //2、展示还在线的用户
                if(data.length>=1){
                    const pElement = $('<p>').text('[公告]在线的用户：'+data);
                    //添加到展示的div标签中
                    showDiv.append(pElement);
                }else{
                    const pElement = $('<p>').text('[公告] 当前只有您在线...');
                    //添加到展示的div标签中
                    showDiv.append(pElement);
                }
            }

        });

        //4、监听单聊事件，single_chat
        socket.on('single_chat',function (data) {
            const sendName = data.name;
            const msg = data.msg;
            const showDiv = $('#showDataId');
            //展示别人发送的消息
            if(sendName===name){

            }else {
                const pElement = $('<p>').text(sendName+'>'+msg);
                //添加到展示的div标签中
                showDiv.append(pElement);
            }
        })

        //5、监听消息发送是否成功,失败时要展示
        socket.on('success',function (data) {
            const code = data.code;
            const msg = data.msg;
            const name = data.name;
            const showDiv = $('#showDataId');
            if (code===200){
                const pElement = $('<p>').text('you to('+name+') >'+msg);
                //添加到展示的div标签中
                showDiv.append(pElement);
            }else {
               alert(msg)
            }
        })


        //6、发送消息
        function sendMsg() {
            const recvName = $('#recvUserId').val();
            const msg = $('#inputDataId').val();
            socket.emit('single_chat',{'name':recvName,'msg':msg,'sendName':name})
        }

    </script>
</head>
<body>
<div id="showDataId">

</div>
<div>
    <p>
        <input type="text" id="recvUserId" value="接收用户">
        <input type="text" id="inputDataId" value="消息">
        <input type="button" id="submitId" value="发送消息" onclick="sendMsg()">
    </p>

</div>

</body>
</html>