Я потерял свой телефон. Я оставил его на диване в торговом центре и вернулся обратно, чтобы найти его ушел. Кто-то подарил новый телефон через ужасное искусство кражи. Я отправил код JavaScript удаленно на мой телефон через Интернет, который отправлял мне координаты устройства в любое время, когда я отправил ему сообщение. Я отследил его до ресторана Sizzler, пока они не выключили телефон и он не исчез навсегда. Я купил себе новый телефон, но увидел мощный потенциал в мощном приложении, которым едва пользовался, пока этот пункт не вызвал {X}.
В этой статье я расскажу о совершенно другом использовании приложения по сравнению с ужасной историей моего потерянного телефона. Я хотел бы показать вам, как вы можете использовать свое устройство Android для отправки удаленных инструкций на живую веб-страницу. Я буду использовать пример удаленного управления HTML-презентацией, но концепции могут быть расширены для выполнения любого количества интересных вещей.
Мы будем использовать следующие технологии:
Если у вас нет телефона Android, не волнуйтесь! Теоретически вы можете использовать любое другое устройство, которое может выполнять HTTP-вызовы для работы того же рода волшебства Node / Socket.IO, которое мы собираемся выпустить. В этой статье предполагается, что читатель обладает некоторыми знаниями о Node.js и JavaScript, однако исходный код предоставлен для вашей справки.
Что такое Socket.IO?
Прежде чем мы углубимся в это, я объясню, что делает Socket.IO, как это будет показано в следующих нескольких фрагментах кода. Socket.IO — это библиотека JavaScript, обеспечивающая обмен данными между серверами и клиентами в режиме реального времени. Это позволяет вам определять события как на сервере, так и на клиенте. Например, io.sockets.emit('eventthathappened') создает новое событие, на которое приложение может реагировать. Чтобы отреагировать на событие, просто установите обработчик события, подобный этому — socket.on('eventthathappened', function(){}) .
Программа чата является типичным примером приложения Socket.IO. Сервер прослушивает входящие сообщения от любых клиентов и мгновенно отображает их на всех клиентах, на которых запущено приложение чата. Мы будем использовать его, чтобы мгновенно реагировать на сигналы с устройства Android, пока страница открыта.
Настройка сервера
Структура каталогов этой демонстрации показана на следующем рисунке. Весь код на стороне сервера хранится в основном файле JavaScript, index.js . Внешний интерфейс HTML, CSS и JS хранятся в public папке.
Файл package.json определяет зависимости и другую мета-информацию о приложении Node. Содержимое этого файла показано ниже. Обратите внимание, что в dependencies требуются модули Express и Socket.IO.
{ "name": "androidremotecontrol", "version": "0.0.1", "dependencies": { "express": "3.1.x", "socket.io": "latest" }, "engines": { "node": "0.10.x", "npm": "1.2.x" } }
Поскольку это демо предназначено для размещения на Heroku, нам понадобится Procfile , содержание которого показано ниже (довольно просто!).
web: node index.js
Узловой сервер
Узловой сервер, хранящийся в index.js , показан ниже.
var http = require('http'), express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io').listen(server), port = process.env.PORT || 5000; app.use(express.bodyParser()); app.get('/', function(request, response) { response.sendfile('public/index.html'); }); app.post('/nudging', function(request, response) { io.sockets.emit('nudge'+ request.body.nudged); response.json({success: true}); }); app.get(/^(.+)$/, function(req, res) { res.sendfile('public/' + req.params[0]); }); server.listen(port, function() { console.log('Listening on ' + port); }); io.configure(function() { io.set('transports', ['xhr-polling']); io.set('polling duration', 10); });
Следующие строки из index.js используются для импорта Socket.IO и установки порта сервера.
io = require("socket.io").listen(server), port = process.env.PORT || 5000;
Чтобы Socket.IO работал на Heroku, я обнаружил, что мне нужно добавить эти дополнительные строки для настройки xhr-опроса, а не полагаться на WebSockets (они могут вам не понадобиться для вашей среды). Эти строки говорят серверу подождать 10 секунд, прежде чем ответить пустым ответом, если у него нет конкретного ответа на GET или POST .
io.configure(function () { io.set("transports", ["xhr-polling"]); io.set("polling duration", 10); });
Управление слайдами презентации
В этой демонстрации используется Deck.JS, но вы можете смело заменять любой другой шаблон HTML-презентации, если в нем есть вызов JS для перемещения между слайдами. Для Deck.JS просто скачайте и разархивируйте его в общую папку.
Самый важный маршрут на сервере Node — это запрос POST который позволяет нам взаимодействовать с нашими слайдами презентации. Этот маршрут показан ниже.
app.post('/nudging', function(request, response) { io.sockets.emit('nudge'+ request.body.nudged); response.json({success: true}); });
Предыдущий код вызывает io.sockets.emit('nudgeleft') или io.sockets.emit('nudgeright') зависимости от данных JSON, отправляемых с запросом. Ключевым моментом здесь является то, что маршрут отвечает JSON. Если вы этого не сделаете, ваши запросы будут находиться в тайм-ауте, как они будут сидеть, ожидая ответа от сервера. На этом этапе вы можете запустить сервер локально или отправить его в Heroku для развертывания.
Настройка Socket.IO
Дополнительный JavaScript был добавлен в презентацию в public/js/magic.js как показано ниже:
(function() { var socket = io.connect(window.location.hostname); socket.on('nudgeleft', function() { $.deck('next'); }); socket.on('nudgeright', function() { $.deck('prev'); }); }());
Первая строка подключается к нашему серверу Socket.IO по адресу window.location.hostname . В целях этой демонстрации мы будем просты и размещаем все в одном домене. Два обработчика событий прослушивают любой запрос, чтобы подтолкнуть слайды влево или вправо. Если это замечено, то мы запускаем функции prev или next в Deck.JS для перемещения слайдов.
Секретный соус {X}
on {X} — это приложение для Android, которое позволяет вам управлять устройством Android и отвечать на события, такие как входящие текстовые сообщения, местоположение GPS, время работы от батареи и многое другое, с помощью JavaScript API. В этой демонстрации мы будем использовать ее для отправки этих запросов к серверу, когда произойдет подталкивание.
Начало работы с {X}
- Загрузите приложение на свое устройство: https://www.onx.ms/#!downloadAppPage .
- Во время загрузки перейдите по адресу https://www.onx.ms в браузере своего компьютера и войдите в систему {X}, используя свою учетную запись Facebook (не беспокойтесь, это просто используется для синхронизации кода между вашим устройством и на {X]. }).
- Вы попадете на панель инструментов {X}. Вы можете перейти к рецептам, чтобы изучить интересные фрагменты кода, которые уже доступны, если вы заинтересованы, но мы собираемся углубиться в пользовательский код для этого урока.
- Нажмите на ссылку записи кода в верхнем левом углу страницы, чтобы открыть редактор кода.
- Оставьте это окно открытым, мы собираемся добавить туда немного кода.
Кодирование на {X}
Как упоминалось выше, в {X} есть JavaScript API, который позволяет вам вызывать и обнаруживать множество событий на вашем Android-устройстве. Для этой демонстрации мы сосредоточимся в основном на методе device.gestures.on .
Первое, что нужно сделать, это вернуться в это окно с открытым редактором кода на {X}, и вы увидите «Имя правила:», переименуйте его во что-нибудь более дружественное, например, «Контроль представления презентации». Мой код {X} показан ниже. Обратите внимание, что вы хотите заменить http://androidremotecontrol.herokuapp.com на свой собственный сервер.
device.gestures.on('nudgeLeft', function() { device.notifications.createNotification('the phone was nudged left').show(); device.ajax({ url: 'http://androidremotecontrol.herokuapp.com/nudging', type: 'POST', dataType: 'json', data: '{"nudged":"left"}', headers: {'Content-Type':'application/json'} }, function onSuccess(body, textStatus, response) { console.info('successfully received http response!'); }, function onError(textStatus, response) { var error = {}; error.message = textStatus; error.statusCode = response.status; console.error('error: ',error); }); }); device.gestures.on('nudgeRight', function() { device.notifications.createNotification('the phone was nudged right').show(); device.ajax({ url: 'http://androidremotecontrol.herokuapp.com/nudging', type: 'POST', dataType: 'json', data: '{"nudged":"right"}', headers: {'Content-Type':'application/json'} }, function onSuccess(body, textStatus, response) { console.info('successfully received http response!'); }, function onError(textStatus, response) { var error = {}; error.message = textStatus; error.statusCode = response.status; console.error('error: ',error); }); }); device.gestures.startDetection(900000); device.screen.on('on', function () { // Start gestures detection for 1 minute device.gestures.startDetection(900000); });
Компонент device.gestures.on используется для настройки обработчиков событий. Каждый раз, когда {X} обнаруживает смещение слева, nudgeLeft обработчик nudgeLeft . У нас есть строка кода, которая в основном отображает на вашем телефоне уведомление о том, что телефон был сдвинут влево. Вам это не нужно, но я использую его для тестирования, чтобы убедиться, что подталкивание обнаружено. Эта строка кода показана ниже.
device.notifications.createNotification('the phone was nudged left').show();
Далее мы используем метод device.ajax {X} для отправки данных JSON на сервер. Обратите внимание, что тип данных явно определен как JSON. Без этого данные не отправляются должным образом.
В настоящее время onSuccess обратного вызова onSuccess используется только для регистрации успешного ответа HTTP. Это сопоставляется с response.json({success: true}) мы установили ранее на сервере Node. Вы можете добавить больше к этому успешному вызову, чтобы предоставить {X} больше данных, если вы чувствуете такую склонность. Точно так же onError вызов onError используется для регистрации любых ошибок, которые происходят.
Далее мы включаем обнаружение этих жестов на 900 000 миллисекунд. Это будет работать при первом включении кода на вашем устройстве. Скорее всего, вы захотите, чтобы этот код работал дольше 900 000 миллисекунд. То, как я сейчас настроил его, — это включать его каждый раз при включении экрана устройства. Так что если вы хотите контролировать свои слайды, просто включите ваш экран, и у вас есть 900 секунд, чтобы выйти из себя. Из того, что я обнаружил при разработке, вы должны указать ограничение по времени для этой функции. Если вы найдете другой способ, пожалуйста, дайте мне знать в комментариях. Я хотел бы обновить это.
Как только вы обновите код, чтобы он соответствовал адресу вашего сервера, и все было готово к работе, нажмите «сохранить и отправить на телефон», чтобы отправить его через Интернет на ваш телефон. Оттуда откройте ваш URL с презентацией, включите экран вашего Android устройства и попробуйте сместить влево и вправо. Если все прошло хорошо, вы увидите, как ваши слайды переключаются назад и вперед!
Просмотр логов {X}
Если вы хотите просмотреть файлы журналов для {X}, вы можете открыть приложение на своем телефоне Android, выбрать добавленное правило и выбрать «просмотреть журналы». Кроме того, вы можете увидеть их на сайте {X}, когда войдете в систему, перейдя на страницу правил, выбрав правило и щелкнув вкладку «Журналы».
А как насчет безопасности?
Этот метод не является безопасным в любом случае. Если кто-то еще определит адрес вашей презентации и запрос POST который вы отправляете, он может легко переключать ваши слайды из любой точки мира. Для этой и любых других идей, которые вы придумаете, связанных с Socket.IO и {X}, просто имейте в виду, что вы захотите добавить слой безопасности где-нибудь для чего-то слишком общего, как это.
Вывод
Идея этой демонстрации заключается в том, чтобы показать, что с помощью JavaScript, Socket.IO и довольно изящного приложения для Android вы можете использовать свой телефон для воздействия на веб-страницы любым количеством способов. Перемещение слайдов презентации влево и вправо — это только начало. Вы можете изменить отображение веб-страницы в зависимости от вашего местоположения, от того, запущено ли у вас приложение, разрядился ли ваш аккумулятор и т. Д. Если вы создадите небольшой эксперимент с {X} и Socket.IO, я ‘ Я хотел бы услышать об этом. Идите вперед и напишите что-нибудь!
Код
Весь код для этой демонстрации доступен и доступен на GitHub . Моя беговая версия также доступна на Heroku .