Javascript 使用node.js通过外部脚本更新HTML?
我正在尝试设置一个Node.js应用程序,在ping IP时在前端提供一个HTML页面。最终结果将有望成为一个静态网页,显示正在ping的IP的状态 使用Express,我的HTML页面运行良好。它基本上只是一个静态文件,只有一个Javascript 使用node.js通过外部脚本更新HTML?,javascript,html,node.js,Javascript,Html,Node.js,我正在尝试设置一个Node.js应用程序,在ping IP时在前端提供一个HTML页面。最终结果将有望成为一个静态网页,显示正在ping的IP的状态 使用Express,我的HTML页面运行良好。它基本上只是一个静态文件,只有一个,其文本和颜色由外部脚本更改。暂时,我有一个按钮来切换显示的状态,到目前为止,它看起来不错 问题是,如何根据从Pinger获得的结果更新HTML(解释如下) 我有两个Node.js源文件。显然,主要的是server.js: var express = require("
,其文本和颜色由外部脚本更改。暂时,我有一个按钮来切换显示的状态,到目前为止,它看起来不错
问题是,如何根据从Pinger
获得的结果更新HTML(解释如下)
我有两个Node.js源文件。显然,主要的是server.js
:
var express = require("express"),
app = express(),
Pinger = require("./pinger");
app.use(express.static(__dirname));
console.log("Using static files at /");
app.use("/styles", express.static(__dirname + '/styles'));
console.log("Using stylesheets at /styles");
app.use("/res", express.static(__dirname + '/res'));
console.log("Using resources at /res");
app.listen(3000);
console.log("Listening on port 3000");
var pinger = new Pinger('google.com'); /* how the instance would be created */
var socketio = require('socket.io');
var io = socketio.listen(app);
io.sockets.on('connection', function(socket) {
var msg = 'Cannot reach host';
if (pinger.isAlive) {
msg = 'Host is reachable';
}
socket.emit('ping result', {
msg: msg
});
});
还有Pinger
模块:
var ping = require('ping');
var Pinger = function() {
this.host = arguments.length > 0 ? arguments[0] : 'google.com';
this.isOnline = false;
this.pingAll = function pingAll() {
console.log(">>PING: " + host);
ping.sys.probe(host, function(isAlive) {
if (isAlive) console.log(">>PONG: " + host);
else console.log("Unable to reach " + host);
});
// somehow return isAlive
};
};
module.exports = Pinger;
显然,现在pinger的isOnline
只能是假的,因为它从未更新过
另一方面,如何从
ping.sys.probe
回调内部更新isOnline?我知道不同的作用域,并且我很确定仅仅使用this.isOnline=isAlive
是没有用的,因为这个
会引用回调(除非我一开始就错了,并且考虑过了)。您需要切换到模板引擎并使页面动态。您可以使用完成的模板调用res.send/res.end函数,该模板将被推回到客户端。签出jade或coffeekup,如果简单的话,只需在函数中构建html,而不是使用外部模板。您是正确的,这将引用回调函数的范围。但您可以做的是创建对pinger函数的的引用
Func = function () {
var self = this;
self.isOnline = false
asyn(function (online) {
self.isOnline = online;
}
}
self
将是对Func
的本
的引用
至于静态页面和服务器之间的通信,您可以简单地向服务器设置一个Ajax请求,该请求将简单地返回pinger.isOnline
。如果您愿意,也可以使用socket.io之类的工具
app.get('/ping', function (req, res) {
res.json(200, {"ping": pinger.isOnline});
}
现在,如果您请求/ping
,您将得到一个带有pinger值的响应。您也可以使用socket.io
:
npm install socket.io
一旦您从Pinger内部设置了isOnline
,在server.js
中:
var express = require("express"),
app = express(),
Pinger = require("./pinger");
app.use(express.static(__dirname));
console.log("Using static files at /");
app.use("/styles", express.static(__dirname + '/styles'));
console.log("Using stylesheets at /styles");
app.use("/res", express.static(__dirname + '/res'));
console.log("Using resources at /res");
app.listen(3000);
console.log("Listening on port 3000");
var pinger = new Pinger('google.com'); /* how the instance would be created */
var socketio = require('socket.io');
var io = socketio.listen(app);
io.sockets.on('connection', function(socket) {
var msg = 'Cannot reach host';
if (pinger.isAlive) {
msg = 'Host is reachable';
}
socket.emit('ping result', {
msg: msg
});
});
从您的一个客户端javascript:
// client.js
var socket = io.connect();
socket.on('ping result', function(data) {
$('div.ping-result').html(data.msg);
});
在html中:
<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/client.js"></script>
<div class="ping-result"></div>