Начнём с написания серверной части программы. Код работает на Node.js

Маршрутизация

Для запуска сервера будет использоваться

http.createServer

if

else

Маршрутизатор – компонент, помогающий распределить запрос к функции, которая может его обработать. Можно сказать маршрутизатору, что запросы

PUT

/^\/talks\/(\/+)$/

/talks/

В NPM есть много хороших модулей маршрутизации, но тут мы сами себе такой напишем, чтобы продемонстрировать принцип его работы.

Вот файл

router.js

require

var Router = module.exports = function() {

 this.routes = [];

};

Router.prototype.add = function(method, url, handler) {

 this.routes.push({method: method,

          url: url,

          handler: handler});

};

Router.prototype.resolve = function(request, response) {

 var path = require("url").parse(request.url).pathname;

 return this.routes.some(function(route) {

  var match = route.url.exec(path);

  if (!match || route.method != request.method)

   return false;

  var urlParts = match.slice(1).map(decodeURIComponent);

  route.handler.apply(null, [request, response]

                .concat(urlParts));

  return true;

 });

};

Модуль экспортирует конструктор

Router

router

add

resolve

Последний вернёт булевское значение, показывающее, был ли найден обработчик. Метод

some

true

Функции обработчиков вызываются с объектами

request

response

%20

Выдача файлов

Когда тип запроса не совпадает ни с одним из типов, которые обрабатывает маршрутизатор, сервер должен интерпретировать его как запрос файла из общей директории. Можно было бы использовать файловый сервер из главы 20 для выдачи этих файлов, но нам не нужна поддержка

PUT

DELETE

Я выбрал

ecstatic

ecstatic

root

request

response

createServer

var http = require("http");

var Router = require("./router");

var ecstatic = require("ecstatic");

var fileServer = ecstatic({root: "./public"});

var router = new Router();

http.createServer(function(request, response) {

 if (!router.resolve(request, response))

  fileServer(request, response);

}).listen(8000);

Функции respond и respondJSON используются в коде сервера, чтобы можно было отправлять ответы одним вызовом функции.

function respond(response, status, data, type) {

 response.writeHead(status, {

  "Content-Type": type || "text/plain"

 });

 response.end(data);

}

function respondJSON(response, status, data) {

 respond(response, status, JSON.stringify(data),

     "application/json");

}

Темы как ресурсы

Сервер хранит предложенные темы в объекте

talks

/talks/[title]

Обработчик для запросов

GET

var talks = Object.create(null);

router.add("GET", /^\/talks\/([^\/]+)$/,

      function(request, response, title) {

 if (title in talks)

  respondJSON(response, 200, talks[title]);

 else

  respond(response, 404, "No talk '" + title + "' found");

});

Удаление темы делается удалением из объекта talks.

router.add("DELETE", /^\/talks\/([^\/]+)$/,

      function(request, response, title) {

 if (title in talks) {

  delete talks[title];

  registerChange(title);

 }

 respond(response, 204, null);

});

Функция

registerChange

Чтобы было просто получать контент тел запросов, закодированных при помощи JSON, мы определяем функцию

readStreamAsJSON

function readStreamAsJSON(stream, callback) {

 var data = "";

 stream.on("data", function(chunk) {

  data += chunk;

 });

 stream.on("end", function() {

  var result, error;

  try { result = JSON.parse(data); }

  catch (e) { error = e; }

  callback(error, result);

 });

 stream.on("error", function(error) {

  callback(error);

 });

}

Один из обработчиков, которому нужно читать ответы в JSON – это обработчик

PUT

presenter

summary

Если данные выглядят приемлемо, обработчик сохраняет объект, представляющий новую тему, в объекте

talks

registerChange

router.add("PUT", /^\/talks\/([^\/]+)$/,

      function(request, response, title) {

 readStreamAsJSON(request, function(error, talk) {

  if (error) {

   respond(response, 400, error.toString());

  } else if (!talk ||

        typeof talk.presenter != "string" ||

        typeof talk.summary != "string") {

   respond(response, 400, "Bad talk data");

  } else {

   talks[title] = {title: title,

           presenter: talk.presenter,

           summary: talk.summary,

           comments: []};

   registerChange(title);

   respond(response, 204, null);

  }

 });

});

Добавление комментария к теме работает сходным образом. Мы используем

readStreamAsJSON

