Question

我想不断阅读JSON格式的js文件，以便我的页面显示该文件的更改。

我希望每次更改目录中的数据库文件时，页面中的某些内容都会更改。

我的文件 ：

objectoJSON.js ：

var rightFencer;
rightFencer = {"name":"Jorge ANZOLA","nacionality":"VEN","points":10};

var leftFencer;
leftFencer = {"name":"John DOE","nacionality":"USA","points":5};

的index.html ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>
<center><p id="rightFencerName"></p><p id="rightFencerPoints"></p> - <p id="leftFencerName"></p> <p id="leftFencerPoints"></p></center>
<script src="objetoJSON.js"></script>
<script>
    document.getElementById("rightFencerName").innerHTML = rightFencer.name;
    document.getElementById("leftFencerName").innerHTML = leftFencer.name;
    document.getElementById("rightFencerPoints").innerHTML = rightFencer.points;
    document.getElementById("leftFencerPoints").innerHTML = leftFencer.points;
</script>
</body>

</html>

我考虑将这两个脚本放入无限循环中，所以当我更改目录中的文件时，它会发生变化。但它没有用。

另外，我考虑过每隔几秒钟使用setInterval()来运行脚本，但我不知道如何让它运行。

正如你所看到的，我是一个完整的菜鸟，所以任何的想法都会非常感激。

Answer 1

您的“objectoJSON.js”不是JSON文件......这是一个简单的javascript object。

JSON 文件就是这样的。

{
 "rightFencer":{
  "name":"Jorge ANZOLA",
  "nacionality":"VEN",
  "points":10
 },
 "leftFencer":{
  "name":"John DOE",
  "nacionality":"USA",
  "points":5
 }
}

您要搜索的是

Ajax，服务器发送事件或webSockets

更新页面内容而无需刷新页面或单击某些内容。以下代码显示了如何与每种技术进行交互。它们有许多优点和缺点......现在很多人都要写。问具体，我可以将其添加到答案中。

以下所有示例都是纯javascript，因此不需要任何类型的库。它们几乎适用于所有新浏览器... ios，android，windows也是。

以下所有示例都可以调整为使用您发布的格式不正确的json文件。看看底部。

<强>的Ajax：

客户要求提供数据

每30秒更新一次客户端。

function $(a){
 return document.getElementById(a)
}
function ajax(a,b,c){ // Url, Callback, just a placeholder
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onload=b;
 c.send()
}
function reloadData(){
 ajax('database.js',updateText)
};
function updateText(){
 var db=JSON.parse(this.response);
 $("rightFencerName").innerHTML=db.rightFencer.name;
 $("leftFencerName").innerHTML=db.leftFencer.name;
 $("rightFencerPoints").innerHTML=db.rightFencer.points;
 $("leftFencerPoints").innerHTML=db.leftFencer.points;
}
window.setInterval(reloadData,30000);//30 seconds 
/*setinterval is a very bad way to update stuff , 
especially with ajax.. there are many other ways to do that.*/

如果您在本地读取JS文件，Ajax不需要任何类型的服务器。还附加它......但是这两个例子都是基于时间的......如果你有很多在线用户，那就不好了。 WS＆amp; SSE允许您根据需要单独更新每个用户。

<强> SSE：

服务器在需要时发送数据

这使用php创建Server Sent Events Server 此外，这每30秒更新一次客户端，但在这种情况下，服务器会更新客户端。使用Ajax，客户端要求服务器更新。

php文件“sse.php”

header('Content-Type: text/event-stream'); // specific sse mimetype
header('Cache-Control: no-cache'); // no cache
while(true) {
 if(/*something changes*/){
  echo "id: ".time().PHP_EOL;
  echo "data: ".$data.PHP_EOL;
  echo PHP_EOL;
 }
  ob_flush(); // clear memory
  flush(); // clear memory
  sleep(30);// seconds 
}

javascript文件

function $(a){
 return document.getElementById(a)
}
function updateText(e){
 var db=JSON.parse(e.data);
 $("rightFencerName").innerHTML=db.rightFencer.name;
 $("leftFencerName").innerHTML=db.leftFencer.name;
 $("rightFencerPoints").innerHTML=db.rightFencer.points;
 $("leftFencerPoints").innerHTML=db.leftFencer.points;
}
var sse=new EventSource("sse.php");
sse.onmessage=updateText;

<强>的WebSockets：

服务器在需要时发送数据，客户端在需要时请求数据

webSockets很酷......通信是双向的。它很快。但是你需要像nodejs服务器那样能够正确处理它。

function $(a){
 return document.getElementById(a)
}
function updateText(e){
 var db=JSON.parse(e.data);
 $("rightFencerName").innerHTML=db.rightFencer.name;
 $("leftFencerName").innerHTML=db.leftFencer.name;
 $("rightFencerPoints").innerHTML=db.rightFencer.points;
 $("leftFencerPoints").innerHTML=db.leftFencer.points;
}
var ws=new WebSocket('ws://YOURIP:YOURPORT');
/*ws.onopen=function(){ //those events are also aviable with sse
 ws.send('WS open!');//sending data to the server
};
ws.onclose=function(){
 console.log('WS closed!');
};*/
ws.onmessage=updateText;

调整js

的Ajax ..

使用ajax加载“objectoJSON.js”并对其进行推理......但不使用eval()。评估是邪恶的。使用new Function()

function updateText(){
 document.getElementById("rightFencerName").innerHTML = rightFencer.name;
 document.getElementById("leftFencerName").innerHTML = leftFencer.name;
 document.getElementById("rightFencerPoints").innerHTML = rightFencer.points;
 document.getElementById("leftFencerPoints").innerHTML = leftFencer.points;
}
(new Function(this.response+'\n updateText()'))();

或每隔30秒附加脚本或其他任何内容.... 我不写那个例子，因为这是最糟糕的方法。

有30个客户端，这意味着你必须从服务器evey读取文件。使用SSE或WS，您只需阅读一次，然后将其广播给数百个客户。

我建议修复你的json文件。

如果您有任何其他问题，请询问。

Answer 2

我猜你正在使用支持websockets的框架。您可以使用websocket监听文件中的更改。可以返回数据集中的更改，如新记录或更新任何记录，或使用javascript / ajax调用从服务器获取最新内容并更新HTML。

https://www.websocket.org/demos.html，请参阅外汇信息中心，了解如何使用websockets不断更新数据。

Answer 3

您现在的行事方式不具备可扩展性，可测试性或可管理性。

您真的不想使用纯文本json文件在服务器上保存数据。

如果您想要一个更强大的框架来处理您的用例，我建议在客户端和服务器端使用Web套接字（socket.io是一个很好的选择），并在服务器上使用RethinkDB作为数据库。< / p>

不断阅读JSON数据库

3 个答案: