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

>聊天程序是一個(gè)常見(jiàn)的示例socket.io應(yīng)用程序。該服務(wù)器聽(tīng)取來(lái)自任何客戶端的傳入消息，并在運(yùn)行聊天應(yīng)用程序的所有客戶端上立即顯示它們。我們將使用它在頁(yè)面啟動(dòng)時(shí)立即從Android設(shè)備中響應(yīng)信號(hào)。

設(shè)置服務(wù)器
>該演示的目錄結(jié)構(gòu)如下圖所示。所有服務(wù)器端代碼都存儲(chǔ)在主JavaScript文件index.js中。前端HTML，CSS和JS存儲(chǔ)在公共文件夾中。

>

package.json文件定義了有關(guān)節(jié)點(diǎn)應(yīng)用程序的依賴項(xiàng)和其他元信息。該文件的內(nèi)容如下所示。請(qǐng)注意，依賴項(xiàng)中需要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)絡(luò)：節(jié)點(diǎn)索引

in index.js的以下行用于導(dǎo)入socket.io并設(shè)置服務(wù)器的端口。

<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)我必須添加這些額外的行來(lái)配置Xhr-Polling而不是依靠Websocket（您可能不需要這些對(duì)于環(huán)境）。這些行告訴服務(wù)器等待10秒鐘，然后再回答空的響應(yīng)，如果它對(duì)GET或POST請(qǐng)求沒(méi)有特定響應(yīng)。

>

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

控制演示幻燈片

此演示使用Deck.js，但只要它具有JS調(diào)用以在幻燈片之間移動(dòng)，就可以隨意替換任何其他HTML演示模板。對(duì)于deck.js，只需下載并將其解壓縮到公共文件夾。

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

>

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

>

>先前的代碼調(diào)用io.sockets.emit（'nudgeleft'）或io.sockets.emit（'nudgeright'），具體取決于隨請(qǐng)求發(fā)送的JSON數(shù)據(jù)。這里要提出的關(guān)鍵點(diǎn)是路線對(duì)JSON做出響應(yīng)。如果您不這樣做，您的請(qǐng)求將超時(shí)，因?yàn)樗鼈儗⒆?，等待服?wù)器的響應(yīng)。此時(shí)，您可以在本地運(yùn)行服務(wù)器，或?qū)⑵渫频紿eroku進(jìn)行部署。

>配置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服務(wù)器window.location.hostname。出于此演示的目的，我們將保持簡(jiǎn)單，并將所有內(nèi)容都放在一個(gè)域上。兩個(gè)事件處理人員會(huì)收聽(tīng)任何要求向左或向右推動(dòng)幻燈片的請(qǐng)求。如果注意到這些，我們會(huì)運(yùn)行Deck.js的前期或下一個(gè)功能以移動(dòng)幻燈片。

on {x}秘密醬

> on {x}是一個(gè)Android應(yīng)用程序，它允許您通過(guò)JavaScript API來(lái)控制Android設(shè)備，并響應(yīng)傳入的文本消息，GPS位置，電池壽命等事件。在此演示中，我們將使用它在發(fā)行時(shí)發(fā)送這些服務(wù)器請(qǐng)求。

>

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

接下來(lái)，我們?cè)趝x}的device.ajax方法上使用將JSON數(shù)據(jù)發(fā)送到服務(wù)器。請(qǐng)注意，數(shù)據(jù)類型被明確定義為JSON。沒(méi)有這個(gè)數(shù)據(jù)，數(shù)據(jù)無(wú)法正確發(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>

>

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

>更新代碼以匹配您的服務(wù)器地址，并且已經(jīng)準(zhǔn)備就緒，請(qǐng)單擊“保存并發(fā)送到電話”以通過(guò)網(wǎng)絡(luò)將其發(fā)送到手機(jī)。從那里開(kāi)始，通過(guò)演示文稿打開(kāi)您的URL，打開(kāi)Android設(shè)備的屏幕，然后嘗試左右輕拍。如果一切順利，您會(huì)看到幻燈片來(lái)回切換！

>在{x} logs

>如果您想在{x}上查看日志文件，則可以在Android手機(jī)上打開(kāi)應(yīng)用程序，選擇添加的規(guī)則，然后選擇“查看日志”。另外，當(dāng)您登錄您的規(guī)則頁(yè)面，選擇規(guī)則并單擊“日志”選項(xiàng)卡時(shí)，您可以在{x}網(wǎng)站上的網(wǎng)站上看到它們。

安全性呢？

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

結(jié)論

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

代碼

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

經(jīng)常詢問(wèn)有關(guān)使用JavaScript控制網(wǎng)頁(yè)的問(wèn)題（常見(jiàn)問(wèn)題解答）

>

>我可以在沒(méi)有事先編程知識(shí)的情況下學(xué)習(xí)JavaScript嗎？

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

> JavaScript僅用于Web開(kāi)發(fā)？

> javascript？

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

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

什么是文檔對(duì)象模型（DOM）？ HTML和XML文檔的編程接口。它代表文檔的結(jié)構(gòu)，并允許像JavaScript這樣的編程語(yǔ)言操縱文檔的內(nèi)容，結(jié)構(gòu)和樣式。

> JavaScript如何處理錯(cuò)誤？

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