Emily

Emily

Help Making a Design Choice, AJAX vs. Websocket

I need to setup communication between VueJS & Elixir Modules. I’m told my options are AJAX & Websocket.

The app will be standalone right now, with all the Elixir processing done locally. But I foresee it will grow into an umbrella Phoenix project, with some processing done remotely.

Primary consideration is latency.

Second consideration is learning time & code complexity.

Third consideration is documentation & available tutorials/learning resources (as I’ll be teaching myself).

I’m learning as I go. Currently I do not know either. I would rather only have to learn 1.

With that in mind, would you choose Websocket or AJAX to pass variables between Elixir & VueJS?

First Post!

manukall

manukall

If you’re learning I would recommend AJAX. There should be a lot more tutorials/resources on APIs using that than websockets.

What do you mean when you say standalone and locally by the way? Is this not going through the internet?

Most Liked

Qqwy

Qqwy

TypeCheck Core Team

I’d say it depends on the kind of information you want to send back and forth.

Neither Websockets nor AJAX are complex in their basic usage. The main difference between the two is that a websocket connection is a persistent client<->server connection, where (therefore) both sides can at any time initiate a new request to the other, whereas AJAX involves setting up (and afterwards closing again) a new connection that works client->server. This means that with AJAX, only the client can initiate contact.

If therefore your application works with data that the server creates/receives and should then send to the client quickly, then websockets are definitely better. The AJAX alternative to handle this would be short-polling or long-polling, which are basically ‘hacks’ that allow you to ‘fake’ bidirectional communication because your client will keep on asking the server the ‘do you have something new yet?’ question until the server responds with something new.

Both because AJAX involves setting up/tearing down a connection each time, as well as requiring techniques like longpolling to handle bidirectional traffic, AJAX is (significantly!) slower than using websockets.

Still, depending on what your application does exactly, having a delay of a few seconds before a new message arrives because long-polling is used might not be noticeable.

However, Phoenix (and its JS clientside websockets-wrapper) abstracts the difficulties of how websockets internally work, so I definitely would advise using them for your application.

OvermindDL1

OvermindDL1

Websockets. AJAX requires setting up and tearing down the connections on every request. Long polling can mitigate latency in ‘receiving’ a bit, but websocket is the only way to minimize latency all the time in both directions.

Phoenix Channels (it’s implementation of websockets) are so simple to use, ask if you have any questions. :slight_smile:

SImplicity of use is simplicity of documentation too. :slight_smile:

And for note, AJAX is just normal http requests using the normal http ways including all the expensive setup and all, but it can be done in a single line of javascript where channels take a couple of easy lines. If you know how to build normal web requests, you already know AJAX then, except you return JSON instead of HTML. ^.^

This.

If it is for real-time communication where latency is important then websockets blow AJAX away. And I’ve seen a few API’s use websockets via tokens without issue, usually not worth it in most languages to set up unless the real-time need is necessary, though with Elixir it is so easy to websocket there is no reason not to anyway.

If they are rare polling requests then external API’s will not. However external API’s mandate whatever they mandate, that has nothing to do what-so-ever with using websockets for their own front-end.

OhgodNo, jsonapi needs to die, if you are going to vote for that then go for GraphQL then. Speaking of, you can use GraphQL over websockets too.

Exactly what @Qqwy said! ^.^

And what @Eiji said!

Azolo

Azolo

I don’t know enough about HTTP/2 to comment, but I don’t agree on the simplicity of WebSockets.

Ok so on simple level they can accomplish the same thing, I send a request across the socket and get a response on the same socket. On that level there is no difference.

Now, requests have a very particular send → receive flow. I send a request I get a response back or I don’t for whatever reason. If a delete succeeds, then maybe I get a 204 response. Let’s do that on a WebSocket, I send a message over the WebSocket and then wait to receive a response. I have to keep track of the fact I made that request so I can inform the user of a success or failure. That is automatic with a regular request.

What if my deletes are expensive, so to provide a good user experience I provide a loading circle and let the user keep browsing and inform them when I’m done. Then they delete 2 more things. With web requests every request will have a response and I will have a promise or something to inform me of what action is succeeding or failing. With WebSockets, I have to keep track of those actions in the messages, then do the work of parsing and managing the messages then invoking a callback manually.

Now, those things are trivial for experienced developers. I knew exactly what I had to do, and knew how to route errors and such back correctly. A junior developer who doesn’t really understand how “AJAX” requests work would not.

There are like 5 other things that Phoenix provides around WebSockets that I can think of off the top of my head that aren’t easy. So I think calling it a thin wrapper is a little misleading, but that’s also a subjective assessment. :smile:

Last Post!

OvermindDL1

OvermindDL1

Eh for autocomplete a simple ajax tends to be fine, unpoly even makes it very simple, or you can server-drive it over phoenix channels by using the Drab library, which lets you drive it from phoenix over a websocket rather transparently.

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 55125 245
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44778 311
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44265 214
New

We're in Beta

About us Mission Statement