Error - WebSocket is already in CLOSING or CLOSED state

Drivers & Stacks Javascript
1

Hi,

I made a new Graph in my Database. And the new graph has new credentials of bolt, http and https. I am able to start the browser from the second newly created Graph and create new nodes and relationships .

Image-

neo4j-desktop-browser-century
neo4j-desktop-browser-century.png1540×877 53.9 KB

However, when i run it in Neovis.js code, i get error -

    WebSocket is already in CLOSING or CLOSED state.

    Error: "WebSocket connection failure. Due to security constraints in your web browser, the reason for the 
     failure is not available to this Neo4j Driver. Please use your browsers development console to determine 
     the root cause of the failure. Common reasons include the database being unavailable, using the wrong 
      connection URL or temporary network problems. If you have enabled encryption, ensure your browser is 
      configured to trust the certificate Neo4j is configured to use. WebSocket `readyState` is: 3"

code -

   <!doctype html>
   <meta charset="utf-8"/>
   <html>
    <head>
    <title>Neovis.js Simple Example</title>
    <style type="text/css">
    html, body {
        font: 16pt arial;
        }
    #viz {
        width: 1200px;
        height: 650px;
        border: 10px solid #456789;
        font: 22pt arial;
       }
     </style>

        <!-- FIXME: load from dist -->
       <script type="text/javascript" src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"> 
       </script>


        <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"

        integrity="sha256-sE6zxOJrertYxAvaJV2os04Zi8BozuYdv/Cv+ykPM+4="

        crossorigin="anonymous"></script>

      <script type="text/javascript">
   
      var viz;
      function draw() {
        var config = {
            container_id: "viz",
            server_url: "bolt://localhost:7687",
            server_user: "neo4j",
            server_password: "V1",
            labels: {
                //"Character": "name",
                "API": {
                    "caption": "name",
                    "size": "pagerank",
                    "community": "community"
                    //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
                }
            },
            relationships: {
                "cc": {
                    "thickness": "weight",
                    "caption": false
                }
            },
         
        RETURN cc",
           initial_cypher :"MATCH (n) RETURN (n)"  ,                 
           arrows: true
        };                   
        viz = new NeoVis.default(config);
        viz.render();
        console.log(viz);
    }
</script>