2010-06-14 20:02:08 +02:00
< title > Web Socket< / title >
< style >
#chat { width: 97%; }
.them { font-weight: bold; }
.them:before { content: 'them '; color: #bbb; font-size: 14px; }
.you { font-style: italic; }
2010-06-14 20:05:20 +02:00
.you:before { content: 'you '; color: #bbb; font-size: 14px; font-weight: bold; }
2010-06-14 20:02:08 +02:00
#log {
overflow: auto;
max-height: 300px;
list-style: none;
2010-06-14 20:05:20 +02:00
padding: 0;
/* margin: 0;*/
2010-06-14 20:02:08 +02:00
}
#log li {
2010-06-14 20:05:20 +02:00
border-top: 1px solid #ccc;
margin: 0;
2010-06-14 20:02:08 +02:00
padding: 10px 0;
}
< / style >
< article >
< form >
< 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 >
< p > To test, open two windows with Web Socket support, type a message above and press return.< / p >
2010-10-19 21:59:47 +02:00
< p > The server side code is available here: < a href = "http://github.com/remy/html5demos/tree/master/server/" > node-web-socket & server< / a > (note that it runs on < a href = "http://nodejs.org/" title = "node.js" > nodejs< / a > )< / p >
2010-06-14 20:02:08 +02:00
< ul id = "log" > < / ul >
< / article >
< script >
2011-08-18 11:18:57 +02:00
// let's invite Firefox to the party.
if (window.MozWebSocket) {
window.WebSocket = window.MozWebSocket;
}
2010-06-14 20:02:08 +02:00
function openConnection() {
// uses global 'conn' object
if (conn.readyState === undefined || conn.readyState > 1) {
2010-10-19 21:59:47 +02:00
conn = new WebSocket('ws://node.remysharp.com:8001');
2010-06-14 20:02:08 +02:00
conn.onopen = function () {
state.className = 'success';
state.innerHTML = 'Socket open';
};
conn.onmessage = function (event) {
2011-08-18 11:18:57 +02:00
// console.log(event.data);
var message = event.data; //JSON.parse(event.data);
if (!(/^\d+$/).test(message)) {
2010-06-14 20:02:08 +02:00
log.innerHTML = '< li class = "them" > ' + message.replace(/[< >& ]/g, function (m) { return entities[m]; }) + '< / li > ' + log.innerHTML;
} else {
connected.innerHTML = message;
}
};
conn.onclose = function (event) {
state.className = 'fail';
state.innerHTML = 'Socket closed';
};
}
}
var connected = document.getElementById('connected'),
log = document.getElementById('log'),
chat = document.getElementById('chat'),
form = chat.form,
conn = {},
state = document.getElementById('status'),
entities = {
'< ' : '< ',
'>' : '> ',
'& ' : '& '
};
if (window.WebSocket === undefined) {
state.innerHTML = 'Sockets not supported';
state.className = 'fail';
} else {
state.onclick = function () {
if (conn.readyState !== 1) {
conn.close();
setTimeout(function () {
openConnection();
}, 250);
}
};
addEvent(form, 'submit', function (event) {
event.preventDefault();
// if we're connected
if (conn.readyState === 1) {
conn.send(JSON.stringify(chat.value));
log.innerHTML = '< li class = "you" > ' + chat.value.replace(/[< >& ]/g, function (m) { return entities[m]; }) + '< / li > ' + log.innerHTML;
chat.value = '';
}
});
openConnection();
}
< / script >