Обновленную версию этой статьи можно найти здесь. Создание приложения для чата в реальном времени

Следуя моим предыдущим руководствам по Vue.js для backend-разработчиков, где я перечислял важные вещи, которые backend-разработчик должен изучить на Vue.js, я решил использовать некоторые из перечисленных элементов для создания готового к производству и приложение чата в реальном времени.

В этой статье я покажу вам, как я создаю приложение для чата в реальном времени с помощью VUEJS, NODEJS, EXPRESS и SOCKET.IO.

Вот скриншот того, что мы будем строить:

Неприменимо: я не занимаюсь фронтендом, поэтому пока не смейтесь над моим дизайном, цвета и дизайн - мои враги. Я с трудом иду, чтобы подружиться с ними. Это просто демонстрация.

НАСТРОЙКА

В этом руководстве требуются Node.js и NPM. Если у вас еще не установлен NodeJS, вы можете установить его здесь.

  • Требуются базовые знания JavaScript.
  • Кроме того, требуется мало или совсем не нужно знать VUEJS.

Если все настроено, приступим.

Создайте каталог для приложения, откройте каталог с помощью вашего любимого редактора, я использую код Visual Studio.

При желании вы можете использовать терминал.

mkdir ChatApp && cd ChatApp && code .

Затем давайте инициализируем проект с помощью NPM.

npm init

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

УСТАНОВКА ЗАВИСИМОСТИ

Давайте установим зависимости нашего приложения. Я опущу список необходимых зависимостей и способы их установки. Мы сохраним простоту и установим только эти две зависимости.

я. ЭКСПРЕСС ( поговорите об этом здесь )

npm install express --save

ii. SOCKET.IO ( Прочтите об этом здесь )

npm install --save socket.io

После установки всех зависимостей запустите

npm install

Он установит все необходимые пакеты.

ПЕРЕДНЯЯ ЧАСТЬ С VUEJS (РАЗМЕТКА)

В интерфейсе мы будем использовать Vue.js (Прочтите об этом), давайте перейдем к установке Vue в нашем каталоге, а также загрузке 4.3.1 (Прочтите об этом здесь)

Создайте файл index.html.

touch index.html

Чтобы включить Vue.js и bootstrap в наш проект, мы просто скопируем CDN (Content Delivery Network) и включим его в раздел скриптов нашего файла index.html.

После успешной установки Vue и начальной загрузки давайте перейдем к созданию разметки с помощью Vue и начальной загрузки.

Чтобы подключить сервер Socket.IO к клиенту, мы добавим клиентскую библиотеку JavaScript Socket.IO, которая поможет нам установить соединение между сервером и клиентом.

<script src="/socket.io/socket.io.js"></script>

Это будет наш Vue и файл начальной загрузки (HTML) для интерфейса. Вы можете взять весь код для внешнего интерфейса здесь, чтобы следить за ним.

Лучший способ учиться - следовать за ним

Вы также можете скачать здесь клиентскую библиотеку Socket.IO.

Вы должны разделить проблемы, отделив коды JavaScript от разметки, но в моем случае я включу их вместе для облегчения доступа.

НАСТРОЙКА НАШЕГО СЕРВЕРА.

Создайте server.js внутри файла server.js, давайте создадим и настроим экспресс-сервер для работы с Socket.IO.

Это базовая конфигурация, необходимая для настройки Socket. IO в бэкэнде.

КАК РАБОТАЕТ SOCKET.IO

Socket.IO - это библиотека чата в реальном времени на JavaScript, вы можете прочитать документацию здесь, так как это выходит за рамки этой статьи, но я постараюсь объяснить немного, что будет полезно для этой статьи.

Socket.IO работает путем добавления прослушивателей событий (Прочтите об этом здесь) к экземпляру http.Server, что мы и делаем здесь.

Затем мы будем прослушивать новое событие подключения.

Например, если новый пользователь посещает 1 27.0.0.1:3000, сообщение в Console.log будет напечатано на консоли.

Socket.IO имеет множество флагов или методов, которые мы можем вызывать для выполнения множества функций, таких как генерация события, прослушивание событий и т. Д., Которые мы собираемся использовать в этой статье.

Socket.ON (): принимает имя события и обратный вызов в качестве параметров, он прослушивает событие, отправленное с сервера, или наоборот, а обратный вызов используется для получения любых данных, связанных с событием.

