HTML5WS
From mi-linux
Jump to navigationJump to searchMain Page >> Advanced Web Technologies >> Workbook >> Week 05 - HTML5 Web Sockets
HTML5 Web Sockets
This page features the full code of the following webpage: http://mi-linux.wlv.ac.uk/~in9352/websockets/
In order to avoid having to set-up a web socket service on the server, we are using this free, cloud-based web socket API:
The free Sandbox plan includes up to 20 connections and 100,000 messages per day. Both client-side and server-side libraries are provided, so we won't need to write much code at all!
index.html
The webpage itself is using the brand new HTML5 Document type, as well as HTML5 new features:
- New semantic elements, e,g, header, section, footer
- New placeholder attribute for the text boxes
It link to a simple stylesheet (see code further down), as well as 3 JavaScript files:
- pusher.js - the library to access the cloud-based Web Socket API
- jquery-1.6.2.min.js - to facilitate DOM manipulation and Ajax requests.
- websockets.js - our own, JavaScript code (we still need to write some!)
<!DOCTYPE HTML>
<html>
<head>
<title>Share a happy thought</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://js.pusherapp.com/1.9/pusher.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/websockets.js"></script>
</head>
<body>
<header>
<h1>Share a happy thought</h1>
<p>An idea, a saying, a funny quote, a link... anything!</p>
</header>
<section id="new-message">
<form>
<input type="text" id="yourname" placeholder="Your name">
<input type="text" id="yourmessage" placeholder="Your happy thought">
<input type="button" id="postit" value="Post">
<span id="debugmessage"></span>
</form>
</section>
<section id="messages"></section>
<footer>
Powered by
<a href="http://www.html5rocks.com/en/">HTML5</a>,
<a href="http://dev.w3.org/html5/websockets/">Web Sockets</a>,
<a href="http://pusher.com/">Pusher</a>,
<a href="http://jquery.com/">JQuery</a> and
<a href="http://www.css3.info/">CSS3</a>.
Copyright 2011 by Alix Bergeret. All Rights Reserved.
</footer>
</body>
</html>
style.css
Nothing major here, aside from some nice CSS3 effects!
@font-face
{
font-family: alix;
src: url('../fonts/Bubblegum.ttf');
}
a, a.visited, p, header,footer, input, span
{
font-family: Arial
}
body
{
background-color: #E0E0E0
}
a, a.visited
{
color: #FFBF00;
}
span#debugmessage
{
font-size: small
}
header,footer
{
background-color: #4F4FD9;
text-align: center;
padding: 10px;
margin: 10px;
color: #FFBF00;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px 0px #000000;
-moz-box-shadow: 5px 5px 5px 0px #000000;
box-shadow: 5px 5px 5px 0px #000000;
background: rgb(115,115,217); /* Old browsers */
background: -moz-linear-gradient(left, rgba(115,115,217,1) 0%, rgba(79,79,217,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(115,115,217,1)), color-stop(100%,rgba(79,79,217,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(115,115,217,1) 0%,rgba(79,79,217,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(115,115,217,1) 0%,rgba(79,79,217,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(115,115,217,1) 0%,rgba(79,79,217,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7373d9', endColorstr='#4f4fd9',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(115,115,217,1) 0%,rgba(79,79,217,1) 100%); /* W3C */
}
header
{
font-family: alix;
font-size: x-large;
text-shadow: 3px 3px 3px #000000;
filter: dropshadow(color=#000000, offx=3, offy=3);
}
footer
{
font-size: small;
}
p
{
font-size: large;
}
#new-message
{
margin: 10px 20px 5px 20px
}
#yourmessage
{
width: 300px
}
#messages
{
height: 200px;
background-color: #ffffff;
overflow-y: scroll;
overflow-x: hidden;
margin: 10px;
padding: 10px;
border: 1px black solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
websockets.js
Because we are using the provided client-side Pusher library, we don't need to write too much JavaScript code... here it is!
// Make connection when DOM has finished loading
$(document).ready(ConnectToChat);
//------------------------------------------------------------------------------
function ConnectToChat()
{
// Open connection
$('#postit').prop('disabled', 'disabled');
$('#debugmessage').text('Connecting...');
var pusher = new Pusher('90970d90c5a425dc647e');
// Check connection status
pusher.connection.bind('connected', function()
{
$('#postit').removeProp('disabled');
$('#debugmessage').text('Connected!').fadeOut(2000);
});
// Create channel
var myChannel = pusher.subscribe('chat-channel');
// Bind event to function
myChannel.bind('new-message',
function(data)
{
$('#messages').append(data);
$("#messages").prop({ scrollTop: $("#messages").prop("scrollHeight") });
});
// Bind enter key to post message
$('#yourmessage').bind('keypress', function(e) {
if(e.keyCode==13){
SendNewMessage();
}
});
// Bind button click to post message
$('#postit').click(SendNewMessage);
}
//------------------------------------------------------------------------------
function SendNewMessage()
{
// Read name and message from form
var name = $('#yourname').val();
var message = $('#yourmessage').val();
var connecting = $('#postit').prop('disabled');
// Validate input
if(name=='')
name="Anonymous";
// Are we still connecting?
if(connecting)
exit;
if(message!='')
{
// Clear message
$('#yourmessage').val('');
// Send message to server
$.ajax({
url: "http://mi-linux.wlv.ac.uk/~in9352/websockets/push-event.php",
type: "POST",
data: ({name : name, message : message})
});
}
// Refocus on text input ready for next message
$('#yourmessage').focus();
}
