• > socket.io
• deck.js
• > Heroku
如果您沒有Android手機，請不用擔心！從理論上講，您可以使用任何其他設備可以使HTTP調用以相同的節(jié)點/socket.io sorcery的工作方式使用。本文假設讀者對node.js和javascript有一些了解，但是提供了源代碼供您參考。
• 什麼是socket.io？
• >在我們走得太遠之前，我將解釋socket.io的作用，因為它將顯示在接下來的幾個代碼片段中。 socket.io是一個JavaScript庫，可在服務器和客戶端之間實時通信。它允許您在服務器和客戶端上定義事件。例如，io.sockets.emit（'eventThathathappened'）創(chuàng)建了一個新事件，應用程序可以對此做出反應。為了對事件做出反應，只需設置這樣的事件處理程序 - socket.on（'eventThathApped'，function（）{}）。

>聊天程序是一個常見的示例socket.io應用程序。該服務器聽取來自任何客戶端的傳入消息，並在運行聊天應用程序的所有客戶端上立即顯示它們。我們將使用它在頁面啟動時立即從Android設備中響應信號。

設置服務器
>該演示的目錄結構如下圖所示。所有服務器端代碼都存儲在主JavaScript文件index.js中。前端HTML，CSS和JS存儲在公共文件夾中。

>

package.json文件定義了有關節(jié)點應用程序的依賴項和其他元信息。該文件的內容如下所示。請注意，依賴項中需要Express和socket.io模塊。

>

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

> 網(wǎng)絡：節(jié)點索引

in index.js的以下行用於導入socket.io並設置服務器的端口。

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

為了使socket.io在Heroku上工作，我發(fā)現(xiàn)我必須添加這些額外的行來配置Xhr-Polling而不是依靠Websocket（您可能不需要這些對於環(huán)境）。這些行告訴服務器等待10秒鐘，然後再回答空的響應，如果它對GET或POST請求沒有特定響應。

>

io <span>= require("socket.io").listen(server),
</span>port <span>= process.env.PORT || 5000;</span>

控制演示幻燈片

此演示使用Deck.js，但只要它具有JS調用以在幻燈片之間移動，就可以隨意替換任何其他HTML演示模板。對於deck.js，只需下載並將其解壓縮到公共文件夾。

io<span>.configure(function () {
</span>  io<span>.set("transports", ["xhr-polling"]);
</span>  io<span>.set("polling duration", 10);
</span><span>});</span>

>

>節(jié)點服務器中最重要的路由是郵政請求，它允許我們與演示幻燈片進行交互。該路線如下所示。

>

>先前的代碼調用io.sockets.emit（'nudgeleft'）或io.sockets.emit（'nudgeright'），具體取決於隨請求發(fā)送的JSON數(shù)據(jù)。這裡要提出的關鍵點是路線對JSON做出響應。如果您不這樣做，您的請求將超時，因為它們將坐著，等待服務器的響應。此時，您可以在本地運行服務器，或將其推到Heroku進行部署。

>配置socket.io

app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});</span>

>其他JavaScript已添加到public/js/magic.js中的演示文稿中，如下所示：

第一行連接到我們的socket.io服務器window.location.hostname。出於此演示的目的，我們將保持簡單，並將所有內容都放在一個域上。兩個事件處理人員會收聽任何要求向左或向右推動幻燈片的請求。如果注意到這些，我們會運行Deck.js的前期或下一個功能以移動幻燈片。

on {x}秘密醬

> on {x}是一個Android應用程序，它允許您通過JavaScript API來控制Android設備，並響應傳入的文本消息，GPS位置，電池壽命等事件。在此演示中，我們將使用它在發(fā)行時發(fā)送這些服務器請求。

>

>將應用程序下載到您的設備：https：//www.onx.ms/#！ downloadapppage。
>在下載時，請訪問桌面瀏覽器上的https://www.onx.ms，然後使用您的Facebook帳戶登錄{x}（不用擔心，這只是用於在設備和設備之間同步代碼在{x}）上。
>您將被帶到{x}的儀表板。您可以轉到食譜以探索已經(jīng)有興趣的令人興奮的代碼段，但是我們將直接研究本教程的自定義代碼。
3. 單擊頁面左上角的寫代碼鏈接以提出代碼編輯器。
讓該窗口打開，我們將在其中添加一些代碼。 >
>在{x}
5. 上進行編碼
>如上所述，{x}具有JavaScript API，可讓您在Android設備上調用並檢測許多事件。對於此演示，我們主要關注device.gestures.on方法。

