Как создать простое приложение веб чата
Мой отец любит напоминать мне, что, будучи компьютерным инженером в 1970-х, «он был программистом до того, как программирование стало модным». Пару раз он даже показывал старые скрипты Fortran и COBOL. Прочитав этот код, я с уверенностью могу сказать, что программирование сегодня определенно круче.
Отличительная черта современных языков программирования и сред разработки — это то, насколько меньше кода приходится писать разработчику. Используя высокоуровневые языки вместе со множеством доступных API-интерфейсов, пакетов с открытым исходным кодом и платных сервисов, приложения — даже со сложными требованиями — можно создавать довольно быстро.
Сравнением, позволяющим продемонстрировать эволюцию разработки программного обеспечения, является строительство. Когда-то строительство любого дома начиналось с вырубки деревьев на вашем участке. Однако быстро появились материалы, инструменты и способы, чтобы строительство завершалось быстрее, объекты становились прочнее, а рабочие освобождались от некоторых элементарных задач.
Сколько было бы построено небоскребов, если бы строители сами добывали себе сталь?
Разработчики ПО, которые продолжают работать и по сей день, на заре карьеры сами “рубили себе деревья”. При этом беспрецедентные инновации последнего десятилетия привели к тому, что индустрия программного обеспечения стала развиваться примерно так же, как и строительство.
Проще говоря, у современных разработчиков теперь есть инструменты, техника и передовые методы, которые позволяют быстрее завершать проекты, получать стабильные приложения, а так же избавляют разработчиков от задач низкого уровня.
Как сделать приложение для чата
WebSockets нативно поддерживаются всеми современными браузерами. Однако наша цель — выяснить, какие инструменты мы можем использовать в работе, а не изобретать их. Учитывая это, мы будем использовать следующие технологии:
Кроме того, в видео ниже (на английском языке) более подробно объясняется каждый шаг.
Семь шагов для создания чат приложения:
1. Настройка проекта
Клонируйте стартовый проект и перейдите в директорию группового чата. Вы можете сами определить, использовать yarn или npm для установки зависимостей проекта. В любом случае, нам нужны все NPM пакеты, обозначенные в файле package.json.
Чтобы взаимодействовать с GraphQL API, мы должны настроить три переменные среды. Создайте файл .env.local в корневой директории с помощью следующей команды, и приложение Vue после инициализации автоматически установит переменные среды, которые мы добавили в этот файл.
Оба значения 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 и залогиниться, а затем импортировать файл схемы.
3. Доступ к API
Последняя задача по бэкенду — разрешить публичный доступ к GraphQL API.
Роль Guest определяет, что разрешено делать пользователю, отправившему неаутентифицированный запрос к API.
Редактор ролей в консоли 8base.
4. Пишем GraphQL запросы
На этом этапе мы собираемся определить и выписать все запросы GraphQL, которые нам понадобятся для нашего компонента чата. Это поможет нам понять, какие данные мы будем читать, создавать и прослушивать (через WebSockets) с помощью API.
Следующий код следует поместить в файл src / utils / graphql.js . Прочтите комментарии над каждой экспортированной константой, чтобы понять, что выполняет каждый запрос.
5. Настройка Apollo клиента для подписок
Когда наши запросы GraphQL написаны, самое время настроить наши модули API.
Затем займемся клиентом подписки, используя subscriptions-transport-ws и isomorphic-ws . Этот код немного длиннее, чем предыдущий, поэтому стоит потратить время на чтение комментариев в коде.
Мы инициализируем SubscriptionClient , используя наш эндопоинт WebSockets и workspaceId в параметрах connectionParams . Затем мы используем этот subscriptionClient в двух методах, определенных в экспорте по умолчанию: subscribe() и close() .
subscribe позволяет нам создавать новые подписки с обратными вызовами данных и ошибок. Метод close — это то, что мы можем использовать, чтобы закрыть соединение при выходе из чата.
6. Написание компонента Vue
Теперь у нас есть все необходимое для создания публичного чата. Осталось только написать один компонент GroupChat.vue .
Загрузите компонент с помощью yarn serve, и продолжим.
Важное замечание: у каждого свое представление о красоте, поэтому я сделал только минимальные стили, необходимые для того, чтобы компонент был функциональным.
Скрипт компонента
Сначала нам нужно импортировать наши модули, простые стили и GraphQL запросы. Всё это находится в нашем каталоге src / utils .
Объявите следующие импорты в GroupChat.vue .
Компонентные данные
Хуки жизненного цикла
Наши хуки жизненного цикла выполняются в разные моменты «жизни» компонента Vue. Например, когда он монтируется или обновляется. В данном случае нас интересует только создание и beforeDestroy компонента. В таких случаях мы хотим либо открыть подписки на чат, либо закрыть.
Методы компонента
Мы должны добавить определенные методы, предназначенные для обработки каждого вызова / ответа API ( createMessage , addMessage , closeChat , и т.д.). Все они будут сохранены в объекте методов нашего компонента.
Следует отметить одну вещь: большинство мутаций не ждут и не обрабатывают ответы. Это происходит потому, что у нас работают подписки, которые отслеживают эти мутации. После успешного запуска данные о событиях обрабатываются именно подпиской.
Большинство этих методов говорят сами за себя. В любом случае, прочтите комментарии в следующем коде.
Шаблон компонента
И последнее, но не менее важное: у нас есть компонент GroupChat.vue .
Есть тысячи отличных руководств о том, как создавать красивые пользовательские интерфейсы. Это — не одно из них.
Следующий шаблон соответствует минимальным требованиям для чат-приложения. Делать его красивым или нет — это уже ваше дело. Тем не менее, давайте быстро пройдемся по ключевой разметке, которую мы здесь реализовали.
Как всегда, читайте встроенные комментарии к коду.
7. Заключение и тестирование
В этом руководстве мы изучили, как использование современных инструментов разработки позволяет нам создавать реальные приложения за считанные минуты.
Надеюсь, вы также узнали, как инициализировать ApolloClient и SubscriptionClient для эффективного выполнения запросов GraphQL, мутаций и подписок в воркспейсе 8base, а также немного о VueJS.
Независимо от того, работаете ли вы над мобильной игрой, мессенджерами, приложениями-уведомлениями, или над другими проектами, требующими данных в реальном времени, подписки — отличный инструмент. И сейчас мы только начали их рассматривать.
Чтобы разработать приложение реального чата, мы должны внедрить систему отправки / получения данных в режиме реального времени. Это будет невозможно сделать с помощью реляционной базы данных и Ajax-вызовов. Благодаря WebSocket и библиотеке socket.io это становится легко.
Вы можете следовать этому уроку с моим репозиторием Github:
WebSockets — это протокол, который обеспечивает двусторонний синхронный обмен между клиентом и сервером.
В классической сети клиент запрашивает сервер, а сервер отвечает, отправляя ему данные обратно. Эта система невозможна для приложения чата.
В WebSockets сервер может отправлять данные клиенту, но клиент тоже может! WebSocket — это своего рода канал связи, открытый в двух направлениях.
Socket.io — это библиотека, основанная на этом протоколе, чтобы упростить использование WebSockets.
Node.js — это серверная технология Javascript, выполняемая сервером в виде PHP, Ruby или Python. JavaScript использует события. Node.js сохраняет эту особенность, поэтому легко создавать асинхронный код.
Node.js поставляется с собственным менеджером пакетов: npm. Становится легко устанавливать, обновлять, удалять пакеты.
В этом уроке мы будем использовать express.js. Это микро-веб-фреймворк, основанный на node.js.
Прежде всего, нам необходимо настроить нашу среду разработки.
Первое, что нужно сделать, это запустить npm, наш менеджер пакетов. Для этого откройте новый терминал, создайте новый репозиторий, который будет содержать наш проект, зайдите в него и инициализируйте npm:
Итак, теперь мы готовы установить пакеты, необходимые для разработки нашего приложения чата! Нам понадобятся эти пакеты:
- Экспресс: фреймворк микро веб-приложений для node.js
- Nodemon: пакет, который обнаружит любые изменения и перезагрузит наш сервер. Мы будем использовать его вместо классической команды узла.
- ejs: движок шаблонов для упрощения производства HTML
socket.io: известный пакет, который управляет WebSockets
Чтобы установить их в нашей среде, это очень просто:
В вашем package.json вы можете добавить эту строку в ключ скриптов:
In your package.json, you could add this line into your scripts key:
С этой командой мы можем запустить nodemon.
Теперь все готово и мы можем приступать к разработке.
Архитектура приложения
Прежде всего, мы должны разделить две части при разработке приложения: клиентскую часть и серверную часть. Нам нужно будет разработать две части, чтобы наше приложение работало.
Сервер будет обрабатываться node.js, чтобы выполнить всю разработку (запустить пакеты и веб-сайт). Этот код не будет виден клиенту.
Клиентская часть будет загружена на компьютер клиента. Он будет иметь прямой доступ к файлам (html / css и js).
Мы должны создать файл app.js, который запустит наш сервер и все пакеты.
Здесь объект io предоставит нам доступ к библиотеке socket.io. Теперь объект io прослушивает каждое соединение с нашим приложением. Каждый раз, когда подключается новый пользователь, он выводит на экран «Новый пользователь подключен».
Если вы попытаетесь перезагрузить наш браузер на localhost, ничего не произойдет … Почему? Потому что наша клиентская сторона еще не готова.
На данный момент socket.io установлен только на серверной части. Далее мы сделаем ту же работу на стороне клиента.
С другой стороны, вам нужно будет создать папку views с файлом index.ejs. CSS будет в общей папке.
Наш localhost: 3000 будет выглядеть так:
Итак, теперь, когда у нас есть наш базовый шаблон, мы должны «установить» socket.io на каждом клиенте, который попытается подключиться к нашему серверу. Для этого нам нужно импортировать библиотеку socket.io на стороне клиента:
Единственный способ работы с socket.io — это файл .js. Итак, в конце вашего тела добавьте эти строки:
И создайте файл chat.js в общей папке.
На данный момент просто напишите это в нем:
Как вы, наверное, догадались, когда клиент загрузит этот файл, он автоматически подключится и создаст новый сокет.
Поэтому, когда вы обновите страницу, мы увидим «Новый пользователь подключен» в вашем терминале.
Пользователь
Когда пользователь подключается к нашему приложению, мы устанавливаем ему / ей имя пользователя по умолчанию, например «анонимный». Для этого нам нужно перейти на серверную часть (app.js) и добавить ключ в сокет. На самом деле, сокет представляет каждого клиента, подключенного к нашему серверу.
Думаю, что каждый из Вас знает, что такое чат. И очень часто на сайтах можно встретить либо маленькие чаты, либо достаточно большие и сложные. В этой статье я опишу принцип создания чата. Обратите внимание, что в этой статье не будет готового кода "скопировал-вставил", а только алгоритм, с помощью которого Вы, обладая необходимыми знаниями, сможете сделать чат.
Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.
Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:
Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.
Теперь необходимо вывести HTML-код:
Теперь займёмся JavaScript:
<?php
/* Получаем данные, полученные из JavaScript */
$message = $_POST["message"];
$name = $_POST["name"];
$date = date(); // Узнаём текущее время и дату
/* Здесь добавляем в таблицу новую запись */
?>
<?php
/* Вытаскиваем все записи из таблицы */
/* Получаем двумерный массив из полученных данных */
/* Преобразуем массив в json-формат и возвращаем его в javascript, где он уже будет выводиться */
?>
Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 25 ):
Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?
Можно, с применением frame. Но это очень плохой вариант в том плане, что, во-первых, будет "моргать" экран, поскольку обновляется целиком весь блок, особенно это будет заметно на медленных компьютерах. Также очень сильно ограничена функциональность и многое нельзя будет сделать.
Можно взять готовый скрипт чата. Минусов масса, но если ничего не знаете, то это единственный вариант.
А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!
Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.
Через CSS у блока можно поставить максимальную высоту и прокрутку.
спасибо) просто не сталкивался с прокруткой) обязательно попробую)
Михаил, вы пишите статьи для людей или для поисковиков?
В первую очередь, для людей. Для поисковиков только <b> ставлю.
Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.
В этом уроке мы будем создавать простое веб-приложение для чата с PHP и jQuery. Такого рода утилита идеально подойдет для живой системы поддержки вашего сайта.
Если вы ищете готовое приложение, скрипт или плагин, вы можете взглянуть на один из многочисленных скриптов чата, доступных на CodeCanyon . Или вы можете нанять опытного разработчика приложений, чтобы помочь вам.
В противном случае, научитесь создавать его самостоятельно в этом уроке.
Вступление
Приложение чата, которое мы будем создавать сегодня, будет довольно простым. Он будет включать систему входа и выхода, функции в стиле AJAX, а также будет предлагать поддержку для нескольких пользователей.
Шаг 1: HTML-разметка
Мы начнем этот урок с создания нашего первого файла с именем index.php.
Шаг 2: CSS-стилизация
Теперь мы добавим немного CSS, чтобы наше приложение чата выглядело лучше, чем со стилем браузера по умолчанию. Код ниже будет добавлен в наш файл style.css.
В вышеупомянутом CSS нет ничего особенного, кроме того факта, что некоторые идентификаторы или классы, для которых мы установили стиль, будут добавлены чуть позже.
Как вы можете видеть выше, мы закончили создание пользовательского интерфейса чата.
Шаг 3: Использование PHP для создания формы входа.
Теперь мы реализуем простую форму, которая спросит у пользователя его имя, прежде чем продолжить.
Одна вещь, на которую вы можете обратить пристальное внимание, это то, что мы использовали функцию htmlspecialchars (), которая преобразует специальные символы в сущности HTML, тем самым защищая переменную name от того, чтобы стать жертвой межсайтовых скриптов (XSS) . Позже мы также добавим эту функцию в текстовую переменную, которая будет опубликована в журнале чата.
Отображение формы входа
Меню приветствия и выхода
Мы еще не закончили создание системы входа в систему для этого приложения чата. Нам все еще нужно разрешить пользователю выйти из системы и завершить сеанс чата. Если вы помните, наша оригинальная HTML-разметка включала простое меню. Давайте вернемся и добавим немного кода PHP, который придаст меню больше функциональности.
Чтобы позволить пользователю выйти из системы и завершить сеанс, мы будем забегать вперед и кратко использовать jQuery.
После этого мы уничтожаем сеанс и перенаправляем пользователя на ту же страницу, где появится форма входа.
Шаг 4: Обработка пользовательского ввода
После того, как пользователь отправил нашу форму, мы хотим захватить его ввод и записать его в наш журнал чата. Для этого мы должны использовать jQuery и PHP для синхронной работы на стороне клиента и сервера.
JQuery
Почти все, что мы собираемся делать с jQuery для обработки наших данных, будет вращаться вокруг пост-запроса jQuery.
Обратите внимание, что приведенный выше код войдет в наш тег script, где мы разместили код выхода из системы jQuery.
Наконец, мы закрываем наш дескриптор файла с помощью fclose ().
Шаг 5: Отображение журнала чата (log.html) Содержание
Все, что опубликовал пользователь, обрабатывается и публикуется с помощью jQuery; это записывается в журнал чата с помощью PHP. Осталось только показать обновленный журнал чата пользователю.
Мы используем ту же процедуру, что и файл post.php, за исключением того, что на этот раз мы только читаем и выводим содержимое файла.
Запрос jQuery.ajax
Запрос AJAX является основой всего, что мы делаем. Этот запрос не только позволяет нам отправлять и получать данные через форму без обновления страницы, но также позволяет обрабатывать запрошенные данные.
Мы заключаем наш ajax-запрос в функцию. Вы поймете, почему через секунду. Как вы видите выше, мы будем использовать только три объекта запроса jQuery ajax.
- url: строка URL для запроса. Мы будем использовать имя файла нашего чата log.html.
- кеш: Это предотвратит кэширование нашего файла. Это гарантирует, что мы получим обновленный журнал чата каждый раз, когда мы отправляем запрос.
- sucess: Это позволит нам прикрепить функцию, которая будет передавать запрашиваемые нами данные.
Автоматическая прокрутка
Постоянное обновление журнала чата
Теперь может возникнуть один вопрос: как мы будем постоянно обновлять новые данные, отправляемые туда и обратно между пользователями? Или, перефразируя вопрос, как мы будем постоянно отправлять запросы на обновление данных?
Ответ на наш вопрос лежит в функции setInterval. Эта функция будет запускать нашу функцию loadLog () каждые 2,5 секунды, а функция loadLog будет запрашивать обновленный файл и автоматически прокручивать div.
Законченный
Кроме того, если вам нужно профессиональное приложение или плагин для вашего следующего проекта, вы можете взглянуть на один из многочисленных скриптов чата, которые мы продаем на CodeCanyon .
Ниже приведены несколько ссылок, которые вы можете проверить, если вы думаете о расширении этого приложения чата:
- Подпишитесь на нас в Твиттере или подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные обзоры и статьи о веб-разработке.
Изучите JavaScript: полное руководство
Мы создали полное руководство, которое поможет вам изучить JavaScript , независимо от того, начинаете ли вы как веб-разработчик или хотите изучать более сложные темы.
Читайте также: