HTML5WS

From mi-linux
Revision as of 15:19, 3 August 2011 by In9352 (talk | contribs)
Jump to navigationJump to search

Main 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();

}

push-event.php

This time we are using the provided server-side Pusher library (Pusher.php), so again not too much for us to do! 

<?php

  require('Pusher.php');
  
  // Read and clean user input
  $message = CleanInput($_POST['message']);
  $name = CleanInput($_POST['name']);
  
  // My Pusher credentials, get your own!
  $key = '90970d90c5a425dc647e';
  $secret = '2fe8744d317a9955f35b';
  $app_id  = '6889';
  
  // Create pusher object
  $pusher = new Pusher($key, $secret, $app_id);
  
  // Trigger new-message event, which will be sent to all clients
  $pusher->trigger('chat-channel', 'new-message', $name.' says: '.$message.'<br />');

//------------------------------------------------------------------------------
function CleanInput($text) 
{
  $text = stripslashes($text);
  $text = htmlentities($text);
  $text = preg_replace('/https?:\/\/[^\s<]+/i', '<a href="\0">\0</a>', $text);
  
  return $text;
}
?>
Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=HTML5WS&oldid=6897"