HTML5 WebSocket

by zerrax

HTML

<input id="message" />
<div id="output"></div>

<ul>
<li><span class="chevron top"></span>10h30<a>7,105</a><span></span></li>
</ul>

CSS

ul{
  width: 100%;
  height:100%;
  padding:0;
  margin:0;
  list-style: none;
}
ul li{
  padding: 5px;
}
ul > li > span{
  padding: 0 10px;
}
.chevron::before {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.40em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
  color:red;
}
.chevron.top:before {
  color: green;
}

JavaScript

var message = document.getElementById("message"),
    output = document.getElementById("output");

message.addEventListener("keypress", function(e) {
    if(this.value) {
        if (e.keyCode == 13) { 
            sendMessage(this.value); 
            this.value = null;
        }
    }
});

websocket = new WebSocket("wss://echo.websocket.org/");
websocket.onopen = function() { 
    output.innerHTML += "<p>&gt; CONNECTED</p>"; 
};

websocket.onmessage = function(e) { 
    output.innerHTML += "<p style='color: blue;'>&gt; RESPONSE: " + e.data + "</p>"; 
};

websocket.onerror = function(e) {
    output.innerHTML += "<p style='color: red;'>&gt; ERROR: " + e.data + "</p>";
};
            
function sendMessage(message) {
    output.innerHTML += "<p>&gt; SENT: " + message + "</p>";
    websocket.send(message);
}