Страницы

понедельник, 16 декабря 2013 г.

Server side jQuery. Парсим HTML. Домашнее задание.

Похоже пост об использовании Node.js модуля cheerio не нашел понимания, поэтому я решил выложить свое решение "домашнего задания", озвученного в завершении предыдущего поста по теме. Напомню задачу: к ссылке на профиль автора добавить его аватар. Для решения напишем соответствующую функцию + отредактируем существующий метод построения кэша.


Для начала перейдем по ссылке на страницу профиля любого автора и откроем код аватара:

Стало быть нас интересует тэг "img" в контексте класса ".profile":

Пишем код функции получения ссылки: функция получает объект "author" и добавляет ему свойство "img", содержащее ссылку на аватар, после чего возвращает объект в функцию обратного вызова, переданную в нее последним аргументом.
function getImg(author, cb) {
  request(url + author['url'], function(err, res, body) {
    if (!err && res.statusCode == 200) {
      var $ = cheerio.load(body);
      var img = $('img', '.profile').first().attr('src');
      if (img.indexOf('http://') !== 0) img = url + img;
      author['img'] = img;      
      cb(author);
    }
  });
}

Редактируем метод build() нашего кэша: вместо того, чтобы собирать код страницы в цикле, как это было реализовано в прошлый раз, мы будем добавлять элементы списка к уже готовому коду страницы с помощью метода append() объекта cheerio - как в jQuery.

Обновленный код приложения выглядит так:
var request = require('request'),
    cheerio = require('cheerio'),
    http = require('http'),
    url = 'http://www.vr-online.ru';

var cache = {  
  push: function(o) {
    for (var i=0; i<this.data.length; i++) {
      if (this.data[i]['name'] === o.name) {
        this.data[i]['count']++;
        return;
      }
    }
    o['count'] = 1;
    this.data.push(o);
  },
  build: function() {
    this.page = '<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">' + 
        '<style type="text/css">img{width:40px;height:40px;}</style><body><ul id="auth"></ul></body></html>';
    var $ = cheerio.load(this.page), ul = $('#auth'), self = this;
    for (var i=0; i<this.data.length; i++) {
      getImg(this.data[i], function(author) {           
        ul.append('<li>' + '<a href="http://' + url + author['url'] + '">' + '<img src="' + author['img'] + '"> ' + 
            author['name'] + '</a> - ' + author['count'] + '</li>');
        self.page = $.html();
      });
    }    
    console.log('--- Cache is built ---');
  }
};

function getImg(author, cb) {
  request(url + author['url'], function(err, res, body) {
    if (!err && res.statusCode == 200) {
      var $ = cheerio.load(body);
      var img = $('img', '.profile').first().attr('src');
      if (img.indexOf('http://') !== 0) img = url + img;
      author['img'] = img;      
      cb(author);
    }
  });
}

function buildCache() {
  console.log('\n--- Building cache ---\n');
  request(url, function(err, res, body) {
    if (!err && res.statusCode == 200) {
      var $ = cheerio.load(body);
      cache.data = [];
      $('p a','.meta').each(function() {        
        cache.push({name: this.text(), url: this.attr('href')});
      });      
      cache.build();
    }
  });
}

buildCache();
setInterval(function() {buildCache();}, 60000);

http.createServer( function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});  
  res.end(cache.page);
}).listen('3000', '127.0.0.1', function() {
  console.log('--- Server started on http://localhost:3000 ---\n');
});

Запускаем приложение:

В браузере идем по адресу http://localhost:3000 ...

Конечно в выводе в консоль сообщения "Cache is built" есть доля лукавства, так как код получения ссылки на аватар выполняется асинхронно, но это уже совсем другая история...