Мой отец любит напоминать мне, что, будучи компьютерным инженером в 1970-х, «он был программистом до того, как программирование стало модным». Пару раз он даже показывал старые скрипты Fortran и COBOL. Прочитав этот код, я с уверенностью могу сказать, что программирование сегодня определенно круче.
Отличительная черта современных языков программирования и сред разработки — это то, насколько меньше кода приходится писать разработчику. Используя высокоуровневые языки вместе со множеством доступных API-интерфейсов, пакетов с открытым исходным кодом и платных сервисов, приложения — даже со сложными требованиями — можно создавать довольно быстро.
Сравнением, позволяющим продемонстрировать эволюцию разработки программного обеспечения, является строительство. Когда-то строительство любого дома начиналось с вырубки деревьев на вашем участке. Однако быстро появились материалы, инструменты и способы, чтобы строительство завершалось быстрее, объекты становились прочнее, а рабочие освобождались от некоторых элементарных задач.
Сколько было бы построено небоскребов, если бы строители сами добывали себе сталь?
Разработчики ПО, которые продолжают работать и по сей день, на заре карьеры сами “рубили себе деревья”. При этом беспрецедентные инновации последнего десятилетия привели к тому, что индустрия программного обеспечения стала развиваться примерно так же, как и строительство.
Проще говоря, у современных разработчиков теперь есть инструменты, техника и передовые методы, которые позволяют быстрее завершать проекты, получать стабильные приложения, а так же избавляют разработчиков от задач низкого уровня.
Как сделать приложение для чата
Давайте быстро создадим что-нибудь, что раньше занимало бы дни или недели. Мы сделаем Public Chat Room приложение, которое использует WebSockets для обмена сообщениями в реальном времени.
WebSockets нативно поддерживаются всеми современными браузерами. Однако наша цель — выяснить, какие инструменты мы можем использовать в работе, а не изобретать их. Учитывая это, мы будем использовать следующие технологии:
- 8base — управляемый GraphQL API
- VueJS — JavaScript фреймворк
Стартовый проект и полный файл README можно найти в этом репозитории GitHub. Если вы хотите просмотреть только готовое приложение, загляните в ветку public-chat-room.
Кроме того, в видео ниже (на английском языке) более подробно объясняется каждый шаг.
Начнем.
Семь шагов для создания чат приложения:
1. Настройка проекта
Клонируйте стартовый проект и перейдите в директорию группового чата. Вы можете сами определить, использовать yarn или npm для установки зависимостей проекта. В любом случае, нам нужны все NPM пакеты, обозначенные в файле package.json.
# Клонируем проект
git clone https://github.com/8base/Chat-application-using-GraphQL-Subscriptions-and-Vue.git group-chat
# Переходим в директорию
cd group-chat
# Устанавливаем зависимости
yarnЧтобы взаимодействовать с GraphQL API, мы должны настроить три переменные среды. Создайте файл .env.local в корневой директории с помощью следующей команды, и приложение Vue после инициализации автоматически установит переменные среды, которые мы добавили в этот файл.
echo 'VUE_APP_8BASE_WORKSPACE_ID=<YOUR_8BASE_WORKSPACE_ID>
VUE_APP_8BASE_API_ENDPOINT=https://api.8base.com
VUE_APP_8BASE_WS_ENDPOINT=wss://ws.8base.com' \
> .env.localОба значения
VUE_APP_8BASE_API_ENDPOINT и VUE_APP_8BASE_WS_ENDPOINT менять не нужно. Необходимо только установить значение VUE_APP_8BASE_WORKSPACE_ID. Если у вас есть воркспейс 8base, который вы хотите использовать для создания чат-приложения по нашему руководству, обновите файл .env.local, указав свой идентификатор воркспейса. Если нет — получите идентификатор воркспейса, выполнив шаги 1 и 2 из 8base Quickstart.
2. Импорт схемы
Теперь нам нужно подготовить серверную часть. В корне этого репозитория вы должны найти файл
chat-schema.json. Чтобы импортировать его в рабочую область, нужно просто установить командную строку 8base и залогиниться, а затем импортировать файл схемы.# Установка 8base CLI
yarn global add 8base-cli
# Аутентификация CLI
8base login
# Импортируем схему в нашу рабочую область
8base import -f chat-schema.json -w <YOUR_8BASE_WORKSPACE_ID>3. Доступ к API
Последняя задача по бэкенду — разрешить публичный доступ к GraphQL API.
В консоли 8base перейдите в
App Services > Roles > Guest. Обновите разрешения, установленные как для сообщений, так и для пользователей, чтобы они были или отмечены галочкой, или установлены как All Records (как показано на скриншоте ниже).Роль Guest определяет, что разрешено делать пользователю, отправившему неаутентифицированный запрос к API.
Редактор ролей в консоли 8base.
4. Пишем GraphQL запросы
На этом этапе мы собираемся определить и выписать все запросы GraphQL, которые нам понадобятся для нашего компонента чата. Это поможет нам понять, какие данные мы будем читать, создавать и прослушивать (через WebSockets) с помощью API.
Следующий код следует поместить в файл
src / utils / graphql.js. Прочтите комментарии над каждой экспортированной константой, чтобы понять, что выполняет каждый запрос.
/* 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
}
}
}
}
`;5. Создание Apollo и клиента подписки
Когда наши запросы GraphQL написаны, самое время настроить наши модули API.
Во-первых, давайте займемся клиентом API с помощью
ApolloClient с его обязательными настройками по умолчанию. Для createHttpLink мы предоставляем наш полностью сформированный эндпоинт воркспейса. Этот код находится в src/utils/api.js.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, обратитесь к их документации.Затем займемся клиентом подписки, используя
subscriptions-transport-ws и isomorphic-ws. Этот код немного длиннее, чем предыдущий, поэтому стоит потратить время на чтение комментариев в коде.Мы инициализируем
SubscriptionClient, используя наш эндопоинт WebSockets и workspaceId в параметрах connectionParams. Затем мы используем этот subscriptionClient в двух методах, определенных в экспорте по умолчанию: subscribe() и close().subscribe позволяет нам создавать новые подписки с обратными вызовами данных и ошибок. Метод close — это то, что мы можем использовать, чтобы закрыть соединение при выходе из чата.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 и его параметрах,
// пожалуйста, обратитесь к их документации.
6. Написание компонента Vue
Теперь у нас есть все необходимое для создания публичного чата. Осталось только написать один компонент
GroupChat.vue.Загрузите компонент с помощью yarn serve, и продолжим.
Важное замечание: у каждого свое представление о красоте, поэтому я сделал только минимальные стили, необходимые для того, чтобы компонент был функциональным.
Скрипт компонента
Сначала нам нужно импортировать наши модули, простые стили и GraphQL запросы. Всё это находится в нашем
каталоге src / utils.Объявите следующие импорты в
GroupChat.vue./* 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";Компонентные данные
Мы можем определить, какие свойства данных мы хотим использовать в функции data нашего компонента. Все, что нам нужно, это способ хранить пользователей чата, сообщения, имя «текущего» пользователя и любое сообщение, которое еще не было отправлено. Эти свойства можно добавить следующим образом:
/* imports ... */
export default {
name: "GroupChat",
data: () => ({
messages: [],
newMessage: "",
me: { email: "" },
users: [],
}),
};Хуки жизненного цикла
Наши хуки жизненного цикла выполняются в разные моменты «жизни» компонента Vue. Например, когда он монтируется или обновляется. В данном случае нас интересует только создание и
beforeDestroy компонента. В таких случаях мы хотим либо открыть подписки на чат, либо закрыть./* ипорты... */
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();
},
};Методы компонента
Мы должны добавить определенные методы, предназначенные для обработки каждого вызова / ответа API (
createMessage, addMessage, 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>И вот публичный чат построен. Если вы откроете его в своей локальной сети, вы сможете начать отправлять и получать сообщения. Однако, чтобы доказать, что это настоящий групповой чат, откройте несколько окон и наблюдайте за ходом разговора.
7. Заключение и тестирование
В этом руководстве мы изучили, как использование современных инструментов разработки позволяет нам создавать реальные приложения за считанные минуты.
Надеюсь, вы также узнали, как инициализировать
ApolloClient и SubscriptionClient для эффективного выполнения запросов GraphQL, мутаций и подписок в воркспейсе 8base, а также немного о VueJS.Независимо от того, работаете ли вы над мобильной игрой, мессенджерами, приложениями-уведомлениями, или над другими проектами, требующими данных в реальном времени, подписки — отличный инструмент. И сейчас мы только начали их рассматривать.
Создайте чат-приложение с 8base
8base — это готовый к работе бессерверный бэкенд-как-сервис, созданный разработчиками для разработчиков. Платформа 8base позволяет разработчикам создавать потрясающие облачные приложения с использованием JavaScript и GraphQL. Узнайте больше о платформе 8base здесь.
