Help Making a Design Choice, AJAX vs. Websocket

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?

Currently, the app doesn’t require the internet. Future modules will access the net, making request/responses. So if I have to learn Websockets for that eventually, maybe best to just start with that? And use Websockets to pass variables? Or is it worth it to learn them both & use the right tool for the job, whichever it might be?

Phoenix really shines because of its websockets, not using them would be strange IMHO

i’d still recommend AJAX. probably no external API you are going to use will be a websocket one.

but it sounds a little strange to me. how vuejs on your website communicates to your phoenix application doesn’t really have anything to do with “modules accessing the net”, so i’m a bit confused. are you not going to run the phoenix application on some server? the phoenix app and the web browser will be on the same host always?

The Phoenix app will run locally. The app will eventually make requests/responses to remote websites & APIs. But all processing for now, is planned to be done locally.

Eventually I can see it grow to an app that some processing is handed off to a node network. So, my primary question is should I architect it right now for that possibility? And if that’s the case is Websockets the better tool to use?

for requests to external websites and apis websockets won’t be the right tool.

for your vue app to communicate with your phoenix app, they might. using ajax with a json api will give you a lot more tutorials and best practises, though, as this is the much more common/older way of doing things.

what kind of app are you building? the case would be different for a chat app, for example. ajax has to be initiated from your vue app, which means it has to ask for new data. with websockets, the phoenix app can more easily tell your vue app that there is new data, i.e. a chat message.

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.

@Qqwy: Good answer! I want to write something similar in my words …

Basically AJAX is good when you are only fetching data from server like using JSON REST API (for example for CMS front page).

WebSocket is required for example if you want to create fast client-server chat application.

Another good example for both Elixir and Phoenix WebSocket is update graph. Simply Elixir could have a process in background that sends event through Websocket, so after data is changed client gets info about it as soon as possible. Here I also recommend new Registry Elixir API that is awesome in combination with Phoenix WebSocket connection. I found a good example for PubSub with WebSocket using this API.

I actually tackled the same problem as you and came to the conclusion that websockets are the best.

1. It’s a vue app that I am in control of - no compatibility issues since it’s going to be used within the org.
2. Vue2 got rid of $http in favor of using external libraries - this made me decide to use phoenix sockets, since either way I’m going to have to use an external library
3. Vuex abstracts away the actual API calls - if I end up hating websockets, I can exchange the calls in my vuex actions to make AJAX calls instead
4. sockets are vogue and hip

I implore you to check out vuex, which is just as palatable as vue. Basically what I did is in Application.vue, I set up the socket and registered the events I wanted to listen for. For the receive event, I called a vuex action that would set the state.

The websockets seemed more approachable as someone who didn’t have experience with Vue or Elixir/Phoenix.

If I get a chance, I’ll post my implementation so maybe you can get some ideas from it.

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.

SImplicity of use is simplicity of documentation too.

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!