Как сделать чат

Как создать приложение-чат за двадцать минут

Мой отец любит напоминать мне, что, будучи компьютерным инженером в 1970-х, «он был программистом до того, как программирование стало модным». Пару раз он даже показывал старые скрипты Fortran и COBOL. Прочитав этот код, я с уверенностью могу сказать, что программирование сегодня определенно круче.

Отличительная черта современных языков программирования и сред разработки — это то, насколько меньше кода приходится писать разработчику. Используя высокоуровневые языки вместе со множеством доступных API-интерфейсов, пакетов с открытым исходным кодом и платных сервисов, приложения — даже со сложными требованиями — можно создавать довольно быстро.

Сравнением, позволяющим продемонстрировать эволюцию разработки программного обеспечения, является строительство. Когда-то строительство любого дома начиналось с вырубки деревьев на вашем участке. Однако быстро появились материалы, инструменты и способы, чтобы строительство завершалось быстрее, объекты становились прочнее, а рабочие освобождались от некоторых элементарных задач.

Сколько было бы построено небоскребов, если бы строители сами добывали себе сталь?

Разработчики ПО, которые продолжают работать и по сей день, на заре карьеры сами “рубили себе деревья”. При этом беспрецедентные инновации последнего десятилетия привели к тому, что индустрия программного обеспечения стала развиваться примерно так же, как и строительство.

Проще говоря, у современных разработчиков теперь есть инструменты, техника и передовые методы, которые позволяют быстрее завершать проекты, получать стабильные приложения, а так же избавляют разработчиков от задач низкого уровня.

Как сделать приложение для чата

Давайте быстро создадим что-нибудь, что раньше занимало бы дни или недели. Мы сделаем Public Chat Room приложение, которое использует WebSockets для обмена сообщениями в реальном времени.

WebSockets нативно поддерживаются всеми современными браузерами. Однако наша цель — выяснить, какие инструменты мы можем использовать в работе, а не изобретать их. Учитывая это, мы будем использовать следующие технологии:

• 8base — управляемый GraphQL API
• VueJS — JavaScript фреймворк

Кроме того, в видео ниже (на английском языке) более подробно объясняется каждый шаг.

Семь шагов для создания чат приложения:

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=
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

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: `$/$`, >), 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: '' >> > >, ‍ /* Хуки . */ >

Шаблон компонента

И последнее, но не менее важное: у нас есть компонент GroupChat.vue .
‍
Есть тысячи отличных руководств о том, как создавать красивые пользовательские интерфейсы. Это — не одно из них.
‍
Следующий шаблон соответствует минимальным требованиям для чат-приложения. Делать его красивым или нет — это уже ваше дело. Тем не менее, давайте быстро пройдемся по ключевой разметке, которую мы здесь реализовали.
‍
Как всегда, читайте встроенные комментарии к коду.

И вот публичный чат построен. Если вы откроете его в своей локальной сети, вы сможете начать отправлять и получать сообщения. Однако, чтобы доказать, что это настоящий групповой чат, откройте несколько окон и наблюдайте за ходом разговора.

7. Заключение и тестирование

В этом руководстве мы изучили, как использование современных инструментов разработки позволяет нам создавать реальные приложения за считанные минуты.

Надеюсь, вы также узнали, как инициализировать ApolloClient и SubscriptionClient для эффективного выполнения запросов GraphQL, мутаций и подписок в воркспейсе 8base, а также немного о VueJS.

Независимо от того, работаете ли вы над мобильной игрой, мессенджерами, приложениями-уведомлениями, или над другими проектами, требующими данных в реальном времени, подписки — отличный инструмент. И сейчас мы только начали их рассматривать.

Создайте чат-приложение с 8base

8base — это готовый к работе бессерверный бэкенд-как-сервис, созданный разработчиками для разработчиков. Платформа 8base позволяет разработчикам создавать потрясающие облачные приложения с использованием JavaScript и GraphQL. Узнайте больше о платформе 8base здесь.

Как создать чат для сайта – обзор и пошаговый план

Одним из самых простых и доступных способов повысить интерес к чату считается создание чата. Он выступает удобным каналом общения с посетителями, причем при должном внимании к разработке и последующим коммуникациям позволяет заметно увеличить трафик интернет-ресурса. Особенно интересным такое решение становится для онлайн-торговли, так как при минимуме трудозатрат способно обеспечить резкий рост продаж и, как следствие, прибыли. Рассмотрим подробнее, что необходимо для быстрого и беспроблемного создания чата.

Стандартные требования к чату для сайта
Этап №1. Программирование каркаса чата с помощью HTML
Этап №2. Программирование основной части чата посредством JS и PHP
Быстрое создание чата – обзор готовых решений
Что почитать и посмотреть по теме?
Подведем итоги

Стандартные требования к чату для сайта

Эффективное функционирование чата предполагает обязательное выполнение нескольких условий. Ключевыми из них выступают такие:

