创建一个实时网络应用程序

Question

我必须制作一个应用程序，使用Highcharts动态更新数据。这不是一个大问题，因为他们有一个很好的教程。这个例子工作正常。

当我不想在多个设备上共享此应用程序（使用xampp）时，我遇到了一些问题。当我打开我的web应用程序的链接：

http://IP-adress/ENRGYMONITOR/index.html 

显示图形，但没有数据显示或更新。这里是我写的javascript：

var chart; // global 
/** 
* Request data from the server, add it to the graph and set a timeout to request again 
*/ 
function requestData() { 
    $.ajax({ 
     url: 'http://localhost/live-server-data.php', 
     success: function(point) { 
      var series = chart.series[0], 
      shift = series.data.length > 20; // shift if the series is longer than 20 
      // add the point 
      chart.series[0].addPoint(eval(point), true, shift); 
      // call it again after one second 
      setTimeout(requestData, 5000); 
     }, 
     cache: false 
    }); 
} 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'spline', 
      events: { 
       load: requestData 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 0.2, 
      maxPadding: 0.2, 
      title: { 
       text: 'Value', 
       margin: 80 
      } 
     }, 
     series: [{ 
      name: 'Random data', 
      data: [] 
     }] 
    }); 
}); 

任何人都可以让我知道这个问题是什么？

Answer 1

你$.ajax调用失败：

url: 'http://localhost/live-server-data.php' 

“本地主机”这里将是运行客户端（网页浏览器），而不是服务器发送数据的计算机。

您应该尝试避免绝对URL。其修改为只：

url: 'live-server-data.php' 

假设（这很重要）的是live-server-data.php是在同一个目录中index.html