🥇 Seu primeiro aplicativo SPDY

Ilya Grigorik deu uma ótima palestra recentemente intitulada HTTP 2.0 For Fun and Profit , embora na verdade ele fale principalmente sobre SPDY , o protocolo da web de última geração desenvolvido no Google que o Grupo de Trabalho HTTP 2.0 está usando como ponto de partida / sandbox para novas ideias .

SPDY é uma virada de jogo. Isso vai mudar a forma como os desenvolvedores da web entregam conteúdo ao navegador. Não teremos mais que recorrer a hacks , construir arquivos JS e CSS concatenados, dividir recursos em diferentes hosts de ativos para enganar o navegador e fazer o download de mais ativos de uma vez. Teremos que repensar todas as suposições que estamos fazendo atualmente.

Então, para me preparar, eu construí meu primeiro aplicativo SPDY usando node.js e o spdymódulo e vou guiá- lo fazendo a mesma coisa.

Primeiro, aqui está o aplicativo node.js antes de spdy:

var fs = require('fs');
var http = require('http');

var backbone = fs.readFileSync('backbone.js');
var underscore = fs.readFileSync('underscore.js');
var applicationjs = fs.readFileSync('application.js');
var indexhtml = fs.readFileSync('index.html');

var server = http.createServer(function(request, response) {
  var headers = {}
  var body;
  var status = 200;

  switch(request.url){
    case "/":
      headers['Content-Type'] = 'text/html';
      body = indexhtml
      break;
    case "/underscore.js":
      headers['Content-Type'] = 'application/javascript';
      body = underscore;
      break;
    case "/backbone.js":
      headers['Content-Type'] = 'application/javascript';
      body = backbone;
      break;
    case "/application.js":
      headers['Content-Type'] = 'application/javascript';
      body = applicationjs;
      break;
    default:
      body = "";
      status = 404;
  }

  headers['Content-Length'] = body.length;

  response.writeHead(status, headers);

  response.end(body);
});

server.listen(8080, function(){
  console.log("HTTP 1.1 Server started on 8080");
});

Aqui eu criei um httpservidor usando createServer e dei a ele um retorno de chamada do manipulador de solicitação. Cada vez que uma nova solicitação atinge este servidor, ele invoca o retorno de chamada, passando um objeto de solicitação e resposta . Em seguida, escrevo um pequeno código para lidar com URLs diferentes. Estou servindo-se quatro coisas: um arquivo HTML no caminho da raiz, , , e meu . Aqui está o arquivo:underscore.jsbackbone.jsapplication.jsindex.html

<html>
  <head>
    <title>Boring HTTP 1.1 App</title>
    <script src='/underscore.js' type="text/javascript"></script>
    <script src='/backbone.js' type="text/javascript"></script>
    <script src='/application.js' type="text/javascript"></script>
  </head>
  <body>
    <h1>Served with HTTP 1.1</h1>
  </body>
</html>

Agora posso iniciar meu servidor com o nó e ir para no Chrome.localhost:8080

Observe aquele pequeno ícone de raio acinzentado na omnibox do Chrome. Essa é uma pequena extensão chamada Indicador Chrome SPDY . Instale-o e ele ficará verde sempre que você visitar um site que usa SPDY (vá em frente, instale e experimente no google.com ou no twitter.com).

Nosso objetivo é fazer com que o raio fique verde.

Para fazer isso, primeiro temos que npm install spdyinstalar o node-spdy , um ótimo pequeno módulo de nó para escrever servidores spdy. A próxima parte é um pouco enfadonha, mas fique comigo, nós chegaremos às coisas boas em cerca de 3 minutos. Mas, primeiro, precisamos gerar um certificado autoassinado porque o SPDY só funciona com SSL. Felizmente, se você estiver no OS X , é muito simples. Em seu aplicativo de nó, execute estes comandos em seu terminal (ou apenas siga este tutorial :

spdy-js $ mkdir keys
spdy-js $ openssl genrsa -des3 -out keys/server.orig.key 2048
spdy-js $ openssl rsa -in keys/server.orig.key -out keys/server.key
spdy-js $ openssl req -new -key keys/server.key -out keys/server.csr
spdy-js $ openssl x509 -req -days 365 -in keys/server.csr -signkey keys/server.key -out keys/server.crt

Ok, isso não foi tão ruim. Agora, de volta ao nosso aplicativo de nó. Vamos examinar isso.

Primeiro, exigimos o spdymódulo em vez do nosso httpmódulo:

var fs = require('fs');
var spdy = require('spdy');

O spdysubstitui, mas ainda usa o httpmódulo para fallback em navegadores que não suportam SPDY.

Em seguida, apenas carregamos nossos arquivos js e nossos arquivos de certificado que acabamos de gerar:

var backbone = fs.readFileSync('backbone.js');
var underscore = fs.readFileSync('underscore.js');
var applicationjs = fs.readFileSync('application.js');

var options = {
  key: fs.readFileSync('newkeys/server.key'),
  cert: fs.readFileSync('newkeys/server.crt'),
  ca: fs.readFileSync('newkeys/server.csr')
};

Agora criamos um spdyservidor, passando nossas opções de certificado e um manipulador de solicitação:

var server = spdy.createServer(options, function(request, response) {

A seguir, falaremos das vantagens de um recurso incrível do SPDY chamado server push para “enviar” nossos arquivos de ativos para o cliente junto com nossa resposta HTML. O cliente agirá como se os arquivos de ativos enviados já estivessem em seu cache, portanto, ele não precisa fazer solicitações separadas para nossos arquivos de ativos e, em vez disso, pode começar a interpretá-los imediatamente.

Com spdy, tudo o que precisamos fazer é chamar pusho responsepara cada arquivo, assim:

var headers = {
  'content-type': 'application/javascript'
}

response.push('/backbone.js', headers, function(err, stream){
  if (err) return;

  stream.end(backbone);
});
response.push('/underscore.js', headers, function(err, stream){
  if (err) return;

  stream.end(underscore);
});
response.push('/application.js', headers, function(err, stream){
  if (err) return;

  stream.end(applicationjs);
});

Agora podemos terminar respondendo com algum HTML e usando a propriedade para responder com uma mensagem feliz de triunfo se o cliente for capaz de SPDY:request.isSpdy

response.writeHead(200, {'content-type': 'text/html'});
  var message = "No SPDY for you!"
  if (request.isSpdy){
    message = "YAY! SPDY Works!"
  }
  response.end("" +
    "<html>" + 
      "<head>" +
        "<title>First SPDY App!</title>" +
        "<script src='/underscore.js'></script>" +
        "<script src='/backbone.js'></script>" +
        "<script src='/application.js'></script>" +
      "<head>" +
      "<body>" +
        "<h1>" + message + "</h1>" +
      "</body>" +
    "<html>");

Depois de ligar , podemos abrir o Chrome para :server.listen(8081)https://localhost:8081

TRABALHOS SPDY

Observe como o Chrome relata nossos ativos como sendo servidos a partir do cache. Isso é push de servidor em ação:

SERVER PUSH

Você pode pegar o código para este protiptorial no github .

Related Posts