# Клонируем проект
git clone https://github.com/8base/Chat-application-using-GraphQL-Subscriptions-and-Vue.git group-chat
# Переходим в директорию
cd group-chat
# Устанавливаем зависимости
yarn

# Установка 8base CLI
yarn global add 8base-cli
# Аутентификация CLI
8base login
# Импортируем схему в нашу рабочую область
8base import -f chat-schema.json -w <YOUR_8BASE_WORKSPACE_ID>

/* gql преобразует строки запроса в документы graphQL */
import gql from "graphql-tag";
‍
/* 1. Получение всех пользователей онлайн-чата и последних 10 сообщений */
export const InitialChatData = gql`
{
  usersList {
    items {
      id
      email
    }
  }
  messagesList(last: 10) {
    items {
      content
      createdAt
      author {
        id
        email
      }
    }
  }
}
`;
‍
/* 2. Создание новых пользователей чата и назначение им роли гостя */
export const CreateUser = gql`
mutation($email: String!) {
  userCreate(data: { email: $email, roles: { connect: { name: "Guest" } } }) {
    id
  }
}
`;
‍
/* 3. Удаление пользователя чата*/
export const DeleteUser = gql`
mutation($id: ID!) {
  userDelete(data: { id: $id, force: true }) {
    success
  }
}
`;
‍
/* 4. Подписка на создание и удаление пользователей чата */
export const UsersSubscription = gql`
subscription {
  Users(filter: { mutation_in: [create, delete] }) {
    mutation
    node {
      id
      email
    }
  }
}
`;
‍
/* 5. Создание новых сообщений чата и связывание их с автором */
export const CreateMessage = gql`
mutation($id: ID!, $content: String!) {
  messageCreate(
    data: { content: $content, author: { connect: { id: $id } } }
  ) {
    id
  }
}
`;
‍
/* 6. Подписка на создание сообщений чата. */
export const MessagesSubscription = gql`
subscription {
  Messages(filter: { mutation_in: create }) {
    node {
      content
      createdAt
      author {
        id
        email
      }
    }
  }
}
`;

import { ApolloClient } from "apollo-boost";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
‍
const { VUE_APP_8BASE_API_ENDPOINT, VUE_APP_8BASE_WORKSPACE_ID } = process.env;
export default new ApolloClient({
link: createHttpLink({
  uri: `${VUE_APP_8BASE_API_ENDPOINT}/${VUE_APP_8BASE_WORKSPACE_ID}`,
}),
cache: new InMemoryCache(),
});
// Note: Чтобы узнать больше о параметрах, доступных при настройке // ApolloClient, обратитесь к их документации.

import WebSocket from "isomorphic-ws";
import { SubscriptionClient } from "subscriptions-transport-ws";
‍
const { VUE_APP_8BASE_WS_ENDPOINT, VUE_APP_8BASE_WORKSPACE_ID } = process.env;
/**
* Создайте клиент подписки, используя соответствующие
*переменные среды и параметры по умолчанию.
*/
const subscriptionClient = new SubscriptionClient(
VUE_APP_8BASE_WS_ENDPOINT,
{
  reconnect: true,
  connectionParams: {
    /**
      * Workspace ID ОБЯЗАТЕЛЬНО должен быть установлен, иначе
*конечная точка Websocket не сможет
*сопоставить запрос с соответствующим воркспейсом
      */
    workspaceId: VUE_APP_8BASE_WORKSPACE_ID,
  },
},
/**
  * Конструктор для реализации WebSocket, совместимой с W3C. *Используйте это, если ваше окружение не имеет встроенного собственного *WebSocket (например, с клиентом NodeJS)
  */
WebSocket
);
‍
export default {
/**
  * Принимает запрос подписки, любые переменные и обработчики колбэков *'data’ и 'error’
  */
subscribe: (query, options) => {
  const { variables, data, error } = options;
‍
  /**
    * Запускает новый запрос на подписку.
    */
  const result = subscriptionClient.request({
    query,
    variables,
  });
‍
  /**
    * Функцию отписки можно использовать для закрытия *определенной подписки, в отличие от ВСЕХ подписок,
*поддерживаемых subscriptionClient
    */
  const { unsubscribe } = result.subscribe({
    /**
      * При получении события результат передается в
*колбэк данных, указанный разработчиком.
      */
    next(result) {
      if (typeof data === "function") {
        data(result);
      }
    },
    /**
      * Каждый раз при получении ошибки она передается в колбэк ошибок, указанный разработчиком.
      */
    error(e) {
      if (typeof error === "function") {
        error(e);
      }
    },
  });
‍
  return unsubscribe;
},
‍
/**
  * Закрывает subscriptionClient соединение.
  */
close: () => {
  subscriptionClient.close();
},
};
// Примечание. Чтобы узнать больше о SubscriptionClient и его параметрах,
// пожалуйста, обратитесь к их документации.

/* API модули */
import Api from "./utils/api";
import Wss from "./utils/wss";
/* graphQL операции */
import {
InitialChatData,
CreateUser,
DeleteUser,
UsersSubscription,
CreateMessage,
MessagesSubscription,
} from "./utils/graphql";
‍
/* Стили */
import "../assets/styles.css";

/* imports ... */
export default {
name: "GroupChat",
‍
data: () => ({
  messages: [],
  newMessage: "",
  me: { email: "" },
  users: [],
}),
};

