如何实时从json文件中获取数据答案

【问题标题】：how to get data from a json file in real time如何实时从json文件中获取数据
【发布时间】：2017-07-10 08:19:35
【问题描述】：

我尝试了很长时间，并且我编写了一些测试脚本。我使用 setInterval 在 500 秒时更新一次内容，但如果我有一个我不知道的表格，我无法访问例如输入如何在不删除写入的情况下写入输入。我使用 setInterval 是因为我想查看数据库中的每个输入。

索引脚本

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="customersCtrl"> 

    <ul>
      <li ng-repeat="x in myData">
       <a href="http://php.net/manual/ro/function.json-encode.php"> {{ x.Name + ', ' + x.Country }}</a><input type="text" />
      </li>
    </ul>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
     setInterval(function(){$http.get("customers.json").then(function (response) {
          $scope.myData = response.data.records;
      });},500); 
    });
    </script>

    </body>
    </html>

还有json文件

{
  "records": [
    {
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Antonio Moreno Taquería",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Around the Horn",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "B's Beverages",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
     {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
     {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },{
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }
  ]
}

【问题讨论】：

似乎是 webworker 的工作
如果你使用angular，为什么不使用$timeout而不是setInterval？
AngularJS and web workers的可能重复
我已将您的问题标记为重复，因为您可能只是解决了错误的问题。请参阅附加的链接以了解如何以角度正确执行此操作。 stackoverflow.com/questions/16713925/angularjs-and-web-workers
我没有看到任何暗示这与网络工作者有任何关系。我实际上不明白为什么您希望 json 文件不断更新。如果这样做，可能的解决方案是将 url 参数添加到末尾，这样您就不会从缓存中获取它。

标签： javascript angularjs json

【解决方案1】：

如果你想做实时应用，nodejs + socket.io (websocket) 最适合你的需求。下面是一个如何使用socket.io(websocket lib)的例子：

https://socket.io/get-started/chat/

此外，任何 ajax 调用都需要时间，很容易超过一秒钟。因此，实时 Web 应用程序需要使用 websocket 而不是过渡 ajax 调用。

【讨论】：