CODEWITHSUNDEEP
javascriptnode.jsexpress
Sega
Sega

Reputation: 47

Node JS + Express JS: refresh page from other location

I have the following problem: I want to change one variable on a page. The input comes from another page so:

I'm using Node.js, Express.js and Ejs for this task.

I'm sending the variable with fetch post to the server. On the server I change the variable with the request body value and when I reload the "Display page" manually I see the new value. The problem is: I need to change it without any manual refresh or other things, because that won't be possible.

There is the possibility with "location.reload()" to refresh it every X second. But that's not the way I want to use, I really just want to refresh it when the variable changes. Is there a function (from express.js for example) I can use for it?

edit: I should mention that this project would be just used in our network and its not open for other users. Like an in-house company dashboard kind of. So a "quick and dirty" solution can work too, but I want to learn something and wanted to do it the right way though.

Upvotes: 2

Views: 1527

Answers (4)

Ievgen
Ievgen

Reputation: 4443

Proper solution (WebSockets):

  1. Add WebSocket server as a part of your Node.JS app
  2. Implement subscriptions for the WebSocket, implement function 'state changed'.
  3. subscribe on a method 'state changed' from your client browser app.
  4. call ws server from your express app to update the clients when your variable is changed

Outdated (Polling):

  1. Add express endpoint route: 'variable-state' Call server from your

  2. client every n ms and check whether variable state is changed.

  3. Refresh the page if variable is changed.

Upvotes: -1

Richard Dunn
Richard Dunn

Reputation: 6780

This is a very common scenario that has several solutions:

  1. Polling - The display page runs ajax calls in a loop every N seconds asking the server for the lastest version of the variable. This is simple to implement, is very common, and perfectly acceptable. However, it is a little outdated, and there are more modern and efficient methods. I suggest you try this first, and move on to others only as needed.
  2. WebSockets - WebSockets maintain a connection between the client and server. This allows the server to send messages to the client application if/when needed. These are a little more complex to setup than just plain ajax calls, but if you have a lot of messages getting sent back and forth they are much more efficient.
  3. WebRTC - This is taking it to another level, and is certainly overkill for your use case. WebRTC allows direct messaging between clients. It is more complicated to configure than WebSockets and is primarily intended for streaming audio or video between clients. It can however send simple text messages as well. Technically, if you want to persist the message on the server, then this is not suitable at all, but it's worth a mention to give a complete picture of what's available.

Upvotes: 1

Rob Bott
Rob Bott

Reputation: 1

One possible solution would be to add page reload code after a successful post-operation with fetch.

fetch(url, {
    method: 'post',
    body: body
  }).then(function(response) {
    return response.json();
  }).then((data) => {
        // refresh page here
        window.location.replace(url);
  });

Upvotes: 0

Mahmoud Sultan
Mahmoud Sultan

Reputation: 570

The simplest solution that came to mind is to have the server return the updated post in the body, then use that to update the page.

You can also read about long/short polling and Websockets.

Upvotes: 1

Related Questions