Чтобы создать настоящее приложение чат, нужно разработать систему отправки и получения данных, которая будет работать в режиме реального времени. Будет невозможно это сделать без реляционной базы данных и вызова AJAX. Благодаря WebSocket и библиотеке socket.io, эта задача упрощается.
Весь код сегодняшнего урока можно найти на github.
Технологический комплекс
Для создания данного приложения вам понадобятся следующие инструменты:
WebSockets и socket.io
WebSockets - протокол, позволяющий осуществлять двусторонний синхронный обмен данными между клиентом и сервером.
В классических веб-системах клиент отправляет запрос к серверу, а сервер в ответ отправляет данные. В такой системе не возможно создать чат.
В WebSockets сервер может отправлять данные клиенту, что может делать и сам клиент! WebSockets позволяет осуществлять общение между обеими сторонами.
Помимо node.js нам понадобится socket.io. Это библиотека, основанная на этом протоколе. Благодаря ей легче пользоваться WebSockets.
Элементы JavaScript
Node.js - серверная технология JavaScript, которая выполняется сервером на PHP, Ruby, Python. JavaScript использует события. Так как он также обладает этой характеристикой, с помощью node.js чат (его асинхронный код) будет написать проще.
У node.js есть собственный диспетчер пакетов: npm. С ним легче устанавливать, обновлять и удалять пакеты.
В этом туториале мы будем использовать express.js. Это небольшой веб-фреймворк, основанный на node.js.
Организация среды для разработки чата
Во-первых, нужно организовать среду разработки ПО.
Для начала нужно запустить npm - наш диспетчер пакетов. Чтобы это сделать, откройте новый терминал, создайте новый репозиторий, в котором будет содержаться наш проект, войдите в него и инициализируйте npm:
mkdir createSimpleApp
cd createSimpleApp
npm init
npm запросит у вас некоторую информацию. Если вы хотите пропустить этот этап, нажимайте клавишу enter до конца. Теперь при взгляде на свой проект вы обнаружите новый файл: package.json. В нем перечислены все ваши зависимости.
Теперь можно установить пакеты, которые нужны для разработки нашего приложения! Нам понадобятся эти пакеты:
- express: небольшой веб-фреймворк для node.js, чат с которым мы и будем создавать;
- nodemon: пакет, который замечает все изменения и перезапускает сервер. Мы будем пользоваться им вместо классической команды node;
- ejs: шаблонизатор, нужный для упрощения работы с HTML;
- основу приложения составят node.js, socket.io: знаменитый пакет, который работает с WebSockets.
Добавить их в среду максимально легко:
npm install --save package_name
То же самое нужно сделать с нашими 4 пакетами.
В package.json можно добавить эту строчку к ключу scripts:
"start": "nodemon app"
Благодаря ней вы сможете запускать приложение при помощи одной команды, использующей nodemon:
npm run start
Организация среды для разработки закончена. Теперь можно приступить к созданию приложения.
Приложение чат на node.js
Архитектура приложения
Для начала нам нужно разделить разработку приложения на 2 части: часть клиента и часть сервера. Нам нужно будет работать с этими частями, чтобы сделать рабочее приложение.
Сервер оставим на node.js, чат на первых этапах будет проектироваться им: он будет заниматься отправкой пакетов и веб-сайтом. Клиенту не будет виден этот код.
Часть клиента будет загружаться на компьютере клиента. У него будет прямой доступ к файлам (html/css и js).
Сторона сервера:
Нам нужно будет создать файл app.js, который запустит сервер и все пакеты.
Этот блок кода инициализирует наше экспресс-приложение. Если вы перейдете на http://localhost:3000, то увидите сообщение.
Далее нужно настроить socket.io так, чтобы он был готов окунуться в мир WebSocket.
Здесь объект io даст нам доступ к библиотеке socket.io. Объект io теперь прослушивает каждое подсоединение к приложению. Каждый раз, когда подсоединяется новый пользователь, в нашей консоли появится сообщение «Подключился новый пользователь».
Если попробовать перезапустить сервер на локальной станции, ничего не произойдет… Почему? Потому что сторона клиента еще не готова.
Сейчас socket.io установлена только в части сервера. Далее проведем ту же работу на стороне клиента.
Сторона клиента:
Нам нужно лишь поменять одну строчку в app.js. По сути мы хотим отображать не сообщение «Привет, мир», а окно с чат-боксом, окном для ввода ника/сообщения и кнопкой отправки. Для этого нужно обработать HTML-файл (в нашем случае это будет ejs-файл) при получении доступа к корню /.
Нужно применить метод render к объекту res.
С другой стороны, нужно создать папку views с файлом index.ejs. CSS будет находиться в публичной папке:
Наш localhost:3000 будет выглядеть так:
Раз уж мы сделали простой шаблон, «можно установить» socket.io к каждому клиенту, который попытается подключиться к нашему серверу. Для этого нужно импортировать библиотеку socket.io на стороне клиента:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
Мы будем работать с socket.io в файле .js. Единственный способ это сделать - добавить такие строчки:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="chat.js"></script>
Затем в публичной папке нужно добавить файл chat.js.
Теперь просто впишите там это:
Как вы могли догадаться, при запуске клиентом этого файла будет совершено автоматическое подключение, а значит - создан новый сокет.
При перезагрузке страницы в вашем терминале отобразится сообщение «Подключился новый пользователь».
Отправка и получение данных
Ник:
Когда пользователь будет подключаться к приложению, мы присвоим ему/ей ник по умолчанию, например, «anonymous». Для этого нужно будет перейти на сторону сервера (app.js) и добавить ключ к сокету. По сути сокет олицетворяет каждого клиента, который подключается к серверу.
Мы также будем прислушиваться ко всем вызовам, сделанным в «change_username». Если к этому событию будет отправлено сообщение, ник будет изменен.
На стороне клиента необходимо сделать обратное. При каждом клике на кнопку «change username» клиент должен будет отправить событие с новым значением.
Сообщение:
В случае с сообщениями работает тот же принцип!
chat.js:
app.js:
Для нового события new_message мы вызываем атрибуты сокета io. Это означает, что все сокеты подключены. Эта строка будет отправлять сообщение всем сокетам. Нам нужно, чтобы сообщение было отослано всем пользователем (в том числе и отправителю).
Так в итоге будет выглядеть наше приложение с чатом:
Небольшое улучшение чата
Можно добавить небольшое улучшение, чтобы приложение выглядело реалистичнее. Мы добавим сообщение «ХХХ is typing... » («ХХХ набирает сообщение…»).
Это сделать очень просто.
После добавления HTML-элемента в index.ejs надо добавить слушатель событий jQuery, который будет детектировать момент набора сообщения и отправлять событие-сокет «typing».
С другой стороны мы будем прислушиваться к «typing» и передавать сообщение. Это значит, что будет отправлено сообщение всем, кроме сокета, который начал цепь.
Заключение
Как вы можете заметить, это приложение очень легко разработать. До того как я узнал о существовании WebSockets и socket.io, мне казалось, что для таких приложений очень сложно написать код!
Для улучшения приложения можно добавить следующие функции:
- Система регистрации с возможностью переписываться в чат-руме один на один;
- История всех бесед;
- Ярлыки онлайн/оффлайн;
- Скопировать все возможности WhatsApp.
Это один вариантов как создать чат используя node.js, еще один способ используя уже для это задачи react вы можете прочитать в статье: «Создаем мессенджер на React JS за 10 минут»