如何使一台flasksocketio服务器为两个客户端（2个不同的html文件）提供服务

2024-04-26 21:06:07 发布

您现在位置：Python中文网/ 问答频道 /正文
9395 3

我目前正在学习socketio和web app，并尝试实现一个允许用户（即代理）向另一个用户（即用户）发送消息（数据）的web app。它们提供了不同的html接口。用户只能看到消息，不能编辑，而代理可以编辑、发送和查看消息，同时完成代理界面上的其他任务。通信是实时的，用户和代理可以有自己的设备通过相应的界面访问web

我尝试过flask socketio，使用python创建了一个服务器来服务两个客户机（两个html文件和相应的js）。下面是简化的代码。现在，对于索引html（代理），连接和消息工作得很好，但是用户界面没有收到任何消息。我应该如何设计服务器客户端

谢谢

# server.py
@app.route("/", methods=["GET", "POST"])
def index():
    return render_template("agent_interface.html")

@app.route("/user_interface", methods=["GET", "POST"])
def user_interface(): 
    return render_template("user_interface.html")

@socketio.on('my event')
def handle_my_custom_event(json, method=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, broadcast=True)

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


<!-- Agent's interface html with js -->
<html>
   <body>
             
        <form action="/" method="post">
            <label for="result-reply-box">Input result here:</label>
            <input type="text" id = "result-reply-box" name="result-reply-box" placeholder="Intermedairy response" autocomplete="off">
            <input type="submit" id= "send-result-btn" name="send-result-btn" value = "Show participant results">
        </form>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            var socket = io();
            socket.on( 'connect', function() {
                socket.emit( 'my event', {
                    data: 'Agent Connected'
                  } )
                  var form = $( 'form' ).on( 'submit', function( e ) {
                    e.preventDefault()
                    let agent_input = $( '#result-reply-box' ).val()

                    socket.emit( 'my event', {
                      input_message : agent_input
                    } )
                } )
            } )    

        </script>
    <body>
</html>


<!-- User's interface html with js -->
<html>
   <body>

        <div id = "result-content-show">


        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            var socket = io();
            socket.on( 'connect', function() {
                socket.emit( 'my event', {
                    data: 'Agent Connected'
                  } )
            } )   
            socket.on( 'my response', function( msg ) {
                console.log( msg )
                // Here msg is a json file
                if( typeof msg.input_message !== 'undefined' ) {
                    $( '#result-content-show' ).append( '<div>'+msg.input_message+'</div>' )
                }
            }) 

        </script>
    <body>
</html>

Tags： 用户ioeventapp代理inputmyhtml
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