How to run Flask inside a pyscript block?-CodePudding

How to make the following Flask endpoint function work with an existing website?

Python script with Flask (works well)

from flask import Flask, request

# create the Flask app
app = Flask(__name__)

@app.route('/data')
def query_example():
    # if key doesn't exist, returns None
    P_ID = request.args.get('P_ID')

    # if key doesn't exist, returns None
    P_TITLE = request.args.get('P_TITLE')

    return '''
            <h1>The P_ID is: {}</h1>
            <h1>The P_TITLE value is: {}'''.format(P_ID,  P_TITLE)
            
if __name__ == '__main__':
    # run app in debug mode on port 5000
    app.run(debug=True, port=5000)

Here is a [screenshot of the local website I created].(https://i.stack.imgur.com/h54ZG.png)

I updated the code above to put the .py into an .html, but facing this error:

OSError: [Errno 50] Protocol not available

<script type=module src=main_joy_01_12.js></script><my-header></my-header>

<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

<html>
    <p>fix title/contaxt</p>
    <h1>this is the data extract from mysql: Nordic85678</h1>
    </body>
</html>

<py-config>
    packages = ["flask"]
</py-config>

<py-script>

    # with pyscript that can run python inside html 
    # following with normal python code, execute independently is working fine

    from flask import Flask, request
    
    # create the Flask app
    app = Flask(__name__)
    
    
    @app.route('/data')
    def query_example():
        # if key doesn't exist, returns None
        P_ID = request.args.get('P_ID')
    
        # if key doesn't exist, returns None
        P_TITLE = request.args.get('P_TITLE')
    
        return ''' 
    
                <script type=module src=main_joy_01_12.js></script><my-header></my-header>
    
    <head>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </head>
    
    <html>
        <p>fix title/contaxt</p>
        <h1>this is the data extract from mysql: {}</h1>
    
        </body>
    </html>
    
    
    '''.format( P_TITLE)
    
                
    if __name__ == '__main__':
        # run app in debug mode on port 5000
        app.run(debug=True, port=5000)
    
</py-script>

<my-footer></my-footer>

Here is the full error output:

Traceback (most recent call last):
  File "/lib/python3.10/site-packages/_pyodide/_base.py", line 435, in eval_code
    .run(globals, locals)
  File "/lib/python3.10/site-packages/_pyodide/_base.py", line 304, in run
    coroutine = eval(self.code, globals, locals)
  File "<exec>", line 235, in <module>
  File "/lib/python3.10/site-packages/flask/app.py", line 1188, in run
    run_simple(t.cast(str, host), port, self, **options)
  File "/lib/python3.10/site-packages/werkzeug/serving.py", line 1062, in run_simple
    s = prepare_socket(hostname, port)
  File "/lib/python3.10/site-packages/werkzeug/serving.py", line 898, in prepare_socket
    s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
OSError: [Errno 50] Protocol not available

The idea comes from an original website (https://www.happy.com), where you type the http like https://www.happy.com/data?P-ID=en_1-01 and it can show the input data, such as "Are you looking for en_1-01?" on the exsisting website.

CodePudding user response：

A minimalistic example:

from flask import Flask, request

app = Flask(__name__)


@app.route('/data')
def display():
    value = request.args.get('P-ID')
    html_content = """
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Are you looking for {}</h1>
  </body>
</html>
""".format(value)
    return html_content


if __name__ == '__main__':
    app.run()

CodePudding user response：

It is not possible to run Flask inside the browser. That would be a security problem if you could. The browser virtual machine does not provide APIs to open sockets by applications. All network I/O must go thru APIs provided by the browser.