Socket.EMIT (): генерирует / отправляет событие с данными или без данных в слушающие сокеты, включая себя самого.

Socket.Broadcast.Emit (): передает событие другим подключенным клиентам, не включая себя. Мы будем использовать эти методы для отправки различных событий с сервера через приложение чата.

НАСТРОЙКА НАШЕГО КОДА КЛИЕНТА

Откройте index.html в нижней части и добавьте следующий код в тег скрипта.

Мы добавили var socket = io(); и создали новый экземпляр Vue, также внутри только что созданного экземпляра Vue, мы установили наш элемент с помощью el: ‘#app’ , а также объявили наш объект данных с некоторыми пустыми массивами и свойствами.

Перейдем к объекту methods, мы увидим Send() method , который хранит данные нашего чата в массиве сообщений и использует Socket.emit() flag для отправки события чата на сервер.

На стороне сервера мы получаем событие с флагом Socket.on() и повторно отправляем его другим подключенным клиентам, используя флагSocket.broadcast.emit().

В ловушке V ue CREATED мы прослушиваем все события, генерируемые сервером, включая событие чат-сообщения, которое мы повторно отправили с сервера ранее.

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

Аналогия

Итак, если г-н A отправляет сообщение на сервер, а сервер ретранслирует его, г-н B, C, D, E и т. Д. Получит сообщение, но г-н A не получит, потому что это отправитель.

Так что не беспокойтесь, даже если мы прослушиваем событие chat-message в CREATED объекте, мы не получим обратно собственное сообщение с сервера.

Это то, что мы будем делать во время различных действий пользователей в ChatApp.

После получения события от сервера в СОЗДАННОМ объекте мы сохраним его в нашем массиве сообщений с помощью message type (указывающего, что это сообщение от сервера) и user (кто отправил сообщение).

Подводя итог всему, что происходит в интерфейсной части с каждой репликой. Евреи возражают, я перечислю и объясню, что происходит в каждом из них.

1. Перехватчик методов: в Vue.js здесь создаются все методы / функции в вашем компоненте, каждый раз, когда вы вызываете метод в разметке или шаблоне, Vue будет искать его там.

Пока что у нас объявлено только два метода, а именно:

я. Send (): когда пользователь набирает сообщение и нажимает кнопку отправки, этот метод вызывается для сохранения сообщения в массиве сообщений с другими деталями, а также генерирует на сервер, который я объясняю выше.

II. addUser (): метод отправляет на сервер событие «присоединено» и устанавливает для переменной «готово» значение «истина», показывая, что пользователь успешно присоединился к комнате чата.

2. Созданный хук: в Vue.js созданный хук вызывается при загрузке компонента Vue.js. Итак, это хорошее место для прослушивания всех наших событий с сервера.

Мы слушаем 6 событий с сервера и отправляем 1 событие на сервер.

Из приведенного выше кода мы должны понять, что делает каждый из них, а если нет, то используйте раздел комментариев для вопросов.

3. Перехватчик наблюдения: Перехватчик наблюдения очень интересен, он может многое сделать, но мы использовали его, чтобы прослушивать изменения в окне сообщения и генерировать событие typing, которое транслируется. обратно к другим клиентам сервером.

И в разметке с использованием директив vue.js для разметки нашего представления. Взгляните на полный файл index.html.

Поздравляю с попаданием сюда. Вы можете подписаться на мой канал, чтобы получать уведомления, когда видео падает.

Выводы

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

Надеюсь, вы узнали что-то новое о Vue, Node, Express и Socket.IO. Полный код находится на GitHub, загрузите его сейчас.

Спасибо, что прочитали мою статью.

Здесь, в моем блоге или медиа, я регулярно пишу о backend-разработке, цифровом маркетинге и системе управления контентом. Чтобы читать мои будущие сообщения, просто присоединяйтесь к моей публикации или нажмите Подписаться. Также не стесняйтесь связываться со мной через Twitter, Facebook, Instagram.

Если вы интересуетесь серверной разработкой (или являетесь энтузиастом Интернета), оба (Mobile | Web | Desktop) видео подписываются на мой канал Youtube, мы опубликуем сборник справочных полных руководств и руководств, подобных этому один для ремесленников.

Если вам понравился этот пост, обязательно дайте нам знать и поделитесь им со своими друзьями, и подпишитесь на мой растущий канал.

Поделиться - это забота.

Первоначально опубликовано на masteringbackend.com 1 апреля 2019 г.