Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick, dirty, in-browser websocket playground
<!DOCTYPE html>
<html lang="en">
<head>
<title>websocket playground</title>
<meta charset="utf-8">
<meta name="description" content="Quick, dirty, and in-browser websocket playground">
<meta name="author" content="@vikrum5000">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
<a class="brand" href="#">websocket playground</a>
<p class="pull-right">herp derp</p>
</div>
</div>
</div>
<div class="container">
<input type="text" id="wsuri" value="ws://localhost:8080/conn/foo" />
<button class="btn" id="wsconnect">Connect</button>
<div class="row">
<div class="span6">
<h3>console</h3>
<p>
<textarea id="wsinput" class="span6" rows="20"></textarea>
</p>
<button class="btn" id="wssend">Send</button>
</div>
<div class="span10">
<h3>websocket</h3>
<div id="wsoutput"></div>
<button class="btn" id="clearoutputbutton">Clear</button>
</div>
</div>
</div>
<script>
var websocket;
var connected = false;
function updateGuiState() {
if (connected) {
$('#wssend').attr('disabled', false);
$('#wsconnect').html('Disconnect');
} else {
$('#wssend').attr('disabled', true);
$('#wsconnect').html('Connect');
}
}
function connectButton() {
if (connected) {
disconnect();
} else {
connect();
}
updateGuiState();
}
function disconnect() {
websocket.close();
}
function connect() {
try {
var uri = $('input#wsuri').val();
websocket = new WebSocket(uri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
} catch (err) {
console.log(err)
$(wrapWithTime("<div class='alert-message error'>Error creating WebSocket; check URI</div>")).prependTo('#wsoutput');
}
}
function sendConsole() {
var payload = $('textarea#wsinput').val();
websocket.send(payload);
}
function wrapWithTime(msg) {
return "<div class='alert-message block-message warning'>" + msg + "<h5><small>" + new Date() + "</small></h5></div>";
}
function onOpen(evt) {
connected = true;
$(wrapWithTime("<div class='alert-message success'>Connected to " + $('input#wsuri').val() + "</div>")).prependTo('#wsoutput');
updateGuiState();
}
function onClose(evt) {
connected = false;
$(wrapWithTime("<div class='alert-message warning'>Disconnected</div>")).prependTo('#wsoutput');
updateGuiState();
}
function onMessage(evt) {
$(wrapWithTime("<pre>" + evt.data + "</pre>")).prependTo('#wsoutput');
}
function onError(evt) {
console.log(evt);
$(wrapWithTime("<div class='alert-message error'>Error: " + evt.data)).prependTo('#wsoutput');
}
$('#wsconnect').click(function() {
connectButton();
});
$('#wssend').click(function() {
sendConsole();
});
$('#clearoutputbutton').click(function() {
$('#wsoutput').empty();
});
$(function() {
updateGuiState();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.