JSFiddle - React, Tailwind, and code Playground

by nsshrinivasan

HTML

<div>
    API Key: <input id="api-key" type="text" style="width:300px">
    <input id="submit" type="button" value="Submit">
</div>
<div id="messages"></div>

JavaScript

var websocket;
var apiKey = document.getElementById('api-key');
var submit = document.getElementById('submit');
var messages = document.getElementById('messages');
submit.onclick = function() {
    if (websocket != null) {
        websocket.close();
    }
    
    websocket = new WebSocket('wss://stream.pushbullet.com/websocket/' + apiKey.value);
    websocket.onopen = function(e) {
        messages.innerHTML += "<p>WebSocket onopen</p>";
    }
    websocket.onmessage = function(e) {
        messages.innerHTML += "<p>" + e.data + "</p>";
    }
    websocket.onerror = function(e) {
        messages.innerHTML += "<p>WebSocket onerror</p>";
    }
    websocket.onclose = function(e) {
        messages.innerHTML += "<p>WebSocket onclose</p>";
    }
}