How to communicate between multiple javascript files in python eel

Question

I am trying to make a HTML app using eel. In this app I have two javascript files and want to make communication between my python main.py file. It will get a string from "show()" and "show2()".The string from "show()" will go to my "script.js" file and the string from "show2()" will go to "script2.js".I am able to get strings from "show()" but not from show2(). Only one javascript file is working and the other is not working. Can someone please help me with it?

Here is my python "main.py" code:

import eel
import time
import wikipedia
import socket
import os
import pyttsx3
import webbrowser
import datetime
import sound

engine= pyttsx3.init("sapi5")
en_id = "HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Speech\\Voices\\Tokens\\TTS_MS_Cortana"
engine.setProperty("voice",en_id)
def say(audio):
    engine.say(audio)
    engine.runAndWait()

@eel.expose
def show(text):
    user=text.lower()
    
    if "hello" in user or "hey" in user:
        ans="Hello, how can I help you?"
        time.sleep(0.5)
        eel.boxes2(ans)
        say(ans)
@eel.expose
def show2(text2):
    print(text2)
    eel.boxes3("hello")



eel.init("eel")
eel.start("index.html",size=(460,660))

And here is my "script.js" file. This file is working:

var nav=document.getElementById("content");
var textbox=document.getElementById("input"); 
var tag=document.createElement("i");

textbox.onclick=function(){
    nav.style.display="none";

}
eel.expose(boxes2);
function boxes2(reply){
    var tag=document.createElement("a");
    var text=document.createTextNode(reply);
    tag.appendChild(text);
    var element=document.getElementById("box2");
    element.appendChild(tag);
}


function boxes(){
    var textbox=document.getElementById("input"); 
    text= textbox.value;
    eel.show(text)
    var cover=document.createElement("p");
    var tag=document.createElement("i");
    var text=document.createTextNode(text);
    tag.appendChild(text);
    cover.appendChild(tag);
    var element=document.getElementById("box2");
    element.appendChild(cover);
    textbox.value="";
    
}
var sub = document.getElementById("send");


sub.onclick=function(){
    boxes();
    boxes2(reply); 
}

And here is my "script2.js". This is the file which is not working in python eel:

eel.expose(boxes3)
function boxes3(reply2){
    eel.show2("bye")
    var tag=document.createElement("p");
    var text=document.createTextNode(reply2);
    tag.appendChild(text);
    var element=document.getElementById("box2");
    element.appendChild(tag);
}

var sub2 = document.getElementById("hello");


sub2.onclick=function(){
    boxes3(reply2); 
}

Here is my index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Aurora</title>
    <link rel="Icon" href="logo.ico" type="png" hreflang="en">
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div style="background-color: blanchedalmond; width: 500px; height: 30px; position: fixed; top: 0;">
        <label id="options" title="options">...</label>
        <button id="hello" >hello</button>
    </div>
    <div style="width: max-content; height: 630px; overflow-y: scroll; overflow-x: hidden;scroll-behavior: auto;">
        <div id="box2" style="width: 470px;  height: max-content; margin-top: 35pt;margin-left: 20px;"></div>
    </div>
    
    <div id="content">
        <label id="close" title="close">×</label>
        <h1 style="font-family: segoe ui; position: relative; top: -50px;left: 10px; font-weight: 300;">Aurora</h1>
        <button style="width: 100%; font-size: 15pt; text-align: left; position: relative; top: 220pt; border:none; padding: 7pt;outline: none; " id="settings">Settings</button>
        <button style="width: 100%; font-size: 15pt; text-align: left; position: relative; top: 220pt; border: none; padding: 7pt;outline: none;  " id="settings">About</button>
        <button style="width: 100%; font-size: 15pt; text-align: left; position: relative; top: 220pt; border: none; padding: 7pt;outline: none;  " id="settings">Commands</button>
    </div>
    
    <div id="user-input">
        <form>
            <textarea id="input" placeholder="Ask me something" title="ask aurora"></textarea>
        </form>
        <button id="send" title="send text">Send</button>
    </div>
    <script src="eel.js"></script>
    <script src="script.js"></script>
    <script src="script2.js"></script>
    
    
</body>
</html>

Please help me!!!

Please, add `index.html` to your question, my be the problem is in loading `script2.js`. — Nour-Allah Hussein, Jan 03 '21 at 11:58

score 0 · Answer 1 · answered Jan 03 '21 at 07:25

all functions decorated with @eel.expose must be between eel.init and eel.start.

Try using the following line:

eel.init('eel', allowed_extensions=['.js', '.html'])

This will look for exposed functions in all js and html files contained in your eel folder.

How to communicate between multiple javascript files in python eel

1 Answers1