How to Integrate Python Flask with PyQt5

In this PyQt5 and Python Flask article we want to learn How to Integrate Python Flask with PyQt5, Flask is micro web framework in Python, while PyQt5 is Python binding of the Qt toolkit, which is powerful graphical user interface (GUI) framework. integrating Flask with PyQt5 can allow you to create web based applications with graphical user interface.

How to Integrate Python Flask with PyQt5

First of all we need to install the required libraries which is Flask and PyQt5.

pip install PyQt5 Flask flask-socketio

1	pip install PyQt5 Flask flask-socketio

We also need the QtWebEngineWidgets module which provides the web engine that we want to use to display web content, so PyQtWebEngine is set of Python bindings for Qt Company’s Qt WebEngine framework. framework provides the ability to embed web content in applications and is based on the Chrome browser. The bindings sit on top of PyQt5 and are implemented as three separate modules corresponding to the different libraries that make up the framework. you can install it like this

pip install PyQtWebEngine

1	pip install PyQtWebEngine

This is the complete code for How to Integrate Flask with PyQt5, name the file app.py

from flask import Flask, render_template, jsonify,request
from flask_socketio import SocketIO, emit
from PyQt5.QtCore import QUrl
from PyQt5.QtWebChannel import QWebChannel
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication
import sys
import threading

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def test_connect():
    emit('my response', {'data': 'Connected'})


@socketio.on('disconnect')
def test_disconnect():
    print('Client disconnected')


@app.route('/api')
def api():
    channel = QWebChannel()
    channel.registerObject('flask', request.environ['werkzeug.websocket'])
    return jsonify({'port': channel.port()})


def run_pyqt6():
    app = QApplication(sys.argv)
    view = QWebEngineView()
    view.setWindowTitle("GeeksCoders.com")
    channel = QWebChannel()
    view.page().setWebChannel(channel)
    view.load(QUrl('http://localhost:5000'))
    view.show()
    sys.exit(app.exec())


if __name__ == '__main__':
    # Start the Flask server in a separate thread
    server = threading.Thread(target=socketio.run, args=(app,))
    server.start()

    # Start the PyQt6 application in a separate thread
    pyqt6 = threading.Thread(target=run_pyqt6)
    pyqt6.start()

from flask import Flask, render_template, jsonify,request

from flask_socketio import SocketIO, emit

from PyQt5.QtCore import QUrl

from PyQt5.QtWebChannel import QWebChannel

from PyQt5.QtWebEngineWidgets import QWebEngineView

from PyQt5.QtWidgets import QApplication

import sys

import threading

app = Flask(__name__)

app.config['SECRET_KEY'] = 'secret!'

socketio = SocketIO(app)

@app.route('/')

def index():

return render_template('index.html')

@socketio.on('connect')

def test_connect():

emit('my response', {'data': 'Connected'})

@socketio.on('disconnect')

def test_disconnect():

print('Client disconnected')

@app.route('/api')

def api():

channel = QWebChannel()

channel.registerObject('flask', request.environ['werkzeug.websocket'])

return jsonify({'port': channel.port()})

def run_pyqt6():

app = QApplication(sys.argv)

view = QWebEngineView()

view.setWindowTitle("GeeksCoders.com")

channel = QWebChannel()

view.page().setWebChannel(channel)

view.load(QUrl('http://localhost:5000'))

view.show()

sys.exit(app.exec())

if __name__ == '__main__':

# Start the Flask server in a separate thread

server = threading.Thread(target=socketio.run, args=(app,))

server.start()

# Start the PyQt6 application in a separate thread

pyqt6 = threading.Thread(target=run_pyqt6)

pyqt6.start()

This is our index.html

<!doctype html>
<html>
  <head>
    <title>Flask SocketIO and PyQt6 Integration Example</title>
    <script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script>
      $(document).ready(function(){
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        socket.on('my response', function(msg) {
          console.log(msg.data);
        });
      });
    </script>
  </head>
  <body>
  <h1 style="color:red">Welcome to GeeksCoders.com</h1>
    <h1>Flask SocketIO and PyQt5 Integration Example</h1>
  </body>
</html>

<!doctype html>

<html>

<head>

<title>Flask SocketIO and PyQt6 Integration Example</title>

$(document).ready(function(){

var socket = io.connect('http://' + document.domain + ':' + location.port);

socket.on('my response', function(msg) {

console.log(msg.data);

});

</script>

</head>

<body>

<h1 style="color:red">Welcome to GeeksCoders.com</h1>

<h1>Flask SocketIO and PyQt5 Integration Example</h1>

</body>

</html>

This code sets up basic Flask application with SocketIO server that sends and receives messages. it also creates PyQt5 application that loads the Flask application in QWebEngineView and shows it in a window. when the Flask application is opened in web browser and the PyQt5 application is started, they will communicate with each other via QWebChannel and SocketIO.

Run the code and this will be the result

How to Integrate Python Flask with PyQt5

Learn More on PyQt5

How to Deploy PyQt5 Applications

How to Integrate Python Flask with PyQt5

Learn More on PyQt5

Leave a Comment Cancel reply