Я попытался создать клон WhatsApp с помощью Vue.js, чтобы изучить некоторые принципы проектирования и получить больше информации о socket.io. Эта идея вдохновлена постом среды о реверс-инжиниринге пользовательского интерфейса WhatsApp.
Внешний стек
- Vue.js — фреймворк
- VueX — хранить связанные функции
- Vue-router — потребности маршрутизации
- Socket.io-client — для подключения к socket.io
- Tailwindcss — CSS-фреймворк
Внутренний стек
- Экспресс — создание API
- Socket.io — для связи в реальном времени между клиентом и сервером.
Серверная реализация
Я использовал express для вызовов API для отправки и получения данных от клиента. Но это не очень полезно, просто для регистрации данных пользователей и сведений о комнате.
Архитектура
Socket.io и Socket.io-client используются для отправки и получения сообщений в реальном времени.
Express предоставляет вызовы API для получения текущих комнат, получения журнала пользователей и получения сведений о конкретной комнате.
Реализация внешнего интерфейса
База интерфейса создается с помощью Vue-cli. Структура папок будет выглядеть так, как показано ниже.
У меня была единственная папка с именем components, которая состоит из всех компонентов, используемых в приложении, а также содержит папку с именем container. Папка container содержит оболочки, которые используют компоненты из внешней папки.
Папка views содержит страницы приложения. На данный момент в приложении три страницы.
- Страница авторизации
- Приборная доска
- Чат
Похожую структуру можно найти в Gatsby-cli, в которой папка pages содержит обертки, а components содержит отдельные компоненты.
Реализация клона WhatsApp
На изображении ниже показан скриншот приложения-клона WhatsApp. Когда вы нажимаете на любой чат, вы можете общаться с людьми, которые доступны в той же комнате.
Vue socket.io-client предоставляет хук под названием sockets, с помощью которого вы получаете события, инициированные серверной частью.
Дело в том, что когда вы находитесь в определенной комнате, другие люди также должны присутствовать в той же комнате, чтобы общаться в режиме реального времени.
Вы можете создавать комнаты и открывать новую комнату чата с желаемым названием комнаты.
Вместо значка нового сообщения я разместил значок GitHub. Нажав на нее, вы перейдете в репозиторий GitHub.
Количество чатов в заголовке — это количество доступных чатов. Счетчик сообщений является статическим счетчиком 27, так как новый пользователь не может видеть старые сообщения.
На изображении ниже представлена комната чата, где пользователи будут общаться в режиме реального времени. Комната чата также показывает ярлыки для пользователей, присоединившихся и вышедших из комнаты.
Дополнительные параметры в правом верхнем углу чата повторно используются из дополнительных параметров на панели инструментов.
Сообщение от других пользователей будет выровнено по левому краю, а background-color будет другого цвета. Фрагмент сообщения используется повторно, а цвет изменяется в зависимости от владельца сообщения.
Подъем
Серверная часть поднимается в heroku, и это бесплатное приложение для подъема. Таким образом, мой сервер будет находиться в спящем режиме, если в течение 30 минут не будет зарегистрировано трафика. Ознакомиться с бесплатными динамометрическими часами можно здесь.
Интерфейсное приложение поднимается в Netlify. Это бесплатное приложение для подъема статического веб-сайта. Приложение напрямую загружается из репозитория GitHub в Netlify. Вы можете обратиться за развертыванием Netlify здесь.
Выводы
- Повторно используйте компоненты везде, где это возможно, и повторно используемые компоненты должны быть доступны по всему миру.
- Цвета CSS для приложения можно зарегистрировать на корневом уровне с помощью переменных CSS, и их следует повторно использовать во всем приложении.
- Вызовы API и процессы, связанные с ответами, должны выполняться на уровне магазина.
- Отделите логику от шаблона для ускорения процесса.
- Папка views содержит страницы приложения, а папка container содержит компоненты более высокого порядка, которые можно использовать на страницах.
Заключение
Есть несколько продуктивных способов структурировать папку вашего проекта и отдельный код. Я нашел это полезным и более чистым для будущего масштабирования приложения. Я надеюсь, что это поможет кому-то в чем-то. Пока.
