How to implement a realtime application?

Question

Socket.io

Hello! Please tell me how to implement a dynamic table update for another user when changing. If I edit myself, then the table fields are removed and added reactively. But another employee has to refresh the page. I read that it can be implemented using socket.io... but there is a principle of messages, and unfortunately I don't know how to implement it in my case. Thanks in advance for any help

<div class="container">
   <table class="table-responsive bordered highlight centered hoverable z-depth-2" >
      <thead>
        <tr> <th v-for="column in columns">{{column}}</th></tr>
      </thead>
      <tbody>
        <tr v-for="(task,index) in tasks"> 
          <td>{{index}}</td>
          <td>{{task.taskDate}}</td>
          <td>{{task.taskNumber}}</td>
          <td>{{task.title}}</td>
          <td>{{task.location}}</td>
          <td>{{task.planTaskDate}}</td>
          <td>{{task.Docs}} </td>
            <td>{{task.comments}}</td>
          <td style="display:inline-block;">
            <a href="#!" class="btn waves-effect waves-light blue darken-2 b_archive" @click="archive(index)"><i class="material-icons">-</i></a>
          </td>
        </tr>
         </tbody>
        </table>

export default {
        data() {
        return {
         tasks: [],
        input: {
        title: "",
        description: "",
        checked : true,
         },
       }
   },
         methods: {
    //function to add data to table
    add:  async function () {
        this.tasks.push({
          taskDate: this.input.taskDate,
          taskNumber: this.input.taskNumber,
          title: this.input.title,
          location: this.input.location,
          planTaskDate: this.input.planTaskDate,
          Docs: this.input.Docs,
          comments: this.input.comments,
          isActive: true,
          }),

Answer 1

When updating data, the server should throw a message into open sockets that a change has occurred. Clients in this case must upload the data again.
Option 2: once every n seconds, knock on the server to get the date of the last update of the entity. If it doesn't match (became newer) - reload the page

Answer 2

I have an example of a chat implementation on React and Socket.IO on my channel.
The principle is the same, I think. From the client, you need to send messages with data to the server, and the server sends data to all other clients. Accordingly, on the client, you need to listen to events from the server and update the state of the component that displays data for you.
https://www.youtube.com/channel/UCbU6vO4Cmd6IW7aXK...

Answer 3

firebase or similar. You get bored with sockets.