Search code examples
multithreadingherokuflaskhttpserverplotly-dash

Heroku: Get localhost net::ERR_CONNECTION_REFUSED when app deployed


I am running a app.py which has two threads, one for the dash app, and the other for HTTPServer.

app = dash.Dash(__name__)
app.layout = html.Div( ... )
@app.callback( ... )
def do_something( ... ): ...

if __name__ == '__main__':
    httpd = HTTPServer(('localhost', 8000), SimpleHTTPRequestHandler)
    t1 = threading.Thread(target=httpd.serve_forever)
    t2 = threading.Thread(target=app.run_server, kwargs={'debug': False})
    t1.start()
    t2.start()

The reason to run HTTPServer is to retrieve local files with url 'localhost:8000/audios/%s.wav' % clicked_index, and use the url as the src for html.Audio. Particularly, I have .wav files in local audios/, and callback enables hover and triggers audio playback.

It runs without a problem locally with python app.py, but it does not on the deployed app - the hover only triggers part of the audios. In the screenshot, the data point with the hovered info Piano correctly play the audio, but we can see ERR_CONNECTION_REFUSED for other 'localhost:8000/audios/%s.wav' % clicked_index in the right bottom which don't play audio. This doesn't happen locally.

When I check the files with heroku run bash --app myapp, all wav files are there in the audios/.

And if I run python -m http.server 8000 locally, the deployed app runs without problem; no missing audio playback.

I appreciate anyone who enlightens me in this subject which I just started.

enter image description here


Solution

  • According to https://devcenter.heroku.com/articles/s3, Heroku seems to be unable to host static files, and the s3 public bucket satisfies my need.