router.add("POST", /^\/talks\/([^\/]+)\/comments$/,

      function(request, response, title) {

 readStreamAsJSON(request, function(error, comment) {

  if (error) {

   respond(response, 400, error.toString());

  } else if (!comment ||

        typeof comment.author != "string" ||

        typeof comment.message != "string") {

   respond(response, 400, "Bad comment data");

  } else if (title in talks) {

   talks[title].comments.push(comment);

   registerChange(title);

   respond(response, 204, null);

  } else {

   respond(response, 404, "No talk '" + title + "' found");

  }

 });

});

Попытка добавить комментарий к несуществующей теме должна возвращать ошибку 404.

Поддержка длинных запросов

Самый интересный аспект сервера – часть, которая поддерживает длинные запросы. Когда на адрес

/talks

GET

changesSince

Есть много различных ситуаций, в которых нам нужно отправить клиенту список тем, поэтому мы сначала определим вспомогательную функцию, присоединяющую поле

serverTime

function sendTalks(talks, response) {

 respondJSON(response, 200, {

  serverTime: Date.now(),

  talks: talks

 });

}

Обработчик должен посмотреть на все параметры запроса в его URL, чтобы проверить, не задан ли параметр

changesSince

parse

“url”

true

query

query

router.add("GET", /^\/talks$/, function(request, response) {

 var query = require("url").parse(request.url, true).query;

 if (query.changesSince == null) {

  var list = [];

  for (var title in talks)

   list.push(talks[title]);

  sendTalks(list, response);

 } else {

  var since = Number(query.changesSince);

  if (isNaN(since)) {

   respond(response, 400, "Invalid parameter");

  } else {

   var changed = getChangedTalks(since);

   if (changed.length > 0)

     sendTalks(changed, response);

   else

    waitForChanges(since, response);

  }

 }

});

При отсутствии параметра

changesSince

Иначе, сперва надо проверить параметр

changeSince

getChangedTalks

response

waitForChanges

var waiting = [];

function waitForChanges(since, response) {

 var waiter = {since: since, response: response};

 waiting.push(waiter);

 setTimeout(function() {

  var found = waiting.indexOf(waiter);

  if (found > -1) {

   waiting.splice(found, 1);

   sendTalks([], response);

  }

 }, 90 * 1000);

}

Метод

splice

indexOf

splice

Когда объект

response

waiting

waiting

Чтобы найти именно те темы, которые сменились после заданного времени, нам надо отслеживать историю изменений. Регистрация изменения при помощи

registerChange

changes

var changes = [];

function registerChange(title) {

 changes.push({title: title, time: Date.now()});

 waiting.forEach(function(waiter) {

  sendTalks(getChangedTalks(waiter.since), waiter.response);

 });

 waiting = [];

}

Наконец,

getChangedTalks

changes

deleted

getChangedTalks

function getChangedTalks(since) {

 var found = [];

 function alreadySeen(title) {

  return found.some(function(f) {return f.title == title;});

 }

 for (var i = changes.length - 1; i >= 0; i--) {

  var change = changes[i];

  if (change.time <= since)

   break;

  else if (alreadySeen(change.title))

   continue;

  else if (change.title in talks)

   found.push(talks[change.title]);

  else

   found.push({title: change.title, deleted: true});

 }

 return found;

}

Вот и всё с кодом сервера. Запуск написанного кода даст вам сервер, работающий на порту 8000, который выдаёт файлы из публичной поддиректории и управляет интерфейсом тем по адресу

/talks

Клиентская часть веб-сайта по управлению темами состоит из трёх файлов: HTML-страница, таблица стилей и файл JavaScript.

HTML

Серверы по общепринятой схеме в случае запроса пути, соответствующего директории, отдают файл под именем

index.html

ecstatic

/

./public/index.html

./public

Значит, если надо показать страницу, когда браузер будет запрашивать наш сервер, её надо положить в

public/index.html

index

Обмен опытом

Ваше имя: 

Определяется заголовок и включается таблица стилей, где определяются стили – в числе прочего, рамочка вокруг тем. Затем добавлен заголовок и поле

name

Элемент

“talks”

Затем идёт форма для создания новой темы.

 
Submit a talk

 Заголовок: 

 Summary: 

 Отправить 

Скрипт добавит обработчик события

“submit”

Затем идёт загадочный блок, у которого стиль

display

none

  
{{title}}

  
by {{presenter}}

  
{{summary}}

   Добавить комментарий

   Удалить тему