Skip to content

Instantly share code, notes, and snippets.

@ramin-ahmadi

ramin-ahmadi/index.html

Last active June 28, 2018 23:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramin-ahmadi/1e3c4bd31f8541b7933024a226d63853 to your computer and use it in GitHub Desktop.
Save ramin-ahmadi/1e3c4bd31f8541b7933024a226d63853 to your computer and use it in GitHub Desktop.
Download ZIP
WebSockets // source http://jsbin.com/wunamuc
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style id="jsbin-css">
#results{
border: 1px solid red;
padding:5px
}
#tweetInput{
margin-bottom:10px;
}
</style>
</head>
<body>
<h2>WebSocket Test</h2>
<div class="form-inline">
<input type="text" id="tweetInput" class="form-control" placeholder="what's hapenning?"/>
<button type="button" id="tweet" class="btn btn-default">Tweet</button><br />
</div>
<div id="results"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
$( document ).ready(function() {
var wsUri = 'ws://echo.websocket.org/';
var webSocket;
$(document).ready(function () {
if (checkSupported()) {
connect();
$('#tweet').click(doTweet);
}
});
function writeOutput(message) {
var output = $("#results");
output.html(output.html() + message+"<br>");
}
function checkSupported() {
if (window.WebSocket) {
writeOutput('WebSockets supported!');
return true;
}
else {
writeOutput('WebSockets NOT supported');
$('#tweet').attr('disabled', 'disabled');
return false;
}
}
function connect() {
webSocket = new WebSocket(wsUri);
webSocket.onopen = function (evt) { onOpen(evt);};
webSocket.onclose = function (evt) { onClose(evt); };
webSocket.onmessage = function (evt) { onMessage(evt); };
webSocket.onerror = function (evt) { onError(evt); };
}
function doTweet() {
if (webSocket.readyState != webSocket.OPEN)
{
writeOutput("NOT OPEN: " + $('#tweetInput').val());
return;
}
writeOutput("SENT: " + $('#tweetInput').val());
webSocket.send($('#tweetInput').val());
}
function onOpen(evt) {
writeOutput("CONNECTED");
}
function onClose(evt) {
writeOutput("DISCONNECTED");
}
function onMessage(evt) {
writeOutput('RESPONSE: ' + evt.data);
}
function onError(evt) {
writeOutput('ERROR: ' + evt.data);
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h2>WebSocket Test</h2>
<div class="form-inline">
<input type="text" id="tweetInput" class="form-control" placeholder="what's hapenning?"/>
<button type="button" id="tweet" class="btn btn-default">Tweet</button><br />
</div>
<div id="results"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
</body>
<script src="https://code.jquery.com/jquery.min.js"><\/script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><\/script>
</html>
</script>
<script id="jsbin-source-css" type="text/css">#results{
border: 1px solid red;
padding:5px
}
#tweetInput{
margin-bottom:10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$( document ).ready(function() {
var wsUri = 'ws://echo.websocket.org/';
var webSocket;
$(document).ready(function () {
if (checkSupported()) {
connect();
$('#tweet').click(doTweet);
}
});
function writeOutput(message) {
var output = $("#results");
output.html(output.html() + message+"<br>");
}
function checkSupported() {
if (window.WebSocket) {
writeOutput('WebSockets supported!');
return true;
}
else {
writeOutput('WebSockets NOT supported');
$('#tweet').attr('disabled', 'disabled');
return false;
}
}
function connect() {
webSocket = new WebSocket(wsUri);
webSocket.onopen = function (evt) { onOpen(evt);};
webSocket.onclose = function (evt) { onClose(evt); };
webSocket.onmessage = function (evt) { onMessage(evt); };
webSocket.onerror = function (evt) { onError(evt); };
}
function doTweet() {
if (webSocket.readyState != webSocket.OPEN)
{
writeOutput("NOT OPEN: " + $('#tweetInput').val());
return;
}
writeOutput("SENT: " + $('#tweetInput').val());
webSocket.send($('#tweetInput').val());
}
function onOpen(evt) {
writeOutput("CONNECTED");
}
function onClose(evt) {
writeOutput("DISCONNECTED");
}
function onMessage(evt) {
writeOutput('RESPONSE: ' + evt.data);
}
function onError(evt) {
writeOutput('ERROR: ' + evt.data);
}
});</script></body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>
Raw
jsbin.wunamuc.css
#results{
border: 1px solid red;
padding:5px
}
#tweetInput{
margin-bottom:10px;
}
Raw
jsbin.wunamuc.js
$( document ).ready(function() {
var wsUri = 'ws://echo.websocket.org/';
var webSocket;
$(document).ready(function () {
if (checkSupported()) {
connect();
$('#tweet').click(doTweet);
}
});
function writeOutput(message) {
var output = $("#results");
output.html(output.html() + message+"<br>");
}
function checkSupported() {
if (window.WebSocket) {
writeOutput('WebSockets supported!');
return true;
}
else {
writeOutput('WebSockets NOT supported');
$('#tweet').attr('disabled', 'disabled');
return false;
}
}
function connect() {
webSocket = new WebSocket(wsUri);
webSocket.onopen = function (evt) { onOpen(evt);};
webSocket.onclose = function (evt) { onClose(evt); };
webSocket.onmessage = function (evt) { onMessage(evt); };
webSocket.onerror = function (evt) { onError(evt); };
}
function doTweet() {
if (webSocket.readyState != webSocket.OPEN)
{
writeOutput("NOT OPEN: " + $('#tweetInput').val());
return;
}
writeOutput("SENT: " + $('#tweetInput').val());
webSocket.send($('#tweetInput').val());
}
function onOpen(evt) {
writeOutput("CONNECTED");
}
function onClose(evt) {
writeOutput("DISCONNECTED");
}
function onMessage(evt) {
writeOutput('RESPONSE: ' + evt.data);
}
function onError(evt) {
writeOutput('ERROR: ' + evt.data);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment