Fatal编程技术网
  • javascript/
  • Javascript Rails—在更新数据库时调用ajax请求

Javascript Rails—在更新数据库时调用ajax请求

javascript jquery ruby-on-rails ruby ajax

Javascript Rails—在更新数据库时调用ajax请求,javascript,jquery,ruby-on-rails,ruby,ajax,Javascript,Jquery,Ruby On Rails,Ruby,Ajax,因此，我创建了一个基本的彩票博彩网站，它允许用户将钱投入到一个彩票中，然后根据每个用户投入的钱的百分比随机选择一个赢家。目前它运行良好，但我觉得用ajax更新jackpot页面的方式非常糟糕。目前，我有一个javascript，它每秒都会发出一个ajax请求来获取pot信息（pot的大小、玩家等）。我觉得有一个更好的方法可以做到这一点。是否可以仅在更新数据库时进行ajax调用？谢谢 目前我的javascript： setInterval(update, 1000); function upda

因此，我创建了一个基本的彩票博彩网站，它允许用户将钱投入到一个彩票中，然后根据每个用户投入的钱的百分比随机选择一个赢家。目前它运行良好，但我觉得用ajax更新jackpot页面的方式非常糟糕。目前，我有一个javascript，它每秒都会发出一个ajax请求来获取pot信息（pot的大小、玩家等）。我觉得有一个更好的方法可以做到这一点。是否可以仅在更新数据库时进行ajax调用？谢谢

目前我的javascript：

setInterval(update, 1000);

function update() {
getPotID();
$.ajax({
    type: "POST",
    url: "/jackpot/update/" + potID,
    complete: function(response) {
      $('.live-jackpot').html(response.responseText);
      getPotInfo();
    },
    error: function(xhr, status,error) {
      console.log("Error");
    }
}); 
}
正如从中所说，ActionCable在这一功能上有很大的优势

现在您正在编写在客户端执行的Javascript代码。每个将启动
GET
http请求到站点的用户都将加载该javascript文件。他们将开始每秒向您的后端服务器执行
POST
请求

ActionCable是预装在Rails 5中的websocket。这意味着要使用ActionCable和Rails 5配置通知，您已经在应用程序中安装了所有内容（如果您使用的是Rails 5），您只需在本地计算机上安装Redis即可测试正在开发的应用程序

我不是专家，我的理解是您使用一个名为的特定数据库来存储有关订阅的信息。我引述

PubSub是Redis和Postgres以及其他一些东西支持的概念，基本上你有能力拥有频道和订阅（并接收这些消息）并发布到这些频道，然后任何收听的人都会收到这些消息

这方面的一个例子是聊天室频道，您可以让人们向聊天室频道发布消息，任何订阅聊天室频道的人都可以通过websocket从该频道接收广播

这是您缺少的，这样您只能找到哪些用户实际上在播放页面上，哪些用户只是在浏览，基于此，
ActionCable
创建一个
频道
，在
服务器
和
客户端
之间进行通信，然后创建一个
订阅
，以区分实际在播放页面上的用户和那些已离开且不应再收到通知的用户

我引用另一个例子

在深入研究一些代码之前，让我们仔细看看动作电缆是如何打开的，并维护我们的Rails 5应用程序中的WebSu套连接。 Action Cable使用机架套接字劫持API接管应用程序服务器的连接控制

对于每一个启动的应用程序实例，都会创建一个Action Cable实例，使用Rack打开并维护持久连接，并使用安装在主应用程序的子URI上的通道从应用程序的某些区域进行流式传输并广播到其他区域

因此，每个连接到，
ActionCable
的用户都会创建一个通道，该通道使用特定的url
localhost:3000/cable
在
服务器
和
客户端
（浏览器）之间进行通信

Action Cable提供服务器端代码，通过频道向订户广播某些内容（比如新消息或通知）。订阅者通过一个方便的JavaScript函数在客户端实例化，该函数使用jQuery将新内容附加到DOM中

这意味着服务器可以使用参数调用客户端，并使用
jquery
函数更改页面。例如，使用新消息追加div

在我的应用程序中，我在

因此，基本上，我的控制器中有我的
消息
，我可以使用
ActionCable.server.broadcast
功能更新客户端

然后在我的示例中，我有以下代码触发浏览器中添加消息的更改

App.messages = App.cable.subscriptions.create('MessagesChannel', {      
  received: function(data) {
      $('#messages').append(this.renderMessage(data));
  },
  renderMessage: function(data) {
    return "<br><p> <strong>" + data.user + ": </strong>" + data.message + "</p>";
  }
});

App.messages=App.cable.subscriptions.create（'MessagesChannel'，{
接收：功能（数据）{
$（'#messages'）.append（this.renderMessage（data））；
},
renderMessage:函数（数据）{
返回“
”+data.user+”：“+data.message+”
”；
}
});
我构建了一个名为actioncable的应用程序，这是一个，你可以在上面阅读更多关于我的应用程序的信息，所以请问我任何问题，我很乐意调查

祝你好运
Fabrizio

请尝试www.pusher.com进行实时更新。Sockets将是您最好的朋友，请尝试rails中的ActionCable。@RT5754感谢您接受我的回答。我刚刚完成编辑，所以可能有新的信息可以帮助你。请在github或hear上与我联系以获取帮助。太好了！我想我要做一个ActionCable教程。你的应用看起来真的很好！我希望将来能建造这样的东西！谢谢你的回答！如果我被卡住了，我一定会问你有什么事。在GitHub上跟踪你。我们将在德国举办一次研讨会。：）@RT5754是的，你有什么问题吗！我是杰恩！ 
App.messages = App.cable.subscriptions.create('MessagesChannel', {      
  received: function(data) {
      $('#messages').append(this.renderMessage(data));
  },
  renderMessage: function(data) {
    return "<br><p> <strong>" + data.user + ": </strong>" + data.message + "</p>";
  }
});