{"id":253606,"date":"2015-03-23T17:30:07","date_gmt":"2015-03-23T13:30:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=253606"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=253606","title":{"rendered":"\u0423\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u043c \u0441 Node.js \u0438 Socket.io"},"content":{"rendered":"<p>       \u0411\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u043b\u044c\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0442\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e. \u0412\u0430\u043c \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u043e\u043a\u0435\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Node.js \u0438 <a href=\"http:\/\/socket.io\/\">Socket.io<\/a>, \u0447\u0442\u043e\u0431\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u0440\u0443\u0442\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a HTML5 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0439, \u043d\u043e \u043d\u0435 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043d\u0438\u0445 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0430 \u0434\u043b\u044f \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0439 \u043d\u0430\u043c\u0438 \u0438\u0434\u0435\u0438. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <a href=\"https:\/\/github.com\/hakimel\/reveal.js\/\">Reveal.js<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438\u043b\u0438 \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043a \u044d\u043a\u0440\u0430\u043d\u0443 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430.<\/p>\n<p>  \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0431\u043e\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043d\u043e \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u0430\u043a\u0442\u0438\u0432\u0435\u043d \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n<h5>\u0418\u0434\u0435\u044f<\/h5>\n<p>  \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430 \u2014 Reveal.js \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 URL \u0432 \u0432\u0438\u0434\u0435 \u0445\u0435\u0448\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <b><a href=\"http:\/\/example.com\/#\/1\">example.com\/#\/1<\/a><\/b>). \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0445\u0435\u0448 \u043d\u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0445 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c \u043b\u044e\u0431\u043e\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u0440\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043b\u0430\u0439\u0434\u0430, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044e \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u0412\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u0441\u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u0440\u043e\u043b\u044c \u0438 \u0431\u0443\u0434\u0435\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0443 Reveal.js \u0443\u0436\u0435 \u0435\u0441\u0442\u044c API, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0441\u043c\u0435\u043d\u044b \u0438 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438 \u0445\u0435\u0448\u0430 \u043f\u0440\u043e\u0449\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0435\u044e.<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/288\/d0c\/233\/288d0c23339e47c3832c4d8d36c18fb5.jpg\"\/><br \/>  <i>\u041d\u0430\u0448\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/i><\/p>\n<h5>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/h5>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0438\u043b\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0443 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u0442\u0438\u043f\u0430 Heroku. \u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u043e\u0449\u0435, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c node.js \u0438 npm. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 heroku toolbelt \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.  <\/p>\n<h6>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e:<\/h6>\n<p>   <\/p>\n<ol>\n<li>\u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0430\u0440\u0445\u0438\u0432 \u0441 \u043a\u043e\u0434\u043e\u043c;<\/li>\n<li>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e node.js \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d;.<\/li>\n<li>\u0420\u0430\u0437\u0430\u0440\u0445\u0438\u0432\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u043a\u0430\u0447\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b;<\/li>\n<li>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438;<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 <code>npm install<\/code> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a;<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <code>node app.js<\/code>;<\/li>\n<li>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080<\/a> \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c (\u201c<b>kittens<\/b>\u201c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e);<\/li>\n<li>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 http:\/\/&lt;\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430&gt; \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0443 \u0436\u0435 \u0444\u0440\u0430\u0437\u0443;<\/li>\n<li>\u0420\u0430\u0434\u0443\u0439\u0442\u0435\u0441\u044c!<\/li>\n<\/ol>\n<p>  <\/p>\n<h6>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 Heroku:<\/h6>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0430\u0440\u0445\u0438\u0432 \u0441 \u043a\u043e\u0434\u043e\u043c;<\/li>\n<li>\u0420\u0430\u0437\u0430\u0440\u0445\u0438\u0432\u0438\u0440\u0443\u0439\u0442\u0435 \u0435\u0433\u043e;<\/li>\n<li>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443;<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043f\u0435\u0440\u0432\u044b\u0439 commit;<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Heroku;<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 <code>git push heroku master<\/code>;<\/li>\n<li>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0435\u0433\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c \u201c<b>kittens<\/b>\u201d (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).<\/li>\n<\/ol>\n<p>  \u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/devcenter.heroku.com\/articles\/getting-started-with-nodejs#introduction\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0415\u0441\u043b\u0438 \u0412\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0448\u0430\u0433\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<h5>\u041a\u043e\u0434<\/h5>\n<p>  \u0425\u0432\u0430\u0442\u0438\u0442 \u0440\u0430\u0437\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043a\u043e\u0434! \u0423 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 JavaScript \u0444\u0430\u0439\u043b\u0430 \u2013 app.js \u0434\u043b\u044f back-end \u0438 script.js \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Node.js 0.10+ \u0438\u043b\u0438 \u0432 io.js.<\/p>\n<p>  \u0412 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"http:\/\/expressjs.com\/\">express<\/a> \u0438 <a href=\"http:\/\/socket.io\/\">socket.io<\/a>. \u0415\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 socket.io \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u043d\u0438\u0445. \u0421 <a href=\"http:\/\/expressjs.com\/guide\/using-middleware.html#middleware.built-in\">express.static<\/a> \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0430\u043f\u043e\u043a. \u0412 \u0444\u0430\u0439\u043b\u0435 <b>public\/index.html<\/b> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0441\u0430\u043c\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f. \u041e\u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 express.static, \u0442\u0430\u043a \u0447\u0442\u043e \u0432 \u0430\u0434\u0440\u0435\u0441\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u201c\/\u201d.<br \/>  <b>app.js<\/b>  <\/p>\n<pre><code class=\"javascript\">\/\/ This is the server-side file of our mobile remote controller app. \/\/ It initializes socket.io and a new express instance. \/\/ Start it by running 'node app.js' from your terminal.   \/\/ Creating an express server  var express = require('express'),     app = express();  \/\/ This is needed if the app is run on heroku and other cloud providers:  var port = process.env.PORT || 8080;  \/\/ Initialize a new socket.io object. It is bound to  \/\/ the express app, which allows them to coexist.  var io = require('socket.io').listen(app.listen(port));   \/\/ App Configuration  \/\/ Make the files in the public folder available to the world app.use(express.static(__dirname + '\/public'));   \/\/ This is a secret key that prevents others from opening your presentation \/\/ and controlling it. Change it to something that only you know.  var secret = 'kittens';  \/\/ Initialize a new socket.io application  var presentation = io.on('connection', function (socket) {      \/\/ A new client has come online. Check the secret key and      \/\/ emit a &quot;granted&quot; or &quot;denied&quot; message.      socket.on('load', function(data){          socket.emit('access', {             access: (data.key === secret ? &quot;granted&quot; : &quot;denied&quot;)         });      });      \/\/ Clients send the 'slide-changed' message whenever they navigate to a new slide.      socket.on('slide-changed', function(data){          \/\/ Check the secret key again          if(data.key === secret) {              \/\/ Tell all connected clients to navigate to the new slide                          presentation.emit('navigate', {                 hash: data.hash             });         }     }); });  console.log('Your presentation is running on http:\/\/localhost:' + port); <\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u0438 JavaScript \u0434\u043b\u044f front-end, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/hashchange\">hashchange<\/a> \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 socket.io \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<br \/>  <b>public\/assets\/js\/script.js<\/b>  <\/p>\n<pre><code class=\"javascript\">$(function() {      \/\/ Apply a CSS filter with our blur class (see our assets\/css\/styles.css)          var blurredElements = $('.homebanner, div.reveal').addClass('blur');      \/\/ Initialize the Reveal.js library with the default config options     \/\/ See more here https:\/\/github.com\/hakimel\/reveal.js#configuration      Reveal.initialize({         history: true\t\t\/\/ Every slide will change the URL     });      \/\/ Connect to the socket      var socket = io();      \/\/ Variable initialization      var form = $('form.login'),         secretTextBox = form.find('input[type=text]');      var key = &quot;&quot;, animationTimeout;      \/\/ When the page is loaded it asks you for a key and sends it to the server      form.submit(function(e){          e.preventDefault();          key = secretTextBox.val().trim();          \/\/ If there is a key, send it to the server-side         \/\/ through the socket.io channel with a 'load' event.          if(key.length) {             socket.emit('load', {                 key: key             });         }      });      \/\/ The server will either grant or deny access, depending on the secret key      socket.on('access', function(data){          \/\/ Check if we have &quot;granted&quot; access.         \/\/ If we do, we can continue with the presentation.          if(data.access === &quot;granted&quot;) {              \/\/ Unblur everything             blurredElements.removeClass('blurred');              form.hide();              var ignore = false;              $(window).on('hashchange', function(){                  \/\/ Notify other clients that we have navigated to a new slide                 \/\/ by sending the &quot;slide-changed&quot; message to socket.io                  if(ignore){                     \/\/ You will learn more about &quot;ignore&quot; in a bit                     return;                 }                  var hash = window.location.hash;                  socket.emit('slide-changed', {                     hash: hash,                     key: key                 });             });              socket.on('navigate', function(data){                      \/\/ Another device has changed its slide. Change it in this browser, too:                  window.location.hash = data.hash;                  \/\/ The &quot;ignore&quot; variable stops the hash change from                 \/\/ triggering our hashchange handler above and sending                 \/\/ us into a never-ending cycle.                  ignore = true;                  setInterval(function () {                     ignore = false;                 },100);              });          }         else {              \/\/ Wrong secret key              clearTimeout(animationTimeout);              \/\/ Addding the &quot;animation&quot; class triggers the CSS keyframe             \/\/ animation that shakes the text input.              secretTextBox.addClass('denied animation');                          animationTimeout = setTimeout(function(){                 secretTextBox.removeClass('animation');             }, 1000);              form.show();         }      });  }); <\/code><\/pre>\n<h4>It\u2019s Slideshow Time!<\/h4>\n<p>  \u041d\u0430\u0448 \u043f\u0443\u043b\u044c\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430 \u0433\u043e\u0442\u043e\u0432! \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0412\u0430\u043c \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0438 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.<\/p>\n<p>  <b><a href=\"http:\/\/cdn.demo.tutorialzine.com\/2015\/02\/smartphone-remote-control-for-presentations\/smartphone-remote-control-presentation.zip\">\u0421\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u043e\u0434<\/a><\/b><br \/>  <b><a href=\"http:\/\/tz-smartphone-remote-control.herokuapp.com\/\">\u0414\u0435\u043c\u043e<\/a><\/b>   \t<\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/253719\/\"> http:\/\/habrahabr.ru\/post\/253719\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0411\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u043b\u044c\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0442\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e. \u0412\u0430\u043c \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u043e\u043a\u0435\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Node.js \u0438 <a href=\"http:\/\/socket.io\/\">Socket.io<\/a>, \u0447\u0442\u043e\u0431\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-253606","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/253606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=253606"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/253606\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=253606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=253606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=253606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}