javascript - Rails - 更新数据库时调用ajax请求

Question

因此，我创建了一个基本的头奖博彩网站，目的是为了好玩，它允许用户将钱投入彩池，然后根据每个用户投入的资金百分比随机选出一名获胜者。目前它工作正常，但我觉得我用 ajax 更新累积奖金页面的方式真的很糟糕。目前我有 javascript 每秒发出一个 ajax 请求以获取底池信息(底池大小、玩家等)。我觉得有更好的方法可以做到这一点。是否可以只在更新数据库时进行 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");
    }
}); 
}

Answer 1

如 7urkm3n 所述, ActionCable 在这个功能上有很大的优势。

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

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

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

So PubSub is this concept that Redis and Postgres and a few other things supports, and basically you have this ability to have Channels and the ability to subscribe (and receive those messages) and publish to those channels and anyone listening will then receive those messages.

An example of this is a ChatroomChannel, you could have people publishing messages to the ChatroomChannel and anyone who was subscribed to the ChatroomChannel would receive the broadcast from the channel with the websocket.

这是你缺少的东西，这样你只能找到哪些用户实际在播放页面上，哪些用户只是浏览，基于此 ActionCable 创建一个 channel 在server 和client 之间进行通信，然后创建一个subscription 来区分实际在播放页面上的用户和离开的用户不应该再被通知

我引用另一个useful article

Before we dive into some code, let's take a closer look at how Action Cable opens and maintains the WebSocket connection inside our Rails 5 application.

Action Cable uses the Rack socket hijacking API to take over control of connections from the application server.

For every instance of your application that spins up, an instance of Action Cable is created, using Rack to open and maintain a persistent connection, and using a channel mounted on a sub-URI of your main application to stream from certain areas of your application and broadcast to other areas.

因此每个连接的用户，ActionCable 创建一个 channel ，使用特定的 url localhost:3000/cable 在 server 和 客户端(浏览器)

Action Cable offers server-side code to broadcast certain content (think new messages or notifications) over the channel, to a subscriber. The subscriber is instantiated on the client-side with a handy JavaScript function that uses jQuery to append new content to the DOM.

意思是服务端可以带参数调用客户端，用jquery函数改变页面。对于前。附加一个带有新消息的 div。

在我的应用程序中 https://sprachspiel.xyz我在 MessagesController#create 中执行以下操作

ActionCable.server.broadcast 'messages',
message: message.content,
user: message.user.name,
chatroom_id: message.chatroom_id,        
lastuser: chatroom.messages.last(2)[0].user.name
head :ok

基本上，我的 Controller 中有我的消息，我可以使用ActionCable.server.broadcast 函数更新客户端

然后在我的asset pipeline file /app/assets/javascripts/channels/messages.js我有以下代码触发浏览器添加消息的更改

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>";
  }
});

我构建了一个名为 https://sprachspiel.xyz 的应用程序那是一个 actioncable 应用程序，这是 github page for the project , 关于 my portfolio您可以阅读有关我的应用程序的更多信息，所以请问我任何问题，我很乐意调查!

祝你好运法布里齐奥