Источник: Nuances of Programming
В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью Vue.js, Node.js, Express и SOCKET.IO.
Вот скриншот того, что должно получиться:
PS: Я не специалист по фронтенду, так что не смейтесь над дизайном. Данный макет используется только в качестве примера.
Установка
Для работы нам понадобятся Node.js и NPM. Если у вас еще нет установленного Node.JS, то качайте его отсюда.
- Вам потребуются базовые знания JavaScript.
- Пригодятся небольшие знания по Vue.js (но это не принципиально).
Если все готово, то можно начинать.
Создайте директорию для приложения и откройте ее в любимом редакторе. Я пользуюсь Visual Studio Code.
Если хотите, можете работать в терминале.
mkdir ChatApp && cd ChatApp && code
Давайте инициализируем директорию через NPM.
npm init
Если вам предлагают ввести какую-то информацию, смело ее вводите или нажимайте Enter для настроек по умолчанию. Такая информация используется для настройки пакета .json файла.
Установка зависимостей
Давайте установим зависимости приложения. Я покажу список нужных зависимостей и познакомлю с процессом их установки. Чтобы ничего не усложнять, ограничимся двумя зависимостями.
i. EXPRESS
npm install express --save
ii.SOCKET.IO
npm install --save socket.io
После установки всех зависимостей запустите
npm install
Так установятся все необходимые пакеты.
Фронтенд с Vue.js (разметка)
Интерфейс приложения мы сделаем в Vue.js. Его нужно установить в нашу директорию и добавить bootstrap 4.3.1.
Создадим файл index.html.
touch index.html
Для включения в проекты Vue.js и bootstrap скопируем CDN и добавим в раздел со скриптами файла index.html.
После успешной установки Vue и bootstrap перейдем к созданию разметки.
Для подключения Socket.IO сервера к клиенту добавим клиентские JavaScript библиотеки.
<script src="/socket.io/socket.io.js"></script>
Это будет наш файл Vue и bootstrap (HTML) для фронтенда. Можете скопировать код целиком, чтобы не отставать.
Лучший способ научиться чему-то — повторять за другими.
Также можете скачать клиентскую библиотеку Socket.IO.
Можно разграничить функционал, вынеся JavaScript-код из общей разметки. Это решать вам. Но я для удобства этого делать не буду.
Установка сервера
Создадим server.js. Внутри файла создадим и настроим Express-сервер для работы с Socket.IO.
Это базовая конфигурация, необходимая для установки Socket.IO в бэкенде.
Как работает Socket.IO
Socket.IO — это JavaScript-библиотека чата в режиме реального времени. Документацию можно почитать здесь (она не относится к тематике данной статьи). Я объясню лишь то, что нам потребуется для статьи.
Работа Socket.IO сводится к добавлению слушателей события для экземпляра http.Server. Именно этим мы сейчас и займемся.
Например, если пользователь посещает 127.0.0.1:3000, то сообщение об этом напечатается в консоли.
В Socket.IO есть много флагов или методов, которые можно вызывать для выполнения различных действий (например, отправка событий, прослушивание событий и т.д.).
Socket.ON(): принимает в качестве параметров название события и обратный вызов. Прослушивает события, отправленные на сервер и с него. Обратный вызов нужен для получения данных, связанных с событием.
Socket.EMIT(): отправляет/посылает событие с данными или без них для прослушивания сокетов (включая себя).
Socket.Broadcast.Emit(): отправляет событие всем подключенным клиентам (кроме себя). Эти методы пригодятся для отправки событий с сервера через чат-приложение.
Настройка кода клиентской части
Откройте index.html. В нижней части файла добавьте следующий код в тег script.
Мы добавили var socket = io();и создали новый экземпляр Vue. Далее внутри этого экземпляра прописали наш элемент как el: ‘#app’и объявили наш объект данных с помощью пустых массивов и свойств.
Давайте перейдем к объекту methods. Мы видим методSend(). Он хранит информацию о чате в массиве message и отправляет события чата на сервер с помощью флага Socket.emit().
На серверной стороне мы получаем событие с флагом Socket.on() и через флаг Socket.broadcast.emit()пересылаем его другим подключенным клиентам.
В хуке Vue CREATEDмы прослушиваем все события, отправленные сервером. Сюда же включено событие chat-message, которое мы пересылали с сервера ранее.
Через трансляцию событий сервер отправляет их всем подключенным клиентам, кроме самого отправителя.
Аналогия
Если пользователь А отправляет сообщение на сервер, а сервер ретранслирует его пользователям B, C, D, E и т.д., то это сообщение получат все пользователи, кроме А, поскольку он является отправителем.
Так что нет ничего страшного в том, что мы прослушиваем событие chat-message из объекта CREATED. Все равно мы, как отправители, не получим это сообщение с сервера.
Именно так все и происходит, когда пользователи выполняют какие-то действия в ChatApp.
После получения с сервера события из объекта CREATED , мы сохраняем его в массиве message с message type(указывает, что сообщение отправлено с сервера) и user (тот, кто отправил сообщение).
Подведем итог всему происходящему во фронтенде.
1. Хук Methods. Именно здесь в Vue.js вы создаете все методы/функции для компонента. И при каждом вызове метода в разметке/шаблоне Vue обращается к этому хуку.
У нас есть только два объявленных метода:
i. Send(). Этот метод вызывается, когда пользователь печатает сообщение и нажимает «Отправить». Он сохраняет сообщение в массиве message и отправляет события на сервер (см. выше).
ii. addUser(). Метод отправляет на сервер событие joined и устанавливает значение переменной ready как true, показывая, что пользователь успешно присоединился к чату.
addUser() {
this.ready = true;
socket.emit('joined', this.username)
}
2. Хук Created. Данный хук вызывается при загрузке компонента Vue.js. Это отличное место для прослушивания всех событий с сервера.
Мы прослушиваем 6 событий с сервера и отправляем 1 событие на сервер.
}, 5000);
});
socket.on('connections', (data) => {
this.connections = data;
});
},
В коде выше видно, чем занимается каждое событие.
3. Хук Watch. Это очень интересная штука. Он может многое, но используется для прослушивания изменений в блоке сообщений и отправки события typing, которое транслируется сервером для других клиентов.
Еще он применяется для отметки о прочтении в разметках с используемыми директивами Vue.js. Вот полный файл index.html.
Заключение
Вы можете улучшить код, добавить авторизацию, группы, приватные беседы и управление базой данных, либо отслеживать все изменения через управление сеансами.
Читайте нас в телеграмме и vk
Перевод статьи Solomon Eseme: Build a real-time chat app with vuejs, socket.IO and Nodejs