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

    一、概述和项目结构

    在使用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.jsicon-default.png?t=N7T8https://code.jquery.com/jquery-3.7.0.min.jshttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.min.jsicon-default.png?t=N7T8https://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       

    1. from flask import Flask,render_template,request,jsonify
    2. from flask_socketio import SocketIO,send,emit,join_room,leave_room
    3.  
    4. app = Flask(__name__,static_folder='./static',template_folder='./templates')
    5. socketio = SocketIO(app,cors_allowed_origins='*',async_mode ='eventlet')
    6. from flask_socketio import ConnectionRefusedError
    7.  
    8. '''
    9. 单对单聊天功能
    10. 1、用户连接时，携带上用户名，sid记录到该用户名的字典中
    11. 2、通过sid实现单聊
    12. 3、通过sid判断用户是否在线中
    13. '''
    14.  
    15. USER = {}  #{'lhz':{'sid':'xxxx'}}
    16.  
    17. @app.route('/single/chat')
    18. def single():
    19.     name = request.args.get('name')
    20.     return render_template('chat/single.html',data={'name':name})
    21.  
    22. class SingleChat(Namespace):
    23.     def on_connect(self):
    24.         name = request.args.get('name')
    25.         sid = request.sid
    26.         # 把当前用户写入到在线中
    27.         if name in USER:
    28.             print('有其他用户了', '直接覆盖')
    29.             # raise ConnectionRefusedError('用户已经在线了')
    30.             USER[name] = {'sid': sid}
    31.         else:
    32.             USER[name] = {'sid': sid}
    33.             # send({'code':200,'msg':'使用send返回的，给connect事件'})
    34.  
    35.         #告诉在线用户，现在在线的用户情况
    36.         online_users = [name_ for name_, dic in USER.items()]
    37.         emit('connect',online_users,broadcast=True)
    38.  
    39.     def on_disconnect(self):
    40.         sid = request.sid
    41.         print('disconnect,','sid=',sid)
    42.         del_name = False
    43.         for name,dic in USER.items():
    44.             if sid == dic.get('sid'):
    45.                 del_name = name
    46.                 break
    47.         if del_name:
    48.             USER.pop(del_name)
    49.         print(USER,'当前用户消息')
    50.         online_users = [name_ for name_, dic in USER.items()]
    51.         emit('disconnect', {'leave':del_name,'online_users':online_users}, broadcast=True)
    52.  
    53.     def on_single_chat(self,data):
    54.         name = data.get('name') #接收消息的用户
    55.         msg = data.get('msg') #消息
    56.         sendName = data.get('sendName') #发送消息的用户
    57.         sid_dic = USER.get(name)
    58.         if sid_dic:
    59.             #给该用户发送消息
    60.             emit('single_chat',{'name':sendName,'msg':msg},to=sid_dic.get('sid'))
    61.             #告诉发送方，消息发送成功
    62.             emit('success',{'code':200,'msg':msg,'name':name})
    63.             print(name,'用户在线，可以发送')
    64.         else:
    65.             #告诉发送方，消息发送失败
    66.             emit('success',{'code':400,'msg':'该用户不在线，无法发送消息'})
    67.             print(name, '用户不在线，不可以发送')
    68.  
    69. socketio.on_namespace(SingleChat('/single/chat'))
    70.  
    71.  
    72. if __name__ == '__main__':
    73.     socketio.run(app,debug=True)

       

    2.3、single.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script type="application/javascript" src="/static/js/jquery-3.7.0.min.js">script>
    7.     <script type="application/javascript" src="/static/js/socket.io_4.3.1.js">script>
    8.     <script type="application/javascript">
    9.         const data = {{ data|tojson }};
    10.         const name = data.name; // 当前用户名
    11.         //1、发起连接
    12.         const socket = io('http://'+document.domain+':'+location.port+'/single/chat',
    13.             {query:{'token':'123456','name':name}}
    14.         );
    15.  
    16.  
    17.         //2、监听connect事件，
    18.         socket.on('connect',function (data) {
    19.             console.log(data);
    20.             const showDiv = $('#showDataId');
    21.             if (data){
    22.                 //将当前用户的名字删除
    23.                 for (let i = data.length - 1; i >= 0; i--) {
    24.                     if (data[i] === name) {
    25.                       data.splice(i, 1);
    26.                     }
    27.                   }
    28.                 //展示在线的用户名
    29.                 if(data.length>=1){
    30.                     const pElement = $('
      ').text('[公告]在线的用户：'+data);
    31.                     //添加到展示的div标签中
    32.                     showDiv.append(pElement);
    33.                 }else{
    34.                     const pElement = $('
      ').text('[公告] 当前只有您在线...');
    35.                     //添加到展示的div标签中
    36.                     showDiv.append(pElement);
    37.                 }
    38.             }
    39.         });
    40.  
    41.         // 3、监听disconnect事件，展示退出的用户消息，通知其他人
    42.         socket.on('disconnect',function (dic) {
    43.             const showDiv = $('#showDataId');
    44.             const data = dic.online_users;
    45.             const leave = dic.leave;
    46.             if (data){
    47.                 //将当前用户的名字删除
    48.                 for (let i = data.length - 1; i >= 0; i--) {
    49.                     if (data[i] === name) {
    50.                       data.splice(i, 1);
    51.                     }
    52.                   }
    53.                 // 1、展示谁离线了
    54.                 const pElement = $('
      ').text('[公告] '+leave+'离线了...');
    55.                 //添加到展示的div标签中
    56.                 showDiv.append(pElement);
    57.  
    58.                 //2、展示还在线的用户
    59.                 if(data.length>=1){
    60.                     const pElement = $('
      ').text('[公告]在线的用户：'+data);
    61.                     //添加到展示的div标签中
    62.                     showDiv.append(pElement);
    63.                 }else{
    64.                     const pElement = $('
      ').text('[公告] 当前只有您在线...');
    65.                     //添加到展示的div标签中
    66.                     showDiv.append(pElement);
    67.                 }
    68.             }
    69.  
    70.         });
    71.  
    72.         //4、监听单聊事件，single_chat
    73.         socket.on('single_chat',function (data) {
    74.             const sendName = data.name;
    75.             const msg = data.msg;
    76.             const showDiv = $('#showDataId');
    77.             //展示别人发送的消息
    78.             if(sendName===name){
    79.  
    80.             }else {
    81.                 const pElement = $('
      ').text(sendName+'>'+msg);
    82.                 //添加到展示的div标签中
    83.                 showDiv.append(pElement);
    84.             }
    85.         })
    86.  
    87.         //5、监听消息发送是否成功,失败时要展示
    88.         socket.on('success',function (data) {
    89.             const code = data.code;
    90.             const msg = data.msg;
    91.             const name = data.name;
    92.             const showDiv = $('#showDataId');
    93.             if (code===200){
    94.                 const pElement = $('
      ').text('you to('+name+') >'+msg);
    95.                 //添加到展示的div标签中
    96.                 showDiv.append(pElement);
    97.             }else {
    98.                alert(msg)
    99.             }
    100.         })
    101.  
    102.  
    103.         //6、发送消息
    104.         function sendMsg() {
    105.             const recvName = $('#recvUserId').val();
    106.             const msg = $('#inputDataId').val();
    107.             socket.emit('single_chat',{'name':recvName,'msg':msg,'sendName':name})
    108.         }
    109.  
    110.     script>
    111. head>
    112. <body>
    113. <div id="showDataId">
    114.  
    115. div>
    116. <div>
    117.     <p>
    118.         <input type="text" id="recvUserId" value="接收用户">
    119.         <input type="text" id="inputDataId" value="消息">
    120.         <input type="button" id="submitId" value="发送消息" onclick="sendMsg()">
    121.     p>
    122.  
    123. div>
    124.  
    125. body>
    126. html>

     三、代码测试

    1、开启三个浏览器标签，分别输入

    http://127.0.0.1:5000/single/chat?name=lhz

    http://127.0.0.1:5000/single/chat?name=zzh

    http://127.0.0.1:5000/single/chat?name=yf

    2、两两之间互发消息

    3、关闭lhz的浏览器标签

    4、关闭zzh的浏览器标签

  • 相关阅读:
    MySQL MHA
    用了半年chromium，说说心得
    阿里云高校计划学生和教师完成认证领取优惠权益
    Linux系统输出整数值的shell脚本
    xpath定位不包含某种属性的元素
    【gbase8a】docker搭建gbase8a，详细【图文】
    AWS API GATEWAY
    4-甲氧基三苯胺,CAS号：4316-51-2
    每日一练：LeeCode-9、回文数【字符串】
    Yii 结合MPDF 给PDF文件添加多行水印
  • 原文地址：https://blog.csdn.net/weixin_46371752/article/details/133158830