falbar Разрабатываем простой чат с помощью node.js и socket.io

Разрабатываем простой чат с помощью node.js и socket.io

11 ноября 2018 Перевод Туториал 230 0

Чтобы создать настоящее приложение чат, нужно разработать систему отправки и получения данных, которая будет работать в режиме реального времени. Будет невозможно это сделать без реляционной базы данных и вызова 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 части: часть клиента и часть сервера. Нам нужно будет работать с этими частями, чтобы сделать рабочее приложение.

arxitektura-prilozheniya-nodejs

Сервер оставим на node.js, чат на первых этапах будет проектироваться им: он будет заниматься отправкой пакетов и веб-сайтом. Клиенту не будет виден этот код.

Часть клиента будет загружаться на компьютере клиента. У него будет прямой доступ к файлам (html/css и js).

Сторона сервера:

Нам нужно будет создать файл app.js, который запустит сервер и все пакеты.

appjs-nodejs

Этот блок кода инициализирует наше экспресс-приложение. Если вы перейдете на http://localhost:3000, то увидите сообщение.

Далее нужно настроить socket.io так, чтобы он был готов окунуться в мир WebSocket.

okunutsya-v-mir-websocket-nodejs

Здесь объект io даст нам доступ к библиотеке socket.io. Объект io теперь прослушивает каждое подсоединение к приложению. Каждый раз, когда подсоединяется новый пользователь, в нашей консоли появится сообщение «Подключился новый пользователь».

Если попробовать перезапустить сервер на локальной станции, ничего не произойдет… Почему? Потому что сторона клиента еще не готова.

if-you-try-to-reload-our-browser-on-localhost-nodejs

Сейчас socket.io установлена только в части сервера. Далее проведем ту же работу на стороне клиента.

Сторона клиента:

Нам нужно лишь поменять одну строчку в app.js. По сути мы хотим отображать не сообщение «Привет, мир», а окно с чат-боксом, окном для ввода ника/сообщения и кнопкой отправки. Для этого нужно обработать HTML-файл (в нашем случае это будет ejs-файл) при получении доступа к корню /.

Нужно применить метод render к объекту res.

primenit-metod-render-k-obektu-res-nodejs

С другой стороны, нужно создать папку views с файлом index.ejs. CSS будет находиться в публичной папке:

nuzhno-sozdat-papku-views-nodejs

Наш localhost:3000 будет выглядеть так:

localhost3000-nodejs

Раз уж мы сделали простой шаблон, «можно установить» 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.

Теперь просто впишите там это:

just-write-this-in-it-nodejs

Как вы могли догадаться, при запуске клиентом этого файла будет совершено автоматическое подключение, а значит - создан новый сокет.

При перезагрузке страницы в вашем терминале отобразится сообщение «Подключился новый пользователь».

Отправка и получение данных

Ник:

Когда пользователь будет подключаться к приложению, мы присвоим ему/ей ник по умолчанию, например, «anonymous». Для этого нужно будет перейти на сторону сервера (app.js) и добавить ключ к сокету. По сути сокет олицетворяет каждого клиента, который подключается к серверу.

for-example-anonymous-nodejs

Мы также будем прислушиваться ко всем вызовам, сделанным в «change_username». Если к этому событию будет отправлено сообщение, ник будет изменен.

На стороне клиента необходимо сделать обратное. При каждом клике на кнопку «change username» клиент должен будет отправить событие с новым значением.

button-change-username-is-clicked-nodejs

Сообщение:

В случае с сообщениями работает тот же принцип!

chat.js:

chatjs-nodejs

app.js:

appjs-new-message-nodejs

Для нового события new_message мы вызываем атрибуты сокета io. Это означает, что все сокеты подключены. Эта строка будет отправлять сообщение всем сокетам. Нам нужно, чтобы сообщение было отослано всем пользователем (в том числе и отправителю).

Так в итоге будет выглядеть наше приложение с чатом:

vyglyadet-nashe-prilozhenie-s-chatom-nodejs

Небольшое улучшение чата

Можно добавить небольшое улучшение, чтобы приложение выглядело реалистичнее. Мы добавим сообщение «ХХХ is typing... » («ХХХ набирает сообщение…»).

xxx-is-typing-nodejs

Это сделать очень просто.

После добавления HTML-элемента в index.ejs надо добавить слушатель событий jQuery, который будет детектировать момент набора сообщения и отправлять событие-сокет «typing».

event-named-typing-nodejs

С другой стороны мы будем прислушиваться к «typing» и передавать сообщение. Это значит, что будет отправлено сообщение всем, кроме сокета, который начал цепь.

typing-and-we-broadcast-a-message-nodejs

Заключение

Как вы можете заметить, это приложение очень легко разработать. До того как я узнал о существовании WebSockets и socket.io, мне казалось, что для таких приложений очень сложно написать код!

Для улучшения приложения можно добавить следующие функции:

  • Система регистрации с возможностью переписываться в чат-руме один на один;
  • История всех бесед;
  • Ярлыки онлайн/оффлайн;
  • Скопировать все возможности WhatsApp.

Это один вариантов как создать чат используя node.js, еще один способ используя уже для это задачи react вы можете прочитать в статье: «Создаем мессенджер на React JS за 10 минут»

Реклама
Комментариев еще не оставлено
no_avatar