0

I have simple and straightforward rails app. And it requires to reload a page each time when I want to send an update or check new info available on the server.

I want to do two things:

  • Send data to my rails app without reloading a page
  • Show updates to the data which are done by other users (also without reloading a page)

Any recommendations on gems, framework, technologies to accomplish these two tasks?

Victor Ronin
  • 22,758
  • 18
  • 92
  • 184
  • 1
    Perhaps this http://stackoverflow.com/questions/11304989/display-result-data-without-page-refresh-on-form-submission-in-ruby-on-rails can help. – keeplearningtocode Jul 18 '14 at 02:37
  • It looks like this question answers first part (sending data without reload). I wonder whether any gem wraps all these details. – Victor Ronin Jul 18 '14 at 02:45

2 Answers2

1

For the first point, classical rails ajax call (with data-remote attribute) should do the job.

For the second, you should consider to use sockets, with services like pusher or faye. Take a look at this gem, which permits to sync partials : https://github.com/chrismccord/sync

If you can't use sockets, the classical fallback is a periodic ajax call on your backend.

Skelz0r
  • 114
  • 1
  • 3
1

I wonder whether any gem wraps all these details

Pusher


Asynchronicity

Asynchronicity is standard functionality for web applications - you'll have to open an asynchronous request to your server, which will allow you to then receive as much data as you want.

Asynchronous connections are best defined within the scope of HTTP. HTTP is stateless, meaning it treats your requests as unique every time (does not persist the data / connectivity). This means you can generally only send single requests, which will yield a response; nothing more.

Asynchronous requests occur in parallel to the "stateless" requests, and essentially allow you to receive updated responses from the server through means other than the standard HTTP protocol, typically through Javascript

--

There are 2 main ways to initiate "asynchronous" requests:

  • SSE's (Server Sent Events) - basically Ajax long polling
  • Websockets (opens a perpetual connection)

--

SSE's

Server sent events are an HTML5 technology, which basically allows you to "ping" a server via Javascript, and manage any updates which comes through:

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Setting up SSE's is simple:

#app/assets/javascripts/application.js
var source = new EventSource("/your/endpoint");
source.onmessage = function(event) {
    alert(event.data)
};

Although native in every browser except IE, SSEs have a major drawback, which is they act very similarly to long-polling, which is super inefficient.

--

Websockets

The second thing you should consider is web sockets. These are by far recommended, but not having set them up so far, I don't have much specific information on how to use them.

I have used Pusher before though, which basically creates a third-party websocket for you to connect with. Websockets only connect once, and are consequently far more efficient than SSE's

I would recommend at least looking at Pusher - it sounds exactly like what you need

Richard Peck
  • 76,116
  • 9
  • 93
  • 147