Давайте создадим клон WhatsApp с помощью Vue.js и Firebase

Как создать клон WhatsApp Web с помощью Vue.js, Firebase и Spring Boot.

Введение

Мы ежедневно используем множество социальных сетей, например Facebook, LinkedIn, Twitter, Whatsapp, Instagram. Одна из наиболее часто используемых функций - это чат в реальном времени. В этом уроке мы собираемся создать его, используя Vue.js и Firebase.

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

Раньше мы использовали Firebase для создания входа в социальную сеть, используя Spring Boot в бэкэнде и Vue.js во фронтенде.

Давайте создадим надежный вход в социальные сети с помощью Spring Boot, Vue.js и Firebase
Мы создадим клиент Vue.js для входа в систему с помощью Github / Google с Firebase и создадим систему без сохранения состояния. серверная часть с использованием Spring… medium.com

Живая демонстрация:

simplecoding-social
Изменить описание simplecoding-social.netlify.app

Код на Github для этого руководства:

webtutsplus / social-network-frontend
TODO chat сначала выбрать первого друга в chatview показать временную метку, изменить api, чтобы получить имя комнаты вместе с… github .com

Структура проекта

Давайте создадим страницу чата

Давайте построим представление для всей страницы, оно состоит из двух компонентов:

ChatSidebar
Просмотр чата

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

Полный код для вышеперечисленного можно найти здесь:

webtutsplus / social-network-frontend
Vue.js интерфейс для приложения социальной сети. Участвуйте в разработке webtutsplus / social-network-frontend, создав… github.com

Ответ API

Получив информацию о комнатах, мы отправляем ее дочерним компонентам. Давайте посмотрим на компонент ChatSidebar.

Компонент ChatSidebar

Он получает опору комнат из родительского чата и отображает список компонентов SidebarChatUserRow для каждого пользователя из опоры списка комнат, переданной от родительского Chat.vue.

В правом верхнем углу также есть 3 значка, которые выглядят очень хорошо!

Компонент SidebarChatUserRow

Этот компонент очень простой - он просто отображает электронную почту и аватар для каждого пользователя. Мы можем добавить последнее сообщение позже, если захотим.

Компонент ChatView

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

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

По имени комнаты мы находим связанный roomId в Firebase, получаем все связанные чаты и отображаем эти чаты.

Создание нового чата

Есть форма, где мы скрываем кнопку отправки и действие onclick. Мы предотвращаем действие формы по умолчанию для отправки и обновления с помощью v-on:submit.prevent directive.

Мы получаем данные для inputMsg div и добавляем новую запись в firebase, добавляя чат в название комнаты.

Теперь у нас осталась одна важная функция: выбор другого друга на боковой панели и обновление окна чата.

Поскольку они не относятся к типу "родитель-потомок", мы не можем напрямую передавать или обновлять свойства. Ответ - генерировать событие и прислушиваться к нему.

Полный код компонента chatview.view:

В этом руководстве мы рассмотрели несколько действительно интересных современных тем JavaScript, например:

Как передать реквизит.
Как визуализировать компоненты.
Как испускать события и использовать их.
Как интегрировать Firebase.

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

использованная литература

Больше контента на plainenglish.io