0👍
HTML content, once loaded into a browser and displayed is static. It does not change by itself. To cause it to update to reflect recent changes, you have these options:
-
Auto-Refresh: You can configure the page to automatically reload itself on some time interval. This can be done either with Javascript in the page or with a
<meta>
tag. -
Polling For New Content: You can use Javascript in the page to regularly (on some time interval) ask the server if there is new content with an Ajax call. When there is new content, you can either have the server send it with the Ajax response and then your Javascript inserts that content into the page or you can then trigger a page reload at that time with your Javascript.
-
Dynamically Deliver New Content: If the Javascript in your web page opens a webSocket or socket.io connection to your server as soon as the web page loads or if it sets up a connection so it can receive server-sent events (SSE), then that allows the server to dynamically send content to the web page when some event occurs on the server (such as the server sees that there is new content).
The idea behind a webSocket or socket.io connection (socket.io is
built on top of webSocket) is that once you’ve established this
connection, then either the server or client can send messages over
that connection at any time without the other side making a request.
So, the connection can sit mostly idle until the server has some new
content it wants the end-user to see and at that point, the server
can then just send it over the existing webSocket/socket.io connection and the user will receive that message/data immediately.Using server sent events (SSE) is another technology that allows the server to send updates directly to the client. While webSocket/socket.io are two way (either client or server can send data over them), SSE is one-way only the server can use it to send data to the client.
Options #1 and #2 are not particularly efficient from a server-scalability standpoint because the client is regularly asking the server for new content, even when there is none. Since both those methods also require some sort of polling interval (which can’t be real short), they also aren’t very immediate so there will typically be a delay before the end-user sees the newest content.
Option #3 takes a little more work to implement, but generally offers a better user experience and less wasted server cycles answering empty polling requests.
- [Vuejs]-How to properly load different set of CSS file in different route in Vuejs project
- [Vuejs]-Getting Outlook profile image in Vue as v-img src