Question

我想设置，使用HTML5 Server Sent Events更新全局变量的值。

这是我的服务器代码

$chart = [
    ['name' => 'User A', 'data' => range(1, 3)],
    ['name' => 'User B', 'data' => range(1, 3)],
    ['name' => 'User C', 'data' => range(1, 3)]
];

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$stream  = 'event: chart' . "\n";
$stream .= 'data: ' . json_encode($chart) . "\n\n";

print $stream;
flush();

这是我的客户代码。

var source, chart_data;
if (!!window.EventSource) {
    source = new EventSource('/stream/chart-data');
    source.addEventListener('chart', function(event) {
        // It's work.
        console.log(event.data);

        // It's not work.
        chart_data = event.data;
    }, false);
}

// It's not work.
console.log(chart_data);

我尝试将新值设置为chart_data，但始终为undefined。如何为全局变量设置新值？

Answer 1

这是因为您的代码是异步的。在您的事件监听器之外调用console.log(chart_data)时，它尚未被赋予值。

在事件侦听器中记录chart_data的值时，您将看到已设置该值。您还可以尝试在JavaScript控制台中记录chart_data，如果等到调用异步调用后再查看设置的值。

为了更清楚，您可以为console.log添加时间戳，您将看到事件监听器内部调用的console.log的值小于事件监听器中的值{1}}因为它是在以后调用的。

Answer 2

您可以使用箭头功能访问图表事件中的全局变量：

var source, chart_data;
if (!!window.EventSource) {
  source = new EventSource('/stream/chart-data');
  source.addEventListener('chart', (event) => {
    console.log(event.data);

    this.chart_data = event.data; //access using this variable
   }, false);
}

如何从HTML5 Server Sent Events设置和更新全局变量的值

2 个答案: