How to implement the movement of an object with the preservation of coordinates in the database?

Question

JavaScript

Good afternoon
There is an object on the page, for example, a regular circle. It has coordinates x1, y1. The object is moving. It moves towards the new coordinates x2, y2 given to it.
How to implement the movement of this object in such a way that its intermediate coordinates are stored in the database? I would like that when the object has passed halfway, refresh the page and see it not at the starting point, but at the one in which it was at the time the page was reloaded.
I heard that now there are many javascript solutions for implementing this, such as React or Angular, but since I didn’t have much to do with them, it’s hard to assess where to start and which way to dig. Everything is complicated by the fact that a large number of objects are planned, and each of them will actively move around the page. I would like not to knock down the browser, and the server too.
In general, I will be glad to any tip that will help clean up the garbage in my head and put on the shelves what's what and where to start.
P.S.
Initially, as a server implementation, I looked towards NodeJS and MongoDB, as a frontend in React, but now a shadow of doubt has crept in whether I chose the right toolkit.
P.P.S.
Something similar has already been implemented in Yandex.Transport. In particular, approaching vehicles on the map that are next to a person

Answer 1

React and Angular are about data, forms. Vanilla or jquery is enough for you.
It makes no sense to store coordinates every time. It is better to be attached to the travel time and, when reloading, calculate the current coordinates as x2y2 - x1y1 + the path for the past time.

Answer 2

Intermediate saving in the database is done simply - the usual ajax, which transmits the coordinates to the server and the script makes the save. But this is not a very smart decision, because it will unnecessarily load the server. I would suggest using a server on sockets, then you can keep the data in the cache and when the action is completed or the connection is lost, it is saved to the database. The tools you have chosen do an excellent job of this task, there is little difference - the main thing is not to use php.
PS The previous comment suggests using a timestamp to define an intermediate path. This is a great way to save on resources in a particular example, but is less accurate in other cases. I described the general principle of storing intermediate data of an arbitrary type.

Answer 3

You can try sockets (if, for example, you want to see other moving objects in real time), plus implement tricky events. If only one object is planned, then of course ajax and updating are easier, for example, when the object has stopped or the page is reloaded.

Answer 4

to communicate with the server https://socket.io/
to store in memory on the server https://redis.io/
if you need to store for a long time then mysql or mongo, which is more convenient
if there is too much data, you can try https://clickhouse.yandex /