使用 Pusher 在 Heroku 上刷新页面答案

【问题标题】：Refresh page on Heroku with Pusher使用 Pusher 在 Heroku 上刷新页面
【发布时间】：2012-10-14 11:30:30
【问题描述】：

我在 Heroku 上有一个应用程序，有多个用户，他们可以互相下注。当用户发布新的投注时，投注应显示在所有其他用户的主页上，以便他们可以根据需要对其进行操作。

问题是我需要主页在创建新投注时自动刷新。我不想使用简单的 HTTP 刷新，我正在考虑使用 Pusher，因为该应用程序托管在 Heroku 上。

但我不确定如何实现这一点。谁能指引我正确的方向 - 最好有一些代码示例。

看来我能找到的所有例子都是指聊天应用程序:)

【问题讨论】：

当您使用 Pusher 时，页面不会刷新。您通过打开的 WebSocket 连接传递数据，然后您可以使用该数据更新页面。此类技术的目的是消除对页面刷新的需求。这是让我们在 Web 浏览器中构建丰富的交互式应用程序的难题之一。
谢谢.. 但是是否不可能触发对数据库的新查询，这是我想要做的。当用户创建一个新的投注时，我希望所有客户端都看到的网页上包含这些投注的 DIV 被刷新（通过对数据库的新查询再次呈现部分）？

标签： ruby-on-rails heroku websocket refresh pusher

【解决方案1】：

Checkout Pusher 开始使用 page。这应该是非常直接的。我假设你有一个Bet 模型。那样的话

class Bet < ActiveRecord::Base
  after_commit :push_notification, :on => :create, :if => :persisted?

  def push_notification
   Pusher["bets"].trigger("created", {:id => id, :message => "New bet created"}.to_json)
  end
end

根据你的观点你应该做的，

var pusher = new Pusher('abc243231a132b21c321'); // Replace with your app key
var channel = pusher.subscribe('bets');


channel.bind('created', function(data) {
  alert('A new bet was created: ' + data.message);
});

希望你能明白。

【讨论】：

这似乎有效.. 但不是警报，我需要用 ID #tickets 刷新 DIV。如何更改上面的视图代码来实现这一点？
我可以通过在客户端（浏览器）中构建原始 html 来向您展示一种快速而肮脏的方法。但这不是最好的方法，因为从长远来看，构建原始 html 是不可管理的。 channel.bind('created', function(data) { $("#tickets").append("<div>"+ data.message +"</div>"); }) 您可以考虑将整个 html 渲染为 json 响应的一部分，在这种情况下，您可以单独查看此消息。
我也玩过类似的东西：$("#bets").html("<%= escape_javascript render 'shared/active_bets' %>");。但它不会从控制器中获取新创建的 Bet。可以说不能从头开始渲染部分吗？
这行不通。 <%= escape_javascript render 'shared/active_bets' %>，这将在您的页面加载时进行评估。所以这将评估为$("#bets").html(<div>bets present during the page load</div>);。您一遍又一遍地替换相同的 html。尝试在你的 javascript 中构建 html raw 到一些我喜欢我提到的东西。

【解决方案2】：

观看此 railscasts，它可以适应您的应用程序。

http://railscasts.com/episodes/316-private-pub

【讨论】：