Создайте приложение для обновления фотографий в реальном времени с помощью Instagram API

 var template; $.get('/templates/row.hbs', function(data){ template = Handlebars.compile(data); }, 'html'); 

Вот как выглядит шаблон руля ( public/templates/row.hbs ):

 <div class="row"> <div class="photo-container"> <img src="{{image}}" class="photo"> </div> <div class="photo-details"> <div class="timestamp" data-livestamp="{{created_time}}">{{human_time created_time}}</div> <img src="{{profile_pic}}" class="userphoto" alt="{{user}}"> <a href="http://instagram.com/{{user}}" target="_blank" class="username">{{user}}</a> <div class="caption">{{caption}}</div> </div> </div> 

Он содержит код для отображения фотографий нашего приложения.

Вернувшись в script.js нам нужно подключиться к серверу socket.io.

 var socket = io.connect('http://your-server.com:4000'); 

И зарегистрируйте помощника для преобразования меток времени Unix в удобную для человека форму:

 Handlebars.registerHelper('human_time', function(timestamp){ return moment.unix(timestamp).fromNow(); }); 

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

 $('#start').click(function(){ var tag = $('#tag').val(); $.post( '/tag/subscribe', { 'tag': tag }, function(response){ if(response.type == 'success'){ $('#form-wrapper').addClass('hidden'); $('#results').removeClass('hidden'); } } ) }); 

На серверной стороне (в app.js ) наше приложение должно отписаться от всех текущих подписок в реальном времени, а затем подписаться на новый хэштег, предоставленный пользователем. Мы можем сделать это, используя метод subscribe в объекте tags предоставляемом библиотекой instagram-node-lib. Как только сервер получил действительный ответ от Instagram, мы отправляем ответ, что подписка была завершена.

 var current_tag; app.post('/tag/subscribe', function(req, res){ current_tag = req.body.tag; console.log('current tag: ' + current_tag); instagram.tags.unsubscribe_all({ complete: function(unsubscribe_data) { if(unsubscribe_data == null){ console.log('unsubscribed from everything!'); instagram.tags.subscribe({ object_id: current_tag, callback_url: 'https://xxxxxxxx.ngrok.io/subscribe', complete: function(subscribe_data){ if(subscribe_data){ res.send({type: 'success'}); } } }); } } }); }); 

Когда Instagram получает ваш запрос на подписку на новый тег, он отправляет запрос GET ваш URL обратного вызова. Этот запрос содержит параметр запроса. Все, что нужно сделать серверу, — это отправить его обратно в Instagram для подтверждения.

 app.get('/subscribe', function(req, res){ res.send(req.query['hub.challenge']); }); 

Каждый раз, когда новая фотография с этим тегом публикуется в Instagram, она автоматически отправляет уведомление на ваш сервер. На этот раз это POST запрос к callback_url который вы указали (вам придется изменить это в разделе развертывания). Обратите внимание, что этот запрос не содержит никаких данных о размещенной фотографии. Он содержит только данные о времени и подписке, из которой он возник. Вот почему вы должны сделать отдельный запрос, чтобы получить недавно опубликованную фотографию. После получения ответа создайте новый объект с именем photo а затем сохраните все данные, которые вы хотите вернуть, в новой переменной. В этом случае требуется только следующее: имя пользователя, фотография профиля, отметка времени, с которой было размещено изображение, URL-адрес фотографии и текст заголовка. Наконец, сообщите клиенту, что новая фотография доступна.

 app.post('/subscribe', function(req, res){ instagram.tags.recent({ name: current_tag, count: 1, complete: function(data){ var photo = { 'user': data[0].user.username, 'profile_pic': data[0].caption.from.profile_picture, 'created_time': data[0].created_time, 'image': data[0].images.standard_resolution.url, 'caption': data[0].caption.text }; io.sockets.emit('new_photo', photo); } }); }); 

Отображение результата

Возвращаясь к клиентской стороне (script.js), давайте использовать плагин jQuery Image Preloader для предварительной загрузки изображения при появлении новой фотографии. Это полностью загрузит изображение на клиентской стороне, прежде чем показывать его пользователю. Как только изображение будет предварительно загружено, создайте новый HTML-код, используя template и данные фотографии. Далее мы собираемся использовать плагин jQuery Backstretch для установки изображения в качестве фонового изображения на всю страницу, а также vague.js для размытия фона. После этого вы можете добавить HTML- fadeIn на страницу и затем показать его с эффектом fadeIn . Наконец, удалите последнее изображение, которое было показано.

 socket.on('new_photo', function(data){ $.imgpreload(data.image, function() { console.log('loaded a new image'); var first_row = $('#wrapper .row:first'); var html = template(data); $.backstretch(data['image']); var vague = $('.backstretch').Vague({ intensity: 10, forceSVGUrl: false }); vague.blur(); $(html).hide().insertBefore(first_row).fadeIn('slow'); $('#wrapper .row:last').remove(); }); }); 

По мере того как мы начнем оборачиваться, давайте быстро добавим немного CSS в наше приложение. Вы можете увидеть это в public/css/style.css . Посмотреть файл на GitHub .

развертывание

Теперь вы можете запустить приложение:

 node app.js 

Однако, когда вы перейдете по адресу http: // localhost: 4000 / , введите хэштег и нажмите START , ничего не произойдет. И если вы посмотрите на консоль, то увидите следующую ошибку:

 APISubscriptionError occurred: Invalid response in _request 

Хм! Что дает?

 ngrok http 4000 

 instagram.tags.subscribe({ object_id: tag, callback_url: 'https://xxxxxxxx.ngrok.io/subscribe', ... }); 

 sudo apt-get install supervisor 

 sudo nano /etc/supervisor/conf.d/instagram-realtime.conf 

 [program:instagram-realtime] command=nodemon app.js directory=/home/ubuntu/www stdout_logfile=/home/ubuntu/logs/instagram-realtime.log redirect_stderr=true 

 sudo supervisorctl reread add instagram-realtime start instagram-realtime