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/,测试一下,一个网页发送的信息在另一个网页也可以及时收到。一个简陋的多人聊天系统完成了:)

  • 相关阅读:
    【Java并发】并发笔记(一)
    【深入Java基础】排序算法(一)
    QDU-GZS and String
    牛客网36-A,B题解
    QDU-GZS与素数大法(素数筛法)
    csdn自动展开+去广告+净化剪切板+免登陆(如有侵权,立即删博)
    QDU第一届程序设计大赛——E到I题解法(非官方题解)
    Codeforces Round #529 -C- Powers Of Two(二进制拆分)
    CodeForces
    分配物资(模拟)
  • 原文地址:https://www.cnblogs.com/luozx207/p/9719597.html
Copyright © 2011-2022 走看看