Разрабатываем простой чат с помощью node.js и socket.io
Чтобы создать настоящее приложение чат, нужно разработать систему отправки и получения данных, которая будет работать в режиме реального времени. Будет невозможно это сделать без реляционной базы данных и вызова 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:
npm запросит у вас некоторую информацию. Если вы хотите пропустить этот этап, нажимайте клавишу enter до конца. Теперь при взгляде на свой проект вы обнаружите новый файл: package.json. В нем перечислены все ваши зависимости.
Теперь можно установить пакеты, которые нужны для разработки нашего приложения! Нам понадобятся эти пакеты:
- express: небольшой веб-фреймворк для node.js, чат с которым мы и будем создавать;
- nodemon: пакет, который замечает все изменения и перезапускает сервер. Мы будем пользоваться им вместо классической команды node;
- ejs: шаблонизатор, нужный для упрощения работы с HTML;
- основу приложения составят node.js, socket.io: знаменитый пакет, который работает с WebSockets.
Добавить их в среду максимально легко:
То же самое нужно сделать с нашими 4 пакетами.
В package.json можно добавить эту строчку к ключу scripts:
Благодаря ней вы сможете запускать приложение при помощи одной команды, использующей nodemon:
Организация среды для разработки закончена. Теперь можно приступить к созданию приложения.
Приложение чат на 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 на стороне клиента:
Мы будем работать с socket.io в файле .js. Единственный способ это сделать — добавить такие строчки:
Затем в публичной папке нужно добавить файл chat.js.
Теперь просто впишите там это:
Как вы могли догадаться, при запуске клиентом этого файла будет совершено автоматическое подключение, а значит — создан новый сокет.
При перезагрузке страницы в вашем терминале отобразится сообщение «Подключился новый пользователь».
Отправка и получение данных
Когда пользователь будет подключаться к приложению, мы присвоим ему/ей ник по умолчанию, например, «anonymous». Для этого нужно будет перейти на сторону сервера (app.js) и добавить ключ к сокету. По сути сокет олицетворяет каждого клиента, который подключается к серверу.
Мы также будем прислушиваться ко всем вызовам, сделанным в «change_username». Если к этому событию будет отправлено сообщение, ник будет изменен.
На стороне клиента необходимо сделать обратное. При каждом клике на кнопку «change username» клиент должен будет отправить событие с новым значением.
В случае с сообщениями работает тот же принцип!
Для нового события new_message мы вызываем атрибуты сокета io. Это означает, что все сокеты подключены. Эта строка будет отправлять сообщение всем сокетам. Нам нужно, чтобы сообщение было отослано всем пользователем (в том числе и отправителю).
Так в итоге будет выглядеть наше приложение с чатом:
Небольшое улучшение чата
Можно добавить небольшое улучшение, чтобы приложение выглядело реалистичнее. Мы добавим сообщение «ХХХ is typing. » («ХХХ набирает сообщение…»).
После добавления HTML-элемента в index.ejs надо добавить слушатель событий jQuery, который будет детектировать момент набора сообщения и отправлять событие-сокет «typing».
С другой стороны мы будем прислушиваться к «typing» и передавать сообщение. Это значит, что будет отправлено сообщение всем, кроме сокета, который начал цепь.
Заключение
Как вы можете заметить, это приложение очень легко разработать. До того как я узнал о существовании WebSockets и socket.io, мне казалось, что для таких приложений очень сложно написать код!
Для улучшения приложения можно добавить следующие функции:
- Система регистрации с возможностью переписываться в чат-руме один на один;
- История всех бесед;
- Ярлыки онлайн/оффлайн;
- Скопировать все возможности WhatsApp.
Источник статьи: http://falbar.ru/article/razrabatyvaem-prostoj-chat-s-pomoshhyu-nodejs-i-socketio
Создание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js
В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью 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.
Если вам предлагают ввести какую-то информацию, смело ее вводите или нажимайте Enter для настроек по умолчанию. Такая информация используется для настройки пакета .json файла.
Установка зависимостей
Давайте установим зависимости приложения. Я покажу список нужных зависимостей и познакомлю с процессом их установки. Чтобы ничего не усложнять, ограничимся двумя зависимостями.
npm install —save socket.io
После установки всех зависимостей запустите
Так установятся все необходимые пакеты.
Фронтенд с Vue.js (разметка)
Интерфейс приложения мы сделаем в Vue.js . Его нужно установить в нашу директорию и добавить bootstrap 4.3.1 .
Для включения в проекты Vue.js и bootstrap скопируем CDN и добавим в раздел со скриптами файла index.html .
После успешной установки Vue и bootstrap перейдем к созданию разметки.
Для подключения Socket.IO сервера к клиенту добавим клиентские JavaScript библиотеки.
Это будет наш файл Vue и bootstrap (HTML) для фронтенда. Можете скопировать код целиком, чтобы не отставать.
Лучший способ научиться чему-то — повторять за другими.
Можно разграничить функционал, вынеся JavaScript-код из общей разметки. Это решать вам. Но я для удобства этого делать не буду.
Установка сервера
Создадим server.js . Внутри файла создадим и настроим Express-сервер для работы с Socket.IO.
Это базовая конфигурация, необходимая для установки Socket.IO в бэкенде.
Как работает Socket.IO
Socket.IO — это JavaScript-библиотека чата в режиме реального времени. Документацию можно почитать здесь (она не относится к тематике данной статьи). Я объясню лишь то, что нам потребуется для статьи.
Работа Socket.IO сводится к добавлению слушателей события для экземпляра http.Server . Именно этим мы сейчас и займемся.
Например, если пользователь посещает 1 27.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 , которое транслируется сервером для других клиентов.
Источник статьи: http://zen.yandex.ru/media/nuancesprog/sozdanie-chatprilojeniia-v-rejime-realnogo-vremeni-s-vuejs-socketio-i-nodejs-5e797f87ac583c449f13877a