/* ипорты... */
export default {
/* остальные параметры ... */
/**
  * Хук жизненного цикла, выполняющийся при создании компонента.
  */
created() {
  /**
    * Подписка на событие, которое срабатывает при создании или удалении пользователя
    */
  Wss.subscribe(UsersSubscription, {
    data: this.handleUser,
  });
  /**
    * Подписка на событие, которое срабатывает при создании сообщения
    */
  Wss.subscribe(MessagesSubscription, {
    data: this.addMessage,
  });
  /**
    * Получение начальные данные чата (пользователи и последние 10 сообщений)
    */
  Api.query({
    query: InitialChatData,
  }).then(({ data }) => {
    this.users = data.usersList.items;
    this.messages = data.messagesList.items;
  });
  /**
    * Колбэк вызывается при обновлении страницы, чтобы закрыть чат
    */
  window.onbeforeunload = this.closeChat;
},
‍
/**
  * Хук жизненного цикла, выполняющийся при уничтожении компонента.
  */
beforeDestroy() {
  this.closeChat();
},
};

/* импорты ... */
export default {
/* остальные параметры ... */
‍
methods: {
  /**
    * Создание нового пользователя, используя указанный адрес электронной почты.
    */
  createUser() {
    Api.mutate({
      mutation: CreateUser,
      variables: {
        email: this.me.email,
      },
    });
  },
  /**
    * Удалиние пользователя по его ID.
    */
  deleteUser() {
    Api.mutate({
      mutation: DeleteUser,
      variables: { id: this.me.id },
    });
  },
  /**
    * Наши пользователи подписываются на события создания и обновления, и поэтому
*нам нужно выбрать соответствующий метод для обработки ответа в зависимости от
*типа мутации.
*
*Здесь у нас есть объект, который ищет тип мутации по имени, возвращает
*его и выполняет функцию, передавая узел события.
    */
  handleUser({
    data: {
      Users: { mutation, node },
    },
  }) {
    ({
      create: this.addUser,
      delete: this.removeUser,
    }[mutation](node));
  },
  /**
    * Добавляет нового пользователя в массив users, сначала проверяя, *является ли добавляемый пользователь текущим пользователем.
    */
  addUser(user) {
    if (this.me.email === user.email) {
      this.me = user;
    }
    this.users.push(user);
  },
  /**
    * Удаляет пользователя из массива users по ID.
    */
  removeUser(user) {
    this.users = this.users.filter(
      (p) => p.id != user.id
    );
  },
  /* Создать новое сообщение */
  createMessage() {
    Api.mutate({
      mutation: CreateMessage,
      variables: {
        id: this.me.id,
        content: this.newMessage,
      },
    }).then(() => (this.newMessage = ""));
  },
  /**
    * Наша подписка на сообщения проверяет только событие создания.  *Поэтому все, что нам нужно сделать, это поместить его в наш массив *сообщений.
    */
  addMessage({
    data: {
      Messages: { node },
    },
  }) {
    this.messages.push(node);
  },
  /**
    * Мы хотим закрыть наши подписки и удалить пользователя. Этот метод можно вызвать в нашем хуке жизненного цикла beforeDestroy и любом другом соответствующем колбэке.
    */
  closeChat () {
    /* Закрытие подписки перед выходом */
    Wss.close()
    /* Удаление участника */
    this.deleteUser();
    /* Установка значения по умолчанию */
    this.me = { me: { email: '' } }
  }
},
‍
/* Хуки ... */
}

<template>
<div id="app">
  <!--
    Представление чата должно отображаться только в том случае, если текущий пользователь имеет идентификатор. В противном случае отображается форма регистрации..
    -->
  <div v-if="me.id" class="chat">
    <div class="header">
      <!--
        Поскольку мы используем подписки, которые работают в режиме реального времени, количество пользователей, которые сейчас находятся в сети, будет динамически корректироваться.
        -->
      {{ users.length }} Online Users
      <!--
       Пользователь может выйти из чата, вызвав функцию closeChat..
        -->
      <button @click="closeChat">Leave Chat</button>
    </div>
    <!--
    Каждое сообщение, которое мы храним в массиве сообщений, мы будем отображать в этом div. Кроме того, если идентификатор участника сообщения совпадает с идентификатором текущего пользователя, мы присвоим ему класс me.
      -->
    <div
      :key="index"
      v-for="(msg, index) in messages"
      :class="['msg', { me: msg.participant.id === me.id }]"
    >
      <p>{{ msg.content }}</p>
      <small
        ><strong>{{ msg.participant.email }}</strong> {{ msg.createdAt
        }}</small
      >
    </div>
    <!--
Инпут сообщения привязан к свойству данных newMessage.
      -->
    <div class="input">
      <input
        type="text"
        placeholder="Say something..."
        v-model="newMessage"
      />
      <!--
       Когда пользователь нажимает кнопку отправки, мы запускаем функцию createMessage.
        -->
      <button @click="createMessage">Send</button>
    </div>
  </div>
  <!--
   Процесс регистрации просит пользователя ввести адрес электронной почты. Как только инпут теряет фокус, вызывается метод createUser.
    -->
  <div v-else class="signup">
    <label for="email">Sign up to chat!</label>
    <br />
    <input
      type="text"
      v-model="me.email"
      placeholder="What's your email?"
      @blur="createUser"
      required
    />
  </div>
</div>
</template>