'Websocket issue preventing bokeh app deployed in heroku from loading in website

I have a bokeh app deployed in heroku. I want to embed it in a website, but am failing to do so.

The app is here:

https://ckgsb-final.herokuapp.com/cn_ckgsb

And this is for the script to use in the website:

from bokeh.embed import server_document

script = server_document("https://ckgsb-final.herokuapp.com/cn_ckgsb")

print(script)

<script id="1014">
  (function() {
    const xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.open('GET', "https://ckgsb-final.herokuapp.com/cn_ckgsb/autoload.js?bokeh-autoload-element=1014&bokeh-app-path=/cn_ckgsb&bokeh-absolute-url=https://ckgsb-final.herokuapp.com/cn_ckgsb", true);
    
    xhr.onload = function (event) {
      const script = document.createElement('script');
      const src = URL.createObjectURL(event.target.response);
      script.src = src;
      document.body.appendChild(script);
    };
    xhr.send();
  })();
</script>

The procfile for the heroku app is:

web: bokeh serve --port=$PORT --allow-websocket-origin=ckgsb-final.herokuapp.com --address=0.0.0.0 --use-xheaders cn_ckgsb.py

I know the problem is with the websocket. I've tried various combinations of the app url in both the procfile and the script code, but haven't managed to fix it.

Thanks.

herokubokeh


Solution 1:[1]

You need to configure an allowed websocket origin for the URL of the embedding site as well. When users navigate to mysite.org and the page there tries to embed the Bokeh app, the HTTP origin received by the Bokeh server will be mysite.org. If the Bokeh server has not been configured to allow that origin, the request will be rejected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bigreddot

Related Questions