Thursday, May 27th, 2010

Chrome supporting EventSource for server push, and richer Worker API

Category: Chrome

<p>Rick Waldron has been delving into Chrome and Chromium to find some nice updates.

First, he uncovers new support for the EventSource API that allows for simple server push of DOM events as shown in this simple client and server pairing:

javascript
< view plain text >
  1. document.addEventListener('DOMContentLoaded', function () {
  2.  
  3.   var eventSrc  = new EventSource('events.php');
  4.  
  5.   eventSrc.addEventListener('open', function (event) {
  6.     console.log(event.type);
  7.   });
  8.  
  9.   eventSrc.addEventListener('message', function (event) {
  10.     console.log(event.type);
  11.     console.log(event.data);
  12.   });
  13. }, false);
  1. < ?php
  2. header("Content-Type: text/event-stream\n\n");
  3.  
  4. // despite not having the while(true){}
  5. // this seems to repeat pushing messages to the client
  6. echo 'data: ' . time() . "\n";

Then, he finds out that the Web Worker API now supports complex messages, so you can postMessage more than Strings. Send over objects and Arrays with ease:

  1. //  TEST ANOTHER THREAD SAFE OBJECT ARG
  2. var obj = new Object();
  3.  
  4. obj.isArray         = [ 1,2,3,4,5 ];
  5. obj.isString        = 'Foo bar baz',
  6. obj.resultOf        = (function () {
  7.                         return 'returned from self executing function';
  8.                       })();
  9. worker.postMessage(obj);
  10.  
  11. //  TEST STRING ARG
  12. worker.postMessage('Hello Worker Process');
  13.  
  14. //  TEST ARRAY ARG
  15. worker.postMessage([ 1, 2, 3, 4 ]);
  16.  
  17. //  TEST BOOLEAN ARG
  18. worker.postMessage(false);

Related Content:

Posted by Dion Almaer at 6:19 am
3 Comments

+++--
3.5 rating from 2 votes

3 Comments »

Comments feed TrackBack URI

Several WebWorker-related projects worth checking out (some mentioned on Ajaxian before):

1) Metaworker – mapreduce with workers – http://bit.ly/7oTuS5
2) Pmrpc – RPC/pubsub communication with workers and windows/iframes – http://bit.ly/JMtkm (I’m one of the developers)
3) jQuery Hive – creating and managing web workers across implementations – http://bit.ly/c5ihqm
4) Javascript Enumerable.Map() with WebWorkers – http://bit.ly/cY8M9P

Comment by izuzak — May 27, 2010

I’ve made an example on which you can see Server-Sent Event in action using mentioned here Chrome 6, Safari 5 or Opera 9 – http://sapid.sourceforge.net/ssetest/

Comment by sheiko — June 11, 2010

Just for a calcification on the comment within the events.php file that reads:

// despite not having the while(true){}
// this seems to repeat pushing messages to the client

You don’t need a while(true) block at all, because the user agent (browser) is going to ask for updates from that file about every 3 seconds unless you ask for different time, or the events.php returns a non 200 response from the server.

When you setup var eventSrc = new EventSource(‘events.php’); You told the browser that you want to check this file for updates. So the browser will request that file automatically.

The second thing that I would like to fix is the content-type of the event.php file. It should be header(“Content-Type: text/event-stream”); No NN at the end.

The third and final issue I see is that echo ‘data: ‘ . time() . “n”; should read echo ‘data: ‘ . time() . “\n\n”; Like headers, you one a single \n to end the line, and you use \n\n to end the section.

Comment by Dygear — May 24, 2012

Leave a comment

You must be logged in to post a comment.