Edit in JSFiddle

var apiKey = document.getElementById('apiKey');
var connect = document.getElementById('connect');
var command = document.getElementById('command');
var sendCommand = document.getElementById('sendCommand');
var connectionStatus = document.getElementById('connectionStatus');
var streamLogs = document.getElementById('streamLogs');
var conn = null;

var appendLogs = function(target, message) {
	target.value = message + (target.value != "" ? "\n\n=========\n\n" + target.value : "");
};

connect.addEventListener("click", function() {
  if (conn != null && conn.readyState === 1) {
  	conn.close();
  }
	conn = new WebSocket("wss://mainnet.eos.dfuse.io/v1/stream?token=" + apiKey.value);
	conn.onopen = function() { appendLogs(connectionStatus, "Connected at " + new Date()); };
  conn.onmessage = function(event) { var prettyPrint = JSON.stringify(JSON.parse(event.data), "  ", 2); appendLogs(streamLogs, prettyPrint); };
  conn.onclose = function() { debugger; appendLogs(connectionStatus, "Disconnected with error code " + event.code + " " + event.reason); };
});

sendCommand.addEventListener("click", function() {
	if (conn != null && conn.readyState === 1) {
  	conn.send(command.value);
  } else {
    appendLogs(connectionStatus, "You MUST connect before sending command");
  }
});
<html>
<body>
  <img src="https://www.dfuse.io/hubfs/dfuse-website/dfuse-logo2.svg" height="20px"/> <h1>Streaming API demo</h1><br/>
  <b>API key:</b>
  <!-- Demo key valid until 2018-11-13 11:01:45 -0500 EST -->
  <!-- Request your own Beta API key by going to https://dfuse.io/en/#subscribe -->
  <!-- jti 2370a045-5bf1-4e42-a16a-a3d9931de979 -->
  <input type="text" id="apiKey" value="eyJhbGciOiJLTVNFUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDIxMjQ5MDUsImp0aSI6IjIzNzBhMDQ1LTViZjEtNGU0Mi1hMTZhLWEzZDk5MzFkZTk3OSIsImlhdCI6MTU0MTgyNDkwNSwiaXNzIjoiZGZ1c2UuaW8iLCJzdWIiOiJDaVFBNmNieWU1SjZGUGpxRjhzV0FZTFY1RUo2amxJQ2tsbXRiQk5mMHV0OG4wMUhNa2tTUHdBL0NMUnRRZXJyMHFqSFhnWUtuRHQwQW5VeGhYaDVzbWNNTTZXSGkzTjdPb0Q1ZkxxYjE3UWZKZmtPVWM2MUZnaVVrSXBQYW5UVFVIM2hjS3lLelE9PSIsInRpZXIiOiJiZXRhLXYxIiwidiI6MX0.qPzjmQqYEnvMMoxezvf5AxHHHok9-IqlskfZjt7AtLjMo3pHigGmWEJLX3S3qJI_SyRoLWMk9yZ58d8TM7LeJg" size="35"/>
  <input type="button" id="connect" value="Connect"/><br/>
  <b>Connection status:</b><br/>
  <textarea id="connectionStatus" rows="1" cols="55"></textarea><br/>
  <b>New command:</b><br/>
  <textarea id="command" rows="9" cols="55">{
    "type": "get_actions",
    "listen": true,
    "data": {
      "account": "eosio.token",
      "action_name": "transfer",
      "receiver": "eosbetdice11"
    }
  } 
  </textarea><br/>
  <input type="button" value="Send command" id="sendCommand"/><br/>
  <b>Stream logs:</b><br/>
  <textarea id="streamLogs" rows="15" cols="55"></textarea>
</body>
</html>