接下來，我們在{x}的device.ajax方法上使用將JSON數(shù)據(jù)發(fā)送到服務器。請注意，數(shù)據(jù)類型被明確定義為JSON。沒有這個數(shù)據(jù)，數(shù)據(jù)無法正確發(fā)送。

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

>

接下來，我們以900,000毫秒的方式打開對這些手勢的檢測。當您首先啟用設備上的代碼時，這將運行。您可能希望此代碼運行超過900,000毫秒。我當前親自設置的方式是，每次設備的屏幕啟動時都會對其進行打開。因此，如果您想控制幻燈片，只需打開屏幕，您就有900秒的時間要瘋狂。根據(jù)我在開發(fā)過程中發(fā)現(xiàn)的內容，您必須為此功能提供時間限制。如果您找到另一種方法，請在評論中告訴我。我很想更新它。

>更新代碼以匹配您的服務器地址，並且已經(jīng)準備就緒，請單擊“保存並發(fā)送到電話”以通過網(wǎng)絡將其發(fā)送到手機。從那裡開始，通過演示文稿打開您的URL，打開Android設備的屏幕，然後嘗試左右輕拍。如果一切順利，您會看到幻燈片來回切換！

>在{x} logs

>如果您想在{x}上查看日誌文件，則可以在Android手機上打開應用程序，選擇添加的規(guī)則，然後選擇“查看日誌”。另外，當您登錄您的規(guī)則頁面，選擇規(guī)則並單擊“日誌”選項卡時，您可以在{x}網(wǎng)站上的網(wǎng)站上看到它們。

安全性呢？

此方法在任何方面都不安全。如果其他任何人都算出您的演示文稿地址以及您要發(fā)送的帖子請求，他們可以輕鬆地將幻燈片從世界各地的任何地方切換。為此，您想到了與socket.io和{x}有關的任何其他想法，請記住，您需要在某個地方添加一層安全性，以使其在某個地方過於通用。

結論

這個演示背後的想法是表明，使用JavaScript，socket.io和一個漂亮的Android應用程序，您可以使用手機以多種方式來影響網(wǎng)頁。閃爍的演示幻燈片左右只是開始。您可以根據(jù)位置，是否正在運行應用程序，電池用完了，可以更改網(wǎng)頁顯示的內容。 D很高興聽到它。出去並編碼一些內容！

代碼

>該演示的所有代碼都已啟動，並在GitHub上可用。我的跑步版本也可以在Heroku上找到。

經(jīng)常詢問有關使用JavaScript控製網(wǎng)頁的問題（常見問題解答）

>

>我可以在沒有事先編程知識的情況下學習JavaScript嗎？

是的，您可以在沒有事先編程知識的情況下學習JavaScript。但是，對HTML和CSS與JavaScript合作以創(chuàng)建交互式網(wǎng)頁時，對HTML和CSS有一個基本的了解是有益的。在線有許多可用的資源，包括教程，視頻和交互式編碼平臺，可以幫助您從頭開始學習JavaScript。

> JavaScript僅用於Web開發(fā)？

> javascript？

JavaScript是安全的，但是像其他任何編程語言一樣，如果不正確使用，則可以利用它。遵循最佳實踐以防止?jié)撛诘陌踩珕栴}，這一點很重要。其中包括驗證和消毒用戶輸入，避免使用est（）使用（）以及定期更新和檢查您的代碼是否漏洞。

可以使用JavaScript來創(chuàng)建動畫嗎？用於在網(wǎng)頁上創(chuàng)建動畫。隨著時間的流逝，它可以更改HTML元素的CSS屬性，從而創(chuàng)造動畫的效果。 JavaScript還提供了requestAnimationFrame方法，該方法是專門設計用於創(chuàng)建光滑，瀏覽器優(yōu)化的動畫的。

什麼是文檔對像模型（DOM）？ HTML和XML文檔的編程接口。它代表文檔的結構，並允許像JavaScript這樣的編程語言操縱文檔的內容，結構和樣式。

> JavaScript如何處理錯誤？

JavaScript使用組合處理錯誤嘗試，捕捉並最終陳述。 Try Block包含可能會出現(xiàn)錯誤的代碼，Catch Block處理錯誤，最後塊包含執(zhí)行的代碼，無論是否丟棄錯誤。