VueJS как вызывать API каждые х секунд (чат) - PullRequest
Новая
       18

VueJS как вызывать API каждые х секунд (чат)

2 голосов
/ 05 марта 2019

только что изучил Vue, и я хотел построить чат для удовольствия.Единственное, что я не могу понять - это то, как я должен непрерывно следить за «ответами», например, когда вы разговариваете с кем-то, но каждый раз, когда он вводит сообщение и нажимает клавишу ввода, сообщение должно появляться на вашем экране.

Это означает, что я должен делать вызов API каждые 5 секунд или около того, чтобы проверить наличие новых сообщений, верно?как бы это сделать?в каком жизненном цикле крючок и как именно?

Я надеюсь, что кто-нибудь немного объяснит мне, как я могу сделать это наилучшим образом.

PS Я использую VueJS с Lumen (Laravel).

1 Ответ

1 голос
/ 05 марта 2019

Вам не нужно опрашивать сервер, если вы используете веб-сокеты. Сообщения будут отправлены по мере поступления событий. Я бы порекомендовал такой плагин, как Vue-Socket.io: https://github.com/MetinSeylan/Vue-Socket.io Вот статья в блоге, которая объясняет, как создать приложение чата с плагином: https://www.pubnub.com/tutorials/chatengine/vuejs/chat-app/

Базовое решение выглядит так: 

<template>
  <div class="chat-container">
    <div class="heading">
      <h1>{{ title + uuid }}</h1>
    </div>
    <div class="body">
      <friend-list></friend-list>
      <div class="right-body">
        <div class="table">
          <chat-log></chat-log>
          <message-input></message-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import FriendList from '@/components/FriendList';
  import ChatLog from '@/components/ChatLog';
  import MessageInput from '@/components/MessageInput';
  export default {
    name: 'chat-container',
    components: {
      FriendList,
      ChatLog,
      MessageInput,
    },
    data() {
      return {
        title: 'PubNub ChatEngine and Vue - User: ',
      };
    },
    computed: {
      ...mapGetters({
        uuid: 'getMyUuid',
      }),
    },
  };
<script>
...