Pusher - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 48

// Adds an event listener for the custom event triggered by Pusher
channel
.bind(
'send-message',
function(data) {
var cont = $('#messages');
// Removes the placeholder LI if it's present
cont.find('.no-messages').remove();
// Adds the new message to the page
$('<li>')
.html('<strong>'+data.name+':</strong> '+data.msg)
.appendTo(cont);
}
);
// Handles form submission
$('form').submit(function(){
// Posts the form data so it can be sent to other browsers
$.post('post.php', $(this).serialize());
// Empties the input
$('#message').val('').focus();
// Prevents the default form submission
return false;
});
})(jQuery);
this code catches the submit event, sends the serialized form data to post.php , and empties the message input.
It leaves the name input untouched to make repeated messages easier to send; to that end, it also puts focus
back on the message input.
By returning false , the default form submission is prevented, which stops the page from reloading.
Now you're ready to test this app. Load your htML file in a browser and send a message or two; the messages
are shown in the list on the right side, as expected. But this isn't really the exciting part.
to see the power of realtime, load this test in two different browsers (or two windows in the same browser) and
start sending some messages. With no polling and no page refreshes, you'll see that events in one window are
affecting the display of the other (see Figure 3-7 ). this is realtime.