1. Корректное отображение сообщений на любых видах устройств – от персонального компьютера до смартфона.
2. Быстрая и четкая загрузка переписки без необходимости каждый раз обновлять страницу.
3. Интеграция с социальными сетями и/или популярными мессенджерами.
4. Доступность для пользователей дополнительных опций, способных разнообразить общение и сделать его более интересным, например, смайлики, стикеры, изображения или возможность записать аудио.

Этап №1. Программирование каркаса чата с помощью HTML

Сначала требуется создать основные элементы будущего чата. Их два: форма отправки и так называемый контейнер, необходимый для отображения переписки, состоящей из отдельных сообщений. Исходный код программы пишется на HTML и имеет следующий вид.

 
 
 
Загрузка.
 
 
 
 '>
 
 

Далее на том же языке программирования задаются стили будущего чата. Исходный код имеет примерно следующий вид.

.chat < border:1px solid #333; margin:15px; width:40%; height:70%; background:#555; color:#fff; >.chat-messages < min-height:93%; max-height:93%; overflow:auto; >.chat-messages__content < padding:1px; >.chat__message < border-left:3px solid #333; margin-top:2px; padding:2px; >.chat__message_black < border-color:#000; >.chat__message_blue < border-color:blue; >.chat__message_green < border-color:green; >.chat__message_red < border-color:red; >.chat-input < min-height:6%; >input < font-family:arial; font-size:16px; vertical-align:middle; background:#333; color:#fff; border:0; display:inline-block; margin:1px; height:30px; >.chat-form__input < width:79%; >.chat-form__submit

Этап №2. Программирование основной части чата посредством JS и PHP

На втором и главном этапе создания чата формируется его функционал. Необходимые для этого действия разбиваются на несколько отдельных стадий – по количеству функций. Для отправки и загрузки сообщений целесообразно задействовать AJAX. Основной функционал интерфейса и обмен данными с сервером программируется на JavaScript. Взаимодействие с базами данных и методы обработки последних пишутся на языке PHP.

Переменные на JavaScript

Создание переменных происходит по стандартной схеме. Исходный код выглядит следующим образом. Для большей наглядности приводятся поясняющие комментарии к каждому типу переменных.

var messages__container = document.getElementById('messages'); //Контейнер сообщений — скрипт будет добавлять в него сообщения var interval = null; //Переменная с интервалом подгрузки сообщений var sendForm = document.getElementById('chat-form'); //Форма отправки var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения

Запросы

Назначение функции запросов – получение переменной act, которая используется для хранения одного из трех возможных значений:

• авторизация (auth);
• загрузка (load);
• отправка (send).

Далее указанное программой значение направляется в PHP-файл. Исходный код функции занимает больше места и выглядит так.

function send_request(act, login = null, password = null) else if(act == 'send') < //Если нужно отправить сообщение, то получаем текст из поля ввода var1 = messageInput.value; >$.post('includes/chat.php',< //Отправляем переменные act: act, var1: var1, var2: var2 >).done(function (data) < //Заносим в контейнер ответ от сервера messages__container.innerHTML = data; if(act == 'send') < //Если нужно было отправить сообщение, очищаем поле ввода messageInput.value = ''; >>); >

Обновление

Как было отмечено выше, обновление чата должно происходить автоматически, то есть без участия пользователя. Решение задачи достигается за счет написания кода, состоящего из трех частей: задание интервала выполнения функции обновления, отлавливание отправки формы и создание обработчика информации. Итоговый результат выглядит так.

function update() < send_request('load'); >interval = setInterval(update,500); sendForm.onsubmit = function () < send_request('send'); return false; //Возвращаем ложь, чтобы остановить классическую отправку формы >; session_start();//Подключение должно быть на первой строчке в коде, иначе появится ошибка $db = mysqli_connect("localhost","login","password"); mysqli_select_db($db,"chat"); //Заносим данные админа в сессию $_SESSION['login'] = 'admin'; $_SESSION['password'] = 'admin'; $_SESSION['id'] = 1;

Авторизация

Назначение функции – идентификация конкретного пользователя. Она обеспечивается по обычной схеме.

function auth($db,$login,$pass) < //Находим совпадение в базе данных $result = mysqli_query($db,"SELECT * FROM userlist WHERE login='$login' AND password='$pass'"); if($result) < if(mysqli_num_rows($result) == 1) else < unset($_SESSION); //Удаляем все данные из сессии и возвращаем false, если совпадений нет или их больше 1 return false; >> else < return false; //Возвращаем ложь, если произошла ошибка >>

Загрузка

Функция загрузки позволяет разместить сообщение в чате переписки. Она имеет достаточно объемный вид, так как является одной из самых сложных.

function load($db) < $echo = ""; if(auth($db,$_SESSION['login'],$_SESSION['password'])) = 1) < while($array = mysqli_fetch_array($result)) $user[login]: $array[message]

function send($db,$message) < if(auth($db,$_SESSION['login'],$_SESSION['password'])) return load($db); //Вызываем функцию загрузки сообщений >