@panikev

Как реализовать реалтайм приложение?

Здравствуйте! Подскажите пожалуйста как реализовать динамическое обновление таблицы у другого пользователя при изменении. Если редактирую я сам у себя, то поля таблицы удаляются и добавляются реактивно. Но другому сотруднику приходится обновлять страницу. Я прочитал, что можно реализовать с помощью socket.io... но там принцип сообщений, и как это реализовать в моем случае, к сожалению, я не знаю. Заранее спасибо за любую помощь
<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,
          }),
  • Вопрос задан
  • 132 просмотра
Пригласить эксперта
Ответы на вопрос 3
Сервер при обновлении данных должен кидать в открытые сокеты сообщение о том, что произошло изменение. Клиенты в таком случае должны подгружать данные заново.
Вариант 2: раз в n секунд стучите на сервер чтобы получить дату последнего обновления сущности. Если не совпадает (стала новее) - перезагружайте страницу
Ответ написан
@alexej3ajtsev
У меня на канале есть пример реализации чата на React и Socket.IO.
Принцип там я думаю тот же самый. От клиента нужно посылать сообщения с данными на сервер, а сервер отправляет данные всем остальным клиентам. Соответственно на клиенте нужно слушать события с сервера и обновлять состояние компонента, который у вас выводит данные.

https://www.youtube.com/channel/UCbU6vO4Cmd6IW7aXK...
Ответ написан
Alex_Wells
@Alex_Wells
PHP/TS/Kotlin developer
firebase или аналоги. С сокетами задолбаетесь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы