无限数据流通过AJAX更新网页中的字段？
注:这是我的第一个问题。
问题的简短版本：
如果我正在运行一个服务器端脚本，它可以输出数据(实时传感器读取的值变化非常快)，那么使用AJAX重复请求最新的脚本输出更合适，还是让脚本将数据输出到一个无休止的流中，并在数据流经过时使用AJAX来读取、解析和输出数据呢？第二种选择是可能的，还是AJAX在处理任何东西之前都会预见到某种类型的文件结束标志？
很长版本的问题：
我正在构建一台车内计算机，由一个Arduino (读取传感器)、一个Raspberry Pi和一个10英寸的LCD组成。我正在通过串行通信将数据从Arduino传输到Raspberry Pi，格式如下：
output-timestamp: value1, value2, value3, value4, value5, etc.使用Chrome/Chromium扩展，我可以直接将串行数据读取到浏览器中，这使我能够实时显示传感器值。利用HTML5，我可以用旋转图像层可视化地显示串行数据，模拟典型的汽车仪表集群中的各种量规。
不过。在Raspberry上运行raspian，可用的Chromium版本不支持HTML5。我可以重写我的动画，或者创建一个跨浏览器的解决方案。我决定选择后者，尽管我是唯一一个要使用这种东西的人。
在Raspberry上，我编写了一个perl脚本，用于获取串行数据并在运行时输出。我可以调整代码以编写一行数据：
output-timestamp: value1, value2, value3, value4, value5, etc.或者我可以把它写到无休止的流中：
output-timestamp: value1, value2, value3, value4, value5, etc.
output-timestamp: value1, value2, value3, value4, value5, etc.
output-timestamp: value1, value2, value3, value4, value5, etc.
etc., etc.如果我要运行AJAX调用来获取数据，那么让perl脚本输出一次数据，然后让AJAX一次又一次地非常快地请求脚本的最新版本，还是应该让perl脚本源源不断地流到传感器数据并使用AJAX读取、解析和显示数据？第二种选择是可能的，还是AJAX在开始处理之前等待某种类型的文件结束标志？
无论用哪种方式，更新都需要非常快；我正在提取RPM、加速度计信号、速度计信号等，所以我们正在关注对显示器的非常快速的更新。
回答 1
Stack Overflow用户
发布于 2015-07-31 01:55:22
有各种框架可以帮助您通过http/json接口进行实时通信。
莫若利拥有优秀的Websockets支持，并且能够以您想要的方式流数据。
在较旧的浏览器中，添加了现代化者中的一个shims，这将根据需要将websockets降级为轮询机制。
下面是一个使用echo的回显服务器示例：：Lite，它是package上相同包的一部分，但有一个更简单的api。
#!/usr/bin/env perl
use Mojolicious::Lite;
get '/' => 'index';
websocket '/echo' => sub {
my $self = shift;
$self->on(message => sub {
my ($self, $msg) = @_;
my ($s,$m,$h) = localtime(time);
$self->send({ json => { text => $msg, time=> "$h:$m:$s" }});
});
};
app->start;
__DATA__
@@ index.html.ep
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var log = function (text) { $('#log').val( $('#log').val() + text + "\n"); };
var ws = new WebSocket('ws://localhost:3000/echo');
ws.onopen = function () { log('Connection opened'); };
ws.onmessage = function (msg) {
var res = JSON.parse(msg.data);
log(res.time + '> ' + res.text);
};
$('#msg').keydown(function (e) {
if (e.keyCode == 13 && $('#msg').val()) {
ws.send($('#msg').val());
$('#msg').val('');
}
});
});
</script>
</head>
<body>
<input type="text" id="msg" placeholder="Type Your Message Here" /><br>
<textarea id="log" readonly></textarea>
</body>
</html>您可以使用perl app.pl daemon启动这个程序，也可以在各种http服务器(如apache )上托管它。
当你开始做这件事时，你应该看到；
请注意时间戳是如何添加的，服务器端和完整的消息是如何发送回来的。
https://stackoverflow.com/questions/31735039
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号