<!DOCTYPE html>
<meta charset="utf-8"/>
<title>A simple Websocket listener</title>
<script>
  var webSocket = new WebSocket("ws://localhost:3000");
  webSocket.onmessage = function (event) {
    var msg = JSON.parse(event.data);
    console.log('Received data: ' + event.data);
    var status = document.getElementById("status");
    console.log('status: ' + status);
    status.innerHTML = JSON.stringify(msg);
  }
</script>

<h3>A simple Websocket listener</h3>
<p>
  <!-- we set the status dynamically from the websocket data -->
  Status: <div id="status"></div>
</p>

<!DOCTYPE html>
<meta charset="utf-8"/>
<title>A simple Websocket listener</title>
<h3>A simple Websocket listener</h3>
<p>
  <!-- we set the status dynamically from the websocket data -->
  Status: <div id="status"></div>
</p>

<script>
  var webSocket = new WebSocket("ws://localhost:3000");
  webSocket.onmessage = function (event) {
    var msg = JSON.parse(event.data);
    console.log('Received data: ' + event.data);
    var status = document.getElementById("status");
    console.log('status: ' + status);
    status.innerHTML = JSON.stringify(msg);
  }
</script>


Move the <script> to the bottom
Move the <script> to the bottom

To make sure the DOM element it refers to actually exists.
