HTML and CSS Reference
In-Depth Information
In the previous example, you can see I'm hooking up a new EventSource object to the sample.php file, which
is just returning the time and date of the server. From there, I'm just listening for the onmessage event and handling
it by concatenating the event's data and type to a string and rendering it to the screen by setting innerHTML equal
to that value. For more information about the Web Notifications API, visit http://dev.w3.org/2006/webapi/
WebNotifications/publish/Notifications.html .
Note
You will need to host this example on a local or remote server for it to work.
WebSockets
WebSockets are finally here! With WebSockets (WS), you can make dynamic and collaborate experiences for the Web
using the new API and protocol. WebSockets can be used to make multiperson, interactive, and collaborative web content
all within the browser natively without the need of a plug-in like Flash to use a socket connection. The WebSockets
specification aims to provide a bidirectional conversation mechanism that moves well beyond the traditional HTTP
unidirectional protocol. It initially relies on a single HTTP request to create the connection, but the connection is then
upgraded, so either side can send and transfer data simultaneously. With WS, you can provide real-time updates to data
feeds and even provide multiuser collaboration without the need of Ajax or long polling over HTTP. Listing 12-10 shows
the API portion of the specification, but keep in mind that it's both an API and a protocol.
Listing 12-10. WebSockets Example
<script>
window.URL = window.webkitURL || window.URL;
window.WebSocket = window.WebSocket || window.MozWebSocket;
var ws = new WebSocket('ws://johnpercival.org/socket', 80);
ws.binaryType = 'blob'; // or ' arraybuffer '
ws.onopen = function(e) {
console.log('Connection OPEN');
};
ws.onmessage = function(e) {
console.log('MESSAGE');
};
//Send data to the websocket server
var data = "Sample Data";
ws.send(data);
</script>
By reviewing the example, you'll notice you set up a new WebSocket object and pass it a parameter of a WS:
protocol and domain and pass a second parameter of an open port, in this case 80. Once the connection is made
via HTTP and upgraded to WS, both the server and client can send data at any time, even at the same time. Only
the data itself is sent without the overhead of HTTP headers, which dramatically reduces the bandwidth needed to
transfer; in addition, because it's a push scenario, there is no need for the client to keep polling the server for updated
information. There are even useful polyfills for using WebSockets in older, nonsupported browsers like Socket.io,
which fail over to a Flash socket, Ajax, or long polling in the event the browser doesn't support it. I think you'll see
many examples of WebSockets in advertising to create really interesting experiments where users can compete (in
real time) with each other directly inside the ad unit. You can find some really interesting WebSocket experiments at
http://labs.dinahmoe.com/plink , http://socketracing.com , and http://mrdoob.com/projects/multiuserpad .
For more information on the WebSockets API, visit http://w3.org/TR/2012/WD-websockets-20120809 , and be sure
to check its support by visiting http://lcaniuse.com/#feat=websockets .
 
 
Search WWH ::




Custom Search