Demo link

Demo Docker Image on Docker Hub

Streamlit component for Streamlit applications embedded in an iFrame.

(spm) pip install git+https://github.com/GitMarco27/streamlit_post_message.git

This tool was developed to meet a basic need: to pass information between a Streamlit application, embedded in an iFrame, and a JavaScript based WebApplication (Vue, React...) via postMessage.

The component uses streamlit-javascript to execute the javascript code.

streamlit_post_message is a "custom" Streamlit component that facilitates communication between a Streamlit application embedded in an iFrame and its parent window. The communication is handled using the postMessage API via an EventListener in JavaScript. Below is a detailed description of how the code works.

1. First, when the Streamlit application is loaded, a confirmation is sent to the parent window. This message tells to the parent window that the tool is listening for a postMessage, containing a generic Payload.

2. The tool is now listening for a postMessage from the parent window. The message must match the message_key in order to be accepted by the Streamlit component. message_key can be defined manually during the call to the def of the component.

3. The component will continue to be executed, with a specified delay between executions, until the payload is received from the parent window.

It's suggested to work with an anaconda virtual environment, with Python>=3.6. The code is actually developed and tested on Unix, with Python==3.10.12.

conda create -n spm python==3.10.12
conda activate spm
(spm) pip install poetry
(spm) poetry install

Using the pre-commit git hooks to ensure checks before committing.

(spm) pre-commit install
(spm) pre-commit autoupdate

This tool requires a specific structure to be followed by our JavaScript-based application Streamlit in an iFrame. For this reason, a very simple html/js-based demo is provided.

Nginx is a high-performance web server and reverse proxy server. It handles incoming web traffic efficiently by distributing client requests across multiple servers, improving load balancing and speed. It can serve static content directly and manage dynamic content through proxies to application servers. Nginx uses an event-driven, asynchronous architecture for handling many connections simultaneously with minimal resource usage.

You can build and try this demo locally:

docker build -t streamlit_post_message .

docker run -p 80:80 streamlit_post_message

At 0.0.0.0 or localhost you should see something like this:

For more details, please check index.html and demo.py.