zoukankan      html  css  js  c++  java
  • 使用flask_socketio实现客户端间即时通信

      关于flask_socketio的入门可以看我的上一篇博客《使用flask_socketio实现服务端向客户端定时推送》

      用socketio实现即时通信十分简单,只需要客户端发送用户输入的信息到后端,后端再将此信息广播到所有连接到此命名域的客户端就可以了。

    from flask import Flask, render_template
    from flask_socketio import SocketIO,emit
    
    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'secret!'
    socketio = SocketIO(app)
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
    @socketio.on('imessage', namespace='/test_conn')
    def test_message(message):
        emit('message',//后端广播信息的事件名最好跟前端发送信息的事件名不一样
             {'data': message['data']},
             broadcast=True)
    
    if __name__ == '__main__':
        socketio.run(app, debug=True)

      关键就是要在emit中加broadcast=True这一项,如果不加,只有发送信息的客户端能收到消息

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                namespace = '/test_conn';
                var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
           //连接后发送日志 socket.on(
    'connect', function(){ console.log('connected') });
           //点击发送时将text框的内容发送到后端 $(
    'form#emit').submit(function(event) { socket.emit('imessage', {data: $('#emit_data').val()}); return false; });
           //接收后端广播的信息 socket.on(
    'message', function(msg) { $('#log').append('<br>' + $('<div/>').text(msg.data).html()); }); }); </script> </head> <body> <form id="emit" method="POST" action='#'> <input type="text" name="emit_data" id="emit_data" placeholder="Message"> <input type="submit" value="发送"> </form> <h2>Receive:</h2> <div id="log"></div> </body> </html>

      打开两个网页都连接到http://127.0.0.1:5000/,测试一下,一个网页发送的信息在另一个网页也可以及时收到。一个简陋的多人聊天系统完成了:)

  • 相关阅读:
    Codeforces467C George and Job
    Codeforces205E Little Elephant and Furik and RubikLittle Elephant and Furik and Rubik
    Codeforce205C Little Elephant and Interval
    51nod1829 函数
    51nod1574 排列转换
    nowcoder35B 小AA的数列
    Codeforce893E Counting Arrays
    gym101612 Consonant Fencity
    CodeForces559C Gerald and Giant Chess
    CodeForces456D A Lot of Games
  • 原文地址:https://www.cnblogs.com/luozx207/p/9719597.html
Copyright © 2011-2022 走看看