support for open a url

[savelkouls]

Credits go to:
@ILG2021

Describe the solution and problem
support for open a url instead of using the local webserver

[savelkouls]

PR python-eel#714 still starts a local webserver, and does not add/inject the eel websocket listener to the page that is being loaded.
We might want to do that programmatically, or not run the webserver at all.

[a904guy]

Hey @savelkouls

I've been exploring methods to efficiently pass dynamic data from a Python backend to a JavaScript frontend that is compatible across all browsers. My solution involves appending serialized JSON data to the fragment identifier (hash) of the URL. This allows for different hosts / ports / dimensions / callback names to all be passed automatically via the URL fragment. The same features could be done with http parameters of the URL.

The approach uses URL encoding to safely append key-value pairs as a hash fragment to any URL. For example:

paling.start('https://yourwebsite.com/') 

would generate:

https://yourwebsite.com/#data={%22key%22:%22value%22}&

or:

paling.start('hello.html') 

would generate:

https://localhost/hello.html#data={%22key%22:%22value%22}&

Implementation in JavaScript:

Below is a robust JavaScript function that retrieves and parses the serialized JSON from the URL hash:

function getStartDataFromHash() {
    let hashData = window.location.hash.slice(1);
    const startIndex = hashData.indexOf('data=');

    if (startIndex === -1) {
        console.error("No data found in the hash");
        return null;
    }

    let encodedJson = hashData.substring(startIndex + 5);
    const endIndex = encodedJson.search(/[#&]/);

    if (endIndex !== -1) {
        encodedJson = encodedJson.substring(0, endIndex);
    }

    try {
        const jsonStr = decodeURIComponent(encodedJson);
        return JSON.parse(jsonStr);
    } catch (error) {
        console.error('Failed to decode or parse JSON:', error);
        return null;
    }
}

This function can handle complex scenarios, such as multiple data segments within the hash:

https://awebsite.com/#otherdata#data={%22key%22:%22value%22}&#moredata

Benefits for App Deployments:

This method could bring support for dynamic port assignments, allowing the application to find an open port vs hardcoding the port number, enabling multiple instances of applications to run simultaneously. if port == 0: findOpenPort(). Then one application can run on 8000, the next would bind to 8001 in example.

Benefits for Developers

Developers could have more complex backend processes and pass that data along to the frontend seamlessly.

paling.start('https://yourwebsite.com/', data={'key', 'value'}) 
or:
paling.data.set('key', 'value')

then accessed from javascript as such:

paling.data.get('key')
or
paling.data?.key

Next Steps:

I am prepared to implement this feature and integrate it into a patch fork if you’re interested.

Please let me know if you would like to discuss this in more detail.