SPDY Server Push

‹prev | My Chain | next›

Thanks to an assist from Mike Belshe (OK not so much an assist, more he solved it completely), I now have server push working in node-spdy.

This is just a spike at this point and not yet general purpose. When the client connects to the node-spdy server, I am trying to server push a dumb version of the CSS stylesheet. As Mike pointed out, I was missing version and status in the push stream's headers.

I had experimented with a number of headers. Per the spec:

The pushed stream inherits all of the headers from the associated-stream-id with the exception of ":host", ":scheme", and ":path", which are provided as part of the pushed response stream headers.

I completely overlooked the part of the spec describing responses (push or otherwise):

The response status line is unfolded into name/value pairs like other HTTP headers and must be present:

":status" - The HTTP response status code (e.g. "200" or "200 OK")
":version" - The HTTP response version (e.g. "HTTP/1.1")

So I go ahead and add this to my dumb, push version of the /style.css stylesheet in the node-spdy sample app:

var PushStream = exports.PushStream = function(cframe, c) {
  stream.Stream.call(this);
  this.streamID = 2; // TODO auto-increment even numbers per: http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2#TOC-Stream-creation

  this.associatedStreamId = cframe.data.streamID;
  this.c = c;

  this._headers = {
    "cache-control": "public, max-age=0",
    url: "https://localhost:8081/style.css",
    "status": 200,
    "version": "http/1.1",
    "content-length": 20,
    "content-type": "text/css; charset=UTF-8",
    etag: "347-1306200491000",
    "last-modified": "Tue, 24 May 2011 01:28:11 GMT"
  };
};

Now, when I load up the sample node-spdy app, I see:



That is definitely the dumb version of the /style.css stylesheet in effect:

  push_stream.write(
    "h1 { color: orange }"
  );

Taking a look at this in the SPDY tab of about:net-internals, I see that my push stream is adopted by Chrome:

t=1307160566672 [st= 0] +SPDY_SESSION  [dt=?]
                         --> host = "localhost:8081"
                         --> proxy = "DIRECT"
t=1307160566672 [st= 0]     SPDY_SESSION_RECV_SETTINGS  
                            --> settings = ["[0:100]"]
t=1307160566672 [st= 0]     SPDY_SESSION_SYN_STREAM  
                            --> flags = 1
                            --> accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
                                accept-charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
                                accept-encoding: gzip,deflate,sdch
                                accept-language: en-US,en;q=0.8
                                host: localhost:8081
                                method: GET
                                scheme: https
                                url: /
                                user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.1 Safari/535.1
                                version: HTTP/1.1
                            --> id = 1
t=1307160566677 [st= 5]     SPDY_SESSION_SYN_REPLY  
                            --> flags = 0
                            --> accept-ranges: bytes
                                cache-control: public, max-age=0
                                connection: keep-alive
                                content-length: 698
                                content-type: text/html; charset=UTF-8
                                etag: "698-1306200491000"
                                last-modified: Tue, 24 May 2011 01:28:11 GMT
                                status: 200 OK
                                version: HTTP/1.1
                            --> id = 1
t=1307160566711 [st=39]     SPDY_SESSION_PUSHED_SYN_STREAM  
                            --> associated_stream = 1
                            --> flags = 2
                            --> cache-control: public, max-age=0
                                content-length: 20
                                content-type: text/css; charset=UTF-8
                                etag: 347-1306200491000
                                last-modified: Tue, 24 May 2011 01:28:11 GMT
                                status: 200
                                url: https://localhost:8081/style.css
                                version: http/1.1
                            --> id = 2
t=1307160566711 [st=39]     SPDY_SESSION_RECV_DATA  
                            --> flags = 0
                            --> size = 20
                            --> stream_id = 2
...

The new status and version are in place and seem to be making the difference.

After receiving the pushed CSS as well as the HTML for the page itself, Chrome notes that yes, it really is a legit push stream:

t=1307160566714 [st=42]     SPDY_STREAM_ADOPTED_PUSH_STREAM  

That is not new. I had node-spdy that far days ago. What is new is that, since I have all of the necessary headers in place, Chrome does not block waiting on a HEADERS SPDY frame. Instead, it makes the next request (an AJAX POST):

t=1307160566721 [st=49]     SPDY_SESSION_SYN_STREAM  
                            --> flags = 0
                            --> accept: */*
                                accept-charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
                                accept-encoding: gzip,deflate,sdch
                                accept-language: en-US,en;q=0.8
                                content-length: 18
                                content-type: application/xml
                                host: localhost:8081
                                method: POST
                                origin: https://localhost:8081
                                referer: https://localhost:8081/
                                scheme: https
                                url: /
                                user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.1 Safari/535.1
                                version: HTTP/1.1
                            --> id = 3

After sending the headers for that request, Chrome sends the POST data itself:

t=1307160566723 [st=51]     SPDY_SESSION_SEND_DATA  
                            --> flags = 1
                            --> size = 18
                            --> stream_id = 3

The server replies with header and data:

t=1307160566725 [st=53]     SPDY_SESSION_SYN_REPLY  
                            --> flags = 0
                            --> connection: keep-alive
                                status: 200 OK
                                version: HTTP/1.1
                            --> id = 3
t=1307160566761 [st=89]     SPDY_SESSION_RECV_DATA  
                            --> flags = 0
                            --> size = 18
                            --> stream_id = 3
t=1307160566761 [st=89]     SPDY_SESSION_RECV_DATA  
                            --> flags = 0
                            --> size = 0
                            --> stream_id = 3

And that is it.

The most important aspect of this SPDY session is that the browser never requests the CSS stylesheet. The page itself definitely includes the CSS:

<!DOCTYPE html> 
<html> 
  <head> 
    <link rel=icon type=image/png href="favicon.png" /> 
    <link rel=stylesheet type=text/css href="style.css" /> 
 
    <title>SPDY Server</title> 
...

But since the server performed a SPDY server push, the client recognizes that the resource in question has already been pushed into cache, making a request unnecessary.

And, if I shift-reload the page, I by-pass cache and download the real stylesheet for the node-spdy sample app:




Yay! SPDY server push is finally mine!


Day #39