WebSockets Tutorial on WebSockets JavaScript Application
the following program code describes the working of a chat application using javascript and web socket protocol.
<!doctype html>
<html lang = "en">
<head>
<meta charset = utf-8>
<title>html5 chat</title>
<body>
<section id = "wrapper">
<header>
<h1>html5 chat</h1>
</header>
<style>
#chat { width: 97%; }
.message { font-weight: bold; }
.message:before { content: ' '; color: #bbb; font-size: 14px; }
#log {
overflow: auto;
max-height: 300px;
list-style: none;
padding: 0;
}
#log li {
border-top: 1px solid #ccc;
margin: 0;
padding: 10px 0;
}
body {
font: normal 16px/20px "helvetica neue", helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
section, header {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff;
border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 16px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
header, article > * {
margin: 20px;
}
#status {
padding: 5px;
color: #fff;
background: #ccc;
}
#status.fail {
background: #c00;
}
#status.success {
background: #0c0;
}
#status.offline {
background: #c00;
}
#status.online {
background: #0c0;
}
#html5badge {
margin-left: -30px;
border: 0;
}
#html5badge img {
border: 0;
}
</style>
<article>
<form onsubmit = "addmessage(); return false;">
<input type = "text" id = "chat" placeholder = "type and press
enter to chat" />
</form>
<p id = "status">not connected</p>
<p>users connected: <span id = "connected">0
</span></p>
<ul id = "log"></ul>
</article>
<script>
connected = document.getelementbyid("connected");
log = document.getelementbyid("log");
chat = document.getelementbyid("chat");
form = chat.form;
state = document.getelementbyid("status");
if (window.websocket === undefined) {
state.innerhtml = "sockets not supported";
state.classname = "fail";
}else {
if (typeof string.prototype.startswith != "function") {
string.prototype.startswith = function (str) {
return this.indexof(str) == 0;
};
}
window.addeventlistener("load", onload, false);
}
function onload() {
var wsuri = "ws://127.0.0.1:7777";
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 onopen(evt) {
state.classname = "success";
state.innerhtml = "connected to server";
}
function onclose(evt) {
state.classname = "fail";
state.innerhtml = "not connected";
connected.innerhtml = "0";
}
function onmessage(evt) {
// there are two types of messages:
// 1. a chat participant message itself
// 2. a message with a number of connected chat participants
var message = evt.data;
if (message.startswith("log:")) {
message = message.slice("log:".length);
log.innerhtml = '<li class = "message">' +
message + "</li>" + log.innerhtml;
}else if (message.startswith("connected:")) {
message = message.slice("connected:".length);
connected.innerhtml = message;
}
}
function onerror(evt) {
state.classname = "fail";
state.innerhtml = "communication error";
}
function addmessage() {
var message = chat.value;
chat.value = "";
websocket.send(message);
}
</script>
</section>
</body>
</head>
</html>
the key features and the output of the chat application are discussed below −
to test, open the two windows with web socket support, type a message above and press return. this would enable the feature of chat application.
if the connection is not established, the output is available as shown below.
the output of a successful chat communication is shown below.
