在Cake PHP中使用服务器发送的事件

Question

我正在使用服务器发送事件将数据从核心php发送到html，并且运行良好。

我从参考http://www.w3schools.com/html/html5_serversentevents.asp使用了示例

但是，当我尝试使用Restful API在CakePHP中执行相同的操作时，则会造成问题。

这是我的代码：

控制器： sseController.php

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

                $time = date('r');
                $this->set('finalData',"data: The server time is: {$time}\n\n");
            }

查看： sse_view.ctp

<?php
     echo json_encode($finalData);
     flush();
?>  

HTML调用api是...

    if(typeof(EventSource)!=="undefined")
    {
       var source=new EventSource('http://localhost/b2c/api/reports/sseTest');
       source.onmessage=function(event)
       {
          document.getElementById("result").innerHTML+=event.data + "<br>";
       };
    }
    else
    {
             document.getElementById("result").innerHTML="Sorry, your browser does not support   server-sent events...";
    }

请提出一些想法。

Answer 1

您正在尝试对视图中的无效JSON进行json_encode ，这可能会导致您遇到问题

"data: The server time is: {$time}\n\n" // this is not JSON

您需要根据w3schools中的HTML5服务器发送事件文档删除json_encode来更改视图

视图sse_view.ctp看起来像：

<?php
     echo $finalData;
     flush();
?>  

Answer 2

更新：我已经在我的本地上尝试过了，这正在起作用！

控制器：sseController.php

public function sse_test() { //change your function to this (cakePHP standards)
header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    $time = date('r');
    $this->set('finalData',"data: The server time is: {$time}\n\n");
}

public function sse_view(){ //add this one

}

查看：sse_view.ctp

<div id="result"></div>
<script tye="text/javascript">
   if(typeof(EventSource)!=="undefined")
   {
         var source=new EventSource('<?php echo "http://localhost{$this->base}/reports/sse_test";?>'); //you  must check this one if the path is correct (modify if not correct or try to alert it)
        // alert('<?php echo "http://localhost{$this->base}/reports/sse_test";?>'); //uncomment to check if your using the correct path
   source.onmessage=function(event)
   {
      document.getElementById("result").innerHTML+=event.data + "<br>";
   };
}
else
{
       document.getElementById("result").innerHTML="Sorry, your browser does not support   server-sent events...";
}

在sse_view.ctp的相同路径下创建文件：sse_test.ctp

<?php
    echo $finalData;
    flush();
?> 

Answer 3

将此代码更改为

$this->layout = false;

在控制器动作功能中

Answer 4

服务器发送事件是在固定时间间隔后自动将请求发送到服务器并获得响应的方法。SSE使用HTTP协议，即不需要像套接字这样的特殊服务器。 最好的用法是从服务器获取实时通知。 例如，如果我们有社交网站，则需要朋友请求通知或接受通知。

如何使用步骤：

1. 假设我们先在friends控制器中工作，然后在get_friend_request_count动作中：

    function get_friend_request_count($user_id) { header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); //example query $friend_count = $this->friend- >find('count',array('conditions'=>array('user_id'=>$user_id))); echo "retry: 5000\\n data: Friend count : { $friend_count }\\n\\n"; flush(); die; } 

2. 编写一个可在布局的任何位置或位置使用的javascript代码：

    if (typeof(EventSource)!=="undefined") { var source = new EventSource('localhost/friends/get_friend_request_count'); //modify path as correct path source.onmessage = function(event) { $('#friend_count').html(event.data); }; } else { alert('Server sent event does not work with IE') }