使用JavaScript和{X} - sitePoint控制网页

钥匙要点

• 作者使用远程控制HTML演示文稿的示例演示了如何使用Android设备将远程说明发送到实时网页。>
使用的技术堆栈包括{x} app，node.js，express，socket.io，deck.js和heroku。 JavaScript库
• > socket.io，启用服务器和客户端之间的实时通信，这对于对来自Android设备的信号的实时响应至关重要。 具有JavaScript API的On {X}应用程序允许控制Android设备，并响应诸如传入的文本消息，GPS位置，电池寿命等事件。这是在发掘时用于发送服务器请求的。
>
• 作者警告说，该方法不安全，并建议为任何通用的任何东西添加一层安全性。
>
>我丢了手机。我把它留在购物中心的沙发上，然后回来发现它消失了。有人通过可怕的偷窃艺术被送给了新手机。我通过网络将JavaScript代码远程发送到我的手机，该网络每当我发短信时都会向我发送设备的坐标。我将其跟踪到一家Sizzler餐厅，直到他们关闭电话，然后它永远消失了。我给自己买了一部新手机，但在一个功能强大的应用程序中看到了新的潜力，直到那时{x}}。 与我丢失的手机的恐怖故事相比，在本文中，我将分享该应用程序的不同用途。我想向您展示如何使用Android设备将远程说明发送到实时网页。我将使用遥控器控制HTML演示文稿的示例，但是可以扩展这些概念以执行许多有趣的事情。
• 我们将使用以下技术：

一个Android设备

> on {x}

express

• > socket.io
• deck.js
• > Heroku
如果您没有Android手机，请不用担心！从理论上讲，您可以使用任何其他设备可以使HTTP调用以相同的节点/socket.io sorcery的工作方式使用。本文假设读者对node.js和javascript有一些了解，但是提供了源代码供您参考。
• 什么是socket.io？
• >在我们走得太远之前，我将解释socket.io的作用，因为它将显示在接下来的几个代码片段中。 socket.io是一个JavaScript库，可在服务器和客户端之间实时通信。它允许您在服务器和客户端上定义事件。例如，io.sockets.emit（'eventThathathappened'）创建了一个新事件，应用程序可以对此做出反应。为了对事件做出反应，只需设置这样的事件处理程序 - socket.on（'eventThathApped'，function（）{}）。

>聊天程序是一个常见的示例socket.io应用程序。该服务器听取来自任何客户端的传入消息，并在运行聊天应用程序的所有客户端上立即显示它们。我们将使用它在页面启动时立即从Android设备中响应信号。

设置服务器
>该演示的目录结构如下图所示。所有服务器端代码都存储在主JavaScript文件index.js中。前端HTML，CSS和JS存储在公共文件夹中。

>

package.json文件定义了有关节点应用程序的依赖项和其他元信息。该文件的内容如下所示。请注意，依赖项中需要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>

由于此演示旨在托管在Heroku上，因此我们需要一个procfile，其内容如下所示（非常简单！）。

> 网络：节点索引

节点服务器

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上工作，我发现我必须添加这些额外的行来配置Xhr-Polling而不是依靠Websocket（您可能不需要这些对于环境）。这些行告诉服务器等待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>

>

>节点服务器中最重要的路由是邮政请求，它允许我们与演示幻灯片进行交互。该路线如下所示。

>

>先前的代码调用io.sockets.emit（'nudgeleft'）或io.sockets.emit（'nudgeright'），具体取决于随请求发送的JSON数据。这里要提出的关键点是路线对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位置，电池寿命等事件。在此演示中，我们将使用它在发行时发送这些服务器请求。

开始{x}

>

>将应用程序下载到您的设备：https：//www.onx.ms/#！downloadapppage。
>在下载时，请访问桌面浏览器上的https://www.onx.ms，然后使用您的Facebook帐户登录{x}（不用担心，这只是用于在设备和设备之间同步代码在{x}）上。
>您将被带到{x}的仪表板。您可以转到食谱以探索已经有兴趣的令人兴奋的代码段，但是我们将直接研究本教程的自定义代码。
3. 单击页面左上角的写代码链接以提出代码编辑器。
让该窗口打开，我们将在其中添加一些代码。>
>在{x}
5. 上进行编码
>如上所述，{x}具有JavaScript API，可让您在Android设备上调用并检测许多事件。对于此演示，我们主要关注device.gestures.on方法。

>要做的第一件事是在{x}上打开代码编辑器返回该窗口，您会看到“规则名称：”，将其重命名为更友好的东西，例如“ Nudge演示控制”。我的ON {X}代码如下所示。请注意，您将需要用自己的服务器替换http://androidremotecontrol.herokuapp.com。

device.gestures.on组件用于设置事件处理程序。任何时候{x}检测剩下的轻推，调用了裸体处理程序。我们有一系列代码，基本上在手机上显示了手机的通知。您不需要这个，但我使用它进行测试以确保检测到轻推。该行的代码如下所示。

接下来，我们在{x}的device.ajax方法上使用将JSON数据发送到服务器。请注意，数据类型被明确定义为JSON。没有这个数据，数据无法正确发送。

>

<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>

>当前，Onsuccess回调函数仅用于记录HTTP响应成功。这将映射到响应。如果您觉得如此倾向，则可以在此成功呼叫中添加更多信息，以在{x}上提供更多数据。同样，OnError回调用于记录发生的任何错误。

>

接下来，我们以900,000毫秒的方式打开对这些手势的检测。当您首先启用设备上的代码时，这将运行。您可能希望此代码运行超过900,000毫秒。我当前亲自设置的方式是，每次设备的屏幕启动时都会对其进行打开。因此，如果您想控制幻灯片，只需打开屏幕，您就有900秒的时间要疯狂。根据我在开发过程中发现的内容，您必须为此功能提供时间限制。如果您找到另一种方法，请在评论中告诉我。我很想更新它。

>更新代码以匹配您的服务器地址，并且已经准备就绪，请单击“保存并发送到电话”以通过网络将其发送到手机。从那里开始，通过演示文稿打开您的URL，打开Android设备的屏幕，然后尝试左右轻拍。如果一切顺利，您会看到幻灯片来回切换！

>在{x} logs

上查看

>如果您想在{x}上查看日志文件，则可以在Android手机上打开应用程序，选择添加的规则，然后选择“查看日志”。另外，当您登录您的规则页面，选择规则并单击“日志”选项卡时，您可以在{x}网站上的网站上看到它们。

。

安全性呢？

此方法在任何方面都不安全。如果其他任何人都算出您的演示文稿地址以及您要发送的帖子请求，他们可以轻松地将幻灯片从世界各地的任何地方切换。为此，您想到了与socket.io和{x}有关的任何其他想法，请记住，您需要在某个地方添加一层安全性，以使其在某个地方过于通用。

>

结论

这个演示背后的想法是表明，使用JavaScript，socket.io和一个漂亮的Android应用程序，您可以使用手机以多种方式来影响网页。闪烁的演示幻灯片左右只是开始。您可以根据位置，是否正在运行应用程序，电池用完了，可以更改网页显示的内容。 D很高兴听到它。出去并编码一些内容！

代码

>该演示的所有代码都已启动，并在GitHub上可用。我的跑步版本也可以在Heroku上找到。

>

经常询问有关使用JavaScript控制网页的问题（常见问题解答）

> JavaScript在控制网页中的作用是什么？这是一种编程语言，可让您在网页上实现复杂的功能。当网页是静态的，即显示静态信息时，可以使用JavaScript使页面更具互动性。它可以响应用户操作，创建动态内容，控制多媒体，动画图像等等。 JavaScript在用户的计算机上运行，​​使页面加载更快并减少服务器上的负载。

>

>我如何在网页中使用JavaScript？

javascript可以直接使用HTML嵌入HTML中<script>标签或使用<script>标签中的SRC属性在外部链接。该脚本可以放置在HTML文档的头部或身体部分中，但通常建议将脚本放在身体部分的底部，以防止阻止页面的渲染。<ancy> <p >有什么例子控制网页的JavaScript？<h3 >JavaScript可以以多种方式控制网页。例如，它可以更改HTML元素的内容和样式，在将其提交给服务器之前验证形式的数据，操纵Cookie，创建弹出窗口等等。 JavaScript也可以用于创建复杂的应用程序，例如在线游戏，交互式地图和2D/3D图形。创建动态和交互式网页。 HTML用于网页的结构，用于样式的CSS和功能的JavaScript。 JavaScript可以在HTML文档中访问和更改所有元素和属性。它还可以在网页中更改所有CSS样式。</script>

>我可以在没有事先编程知识的情况下学习JavaScript吗？

是的，您可以在没有事先编程知识的情况下学习JavaScript。但是，对HTML和CSS与JavaScript合作以创建交互式网页时，对HTML和CSS有一个基本的了解是有益的。在线有许多可用的资源，包括教程，视频和交互式编码平台，可以帮助您从头开始学习JavaScript。

>

> JavaScript仅用于Web开发？

对于Web开发，其使用不限于此。它也可以用于使用Node.js的服务器端编程，用于使用React Native和Ionic等框架的移动应用程序开发，以及使用Electron等框架创建桌面应用程序。

> javascript？

JavaScript是安全的，但是像其他任何编程语言一样，如果不正确使用，则可以利用它。遵循最佳实践以防止潜在的安全问题，这一点很重要。其中包括验证和消毒用户输入，避免使用est（）使用（）以及定期更新和检查您的代码是否漏洞。

可以使用JavaScript来创建动画吗？用于在网页上创建动画。随着时间的流逝，它可以更改HTML元素的CSS属性，从而创造动画的效果。 JavaScript还提供了requestAnimationFrame方法，该方法是专门设计用于创建光滑，浏览器优化的动画的。

什么是文档对象模型（DOM）？ HTML和XML文档的编程接口。它代表文档的结构，并允许像JavaScript这样的编程语言操纵文档的内容，结构和样式。

>

> JavaScript如何处理错误？

JavaScript使用组合处理错误尝试，捕捉并最终陈述。 Try Block包含可能会出现错误的代码，Catch Block处理错误，最后块包含执行的代码，无论是否丢弃错误。

以上是使用JavaScript和{X} - sitePoint控制网页的详细内容。更多信息请关注PHP中文网其他相关文章！