动态页面刷新JavaScript/PHP或者'Pusher.com'

Question

我正在寻找一种解决方案，能够动态地强制刷新我的网页，使所有当前的观众都能看到。最好是通过PHP来实现，但我也愿意听取建议。

我已经做了一些研究，并找到了一个可能的解决方案（pusher.com），但我不确定如何执行。以下是我的代码：

在我的网页上添加的JavaScript，加入到“document.ready”jQuery中：

var pusher = new Pusher('xxx');
var refreshChannel = pusher.subscribe('refreshing');
refreshChannel.bind('refresh-event', function() {
location.reload(true);
});

这是他们官方文档中的php代码：

<?php
 require('Pusher.php');
 $options = array(
 'cluster' => 'eu',
 'encrypted' => true
 );
 $pusher = new Pusher(
'xxx',
'xxx',
'xxx',
 $options);

 $data['message'] = 'hello world';
 $pusher->trigger('refresh-event', 'refresh', $data);

?>

我知道如何像上面展示的那样发送消息，但我不知道如何启用刷新代码。有没有人之前使用过这个SDK并知道该怎么做？

或者

是否有人知道任何库或解决方案可以完成这个任务？我只想动态地刷新我的网页，以便在需要时向所有当前的观众刷新。

- user6934446

Answer 1

您的客户端（包含JavaScript代码的页面）与pusher.com建立WebSocket连接。 您必须通过您的php脚本触发（=提交数据）到pusher api服务器，pusher将向所有客户端（已连接的套接字）转发您的数据（事件名称+参数）。

例如，如果您的php代码在index.php中，并通过http访问它，它将发送数据到pusher，并通知您的客户端。

除了pusher.com之外，您还可以创建自己的php WebSocket服务器。

库：

socketo.me和socket.io

- IamSilviu

---

谢谢您的回复。我是新手，不确定您所说的Websocket连接是什么意思。我没有看到任何相关选项。当我点击我的应用程序时，它显示概述|入门|应用密钥|统计信息|调试|错误|Webhook|推送通知|协作|应用设置。是否有教程可以指导如何创建此连接？ - user6934446

WebSocket是pusher.com背后的技术。WebSocket只是一个协议，提供了通过单个TCP连接的全双工通信通道。https://pusher.com/websockets - IamSilviu

打开您放置JavaScript代码的页面，然后在另一个选项卡中打开带有Pusher代码的PHP页面，这应该会触发刷新。如果您的客户端页面是PHP，则PHP Pusher代码不应该在同一页上，否则它将造成无限循环。PHP API > Pusher > PHP客户端，或者PHP客户端> PHP API > Pusher > PHP客户端 - IamSilviu

Answer 2

你的回调函数是作为refreshChannel.bind(...)的第二个参数传递的，每当在'refreshing'频道上接收到'refresh-event'时，它将运行。你的PHP中的$data也会传递给该函数，因此你可以通过事件发送信息。

你的代码几乎完全正确，但看起来你忘记在javascript中设置集群，所以连接不成功。如果你的应用程序在'eu'集群上，那么在尝试连接时需要指定。

var pusher = new Pusher('xxx', {
  cluster: 'eu',
  encrypted: true
});

当您尝试加载页面时，JavaScript控制台会出现"Could not find app by key xxx. Perhaps you're connecting to the wrong cluster."错误提示。

编辑：仔细检查后发现，触发器调用中的频道名称和事件顺序颠倒了。正确的是

 $pusher->trigger('channel-name', 'event', $data);

编辑2：在您的JavaScript中，您将通道称为'refreshing'，而在您的PHP中，您将其称为'refresh'。这些必须相同。

- Callum Oakley