How to use multiprocessing in eel

Question

The logic of my program is following: user clicks button (on UI)

-> triggering method of multiprocessing counter (from js to python)

-> starting multiprocessing counter loop(in python)

-> displaying counter number to UI (from python to html through js)

My question is why it can't display counter number on UI?

The following is my code:

python:

import eel,time
from multiprocessing import Process

count = 0

eel.init('static')


@eel.expose
def do_something():
    global p
    p = Process(target=run_forever)
    p.start()
    print('start a process.')
    print(f'The process is alive or not:{p.is_alive}')


def run_forever():
    global count
    while 1:
        print(time.time())
        time.sleep(1)
        count = count + 1
        eel.js_counter(count)


@eel.expose
def end_do_something():
    global p
    p.terminate()
    p.terminate()
    print('stop process')
    p.join()
    print(f'The process is alive or not:{p.is_alive}')


if __name__ == '__main__':
    eel.start('index.html',size=(600,400))

index.html:

<h1>Hello World</h1>
    <p ></p>
    <b></b>
    <form>
        <input type="text" id="myText" required/>
        <input type="submit" onclick="return input_val()" value="print text">
    </form>

<button class="call_python" onclick="btn_index()">Call_python start timing</button>
<a href="another_page.html">go to another page</a>

<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript" src="/eel.js"></script>

another_page.html:

<h1>Hello World</h1>
<p>This is home</p>
<input type="button" onclick="change_input_val()" value="change text">
<input type="button" onclick="end_counter()" value="end counter">

<a href="index.html">go back to index</a>
<script type="text/javascript" src="./another_page.js"></script>
<script type="text/javascript" src="/eel.js"></script>

index.js:

async function btn_index(){
    await eel.do_something()();
}
eel.expose(js_counter);
function js_counter(count){
    sessionStorage.setItem("counter", count);
    document.querySelector('p').innerHTML = count
}

function input_val(){
    document.querySelector('b').innerHTML = document.getElementById("myText").value;
    sessionStorage.setItem("test", document.getElementById("myText").value);
    return false;
}
window.onload = function (){
    document.querySelector('b').innerHTML = sessionStorage.getItem('test');
    document.querySelector('p').innerHTML = sessionStorage.getItem('counter');
}

another_page.js:

function change_input_val(){
    let a = sessionStorage.getItem('test');
    a += 'testing';
    sessionStorage.setItem("test", a);
}

async function end_counter(){
    await eel.end_do_something()();
}

Environment:

• OS: Windows 10 1909
• Browser: Chrome
• Version: EEL 0.14.0
• Python 3.8.7 32bit

Issue:

If I block multiprocessing program, it works!! (displaying the number of counter)

But I want to use multiprocessing to call counter.

Could anyone help solve this problem, not displaying on UI but I want to display, please

Thanks!!

Answer 1

Remember, when you use multiprocessing, you are launching a separate process with a separate memory space. The objects and variables are not connected in any way. If you need to communicate, you need to use a Queue or a Pipe.

In general, multiprocessing works best when you can have the other process do a big chunk of work, and then return some signal to the mothership over a Queue.