Создайте приложение для чата в реальном времени с помощью .NET Core и VueJS

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

С возвращением, дорогие читатели! Я очень рад, что вы присоединились ко мне для еще одного захватывающего поста. Сегодня я приготовил для вас кое-что особенное — реальный опыт создания чат-приложения.

Давайте начнем!

Здесь мы создадим впечатляющее приложение для чата в реальном времени, используя мощную комбинацию .NET Core и Vue. Используя возможности библиотеки Microsoft SignalR, я проведу вас через процесс создания приложения для чата, которое обеспечивает бесперебойную связь в реальном времени между сервером и клиентом. Давайте углубимся в шаги, необходимые для создания чат-приложения, которое увлечет ваших пользователей!

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

.NET Core SDK(версия 3.1 или более поздняя): загрузите его с официального веб-сайта .NET Core.
Node.js и npm (диспетчер пакетов Node): получите их на веб-сайте Node.js.
Редактор кода на ваш выбор, например Visual Studio Code: загрузите его с официального веб-сайта Visual Studio Code.

Настройка серверной части с помощью .NET Core

Теперь, когда у нас есть все необходимое, давайте приступим к первому этапу нашего путешествия: настройке серверной части с помощью .NET Core. Мы создадим надежную основу, установив серверную инфраструктуру нашего чат-приложения с помощью .NET Core. Приготовьтесь, пока мы раскрываем секреты беспрепятственного управления подключенными пользователями, позволяя легко отслеживать всех в сети. Пришло время вдохнуть жизнь в серверную часть вашего приложения!

Создайте новый проект веб-API .NET Core, выполнив следующую команду в командной строке:

Установите необходимые пакеты SignalR, выполнив следующую команду:

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

Создайте класс ChatController, который предоставляет конечную точку API (/api/chat/users) для получения списка подключенных пользователей.

Метод GetConnectedUsers() извлекает список подключенных пользователей, используя метод ConnectedUsersService.

Реализуйте класс ChatHub, расширяющий класс Hub. Этот класс заботится о клиентских подключениях, отключениях и широковещании сообщений.

Метод OnConnectedAsync() срабатывает при подключении клиента. Он добавляет идентификатор подключения пользователя к ConnectedUsersService и уведомляет всех клиентов о новом пользователе.
Метод OnDisconnectedAsync() выполняется, когда клиент отключается. Он удаляет идентификатор подключения пользователя из ConnectedUsersService и уведомляет всех клиентов об отключении пользователя.
Метод SendMessage() получает сообщение от клиента и рассылает его всем подключенным клиентам.

Настройка внешнего интерфейса с помощью Vue

Но подождите, это еще не все! Когда бэкэнд будет готов, мы перейдем к разработке внешнего интерфейса, используя возможности Vue, уважаемого фреймворка JavaScript. Используйте его элегантность, чтобы создать увлекательный пользовательский интерфейс, который загипнотизирует вашу аудиторию. Приготовьтесь, пока мы исследуем сферы магии Vue, очаровывая ваших пользователей восхитительным визуальным опытом.

Создайте новый проект Vue 3 с помощью Vue CLI, выполнив следующую команду в командной строке:

Установите необходимые пакеты для SignalR и Axios, выполнив следующую команду:

Создайте компонент Chat.vue, который инкапсулирует пользовательский интерфейс (UI) чата и соответствующие ему функции.

Перехватчик жизненного цикла mounted инициализирует подключение концентратора SignalR и извлекает список подключенных пользователей.
Метод initializeSignalR() устанавливает подключение SignalR и настраивает обработчики событий.
Метод registerSignalREventHandlers() обрабатывает входящие сообщения и соответствующим образом обновляет пользовательский интерфейс.
Метод refreshConnectedUsers() извлекает список подключенных пользователей из внутреннего API.
Метод sendMessage() отправляет сообщение на сервер и обновляет пользовательский интерфейс.

Замените существующее содержимое в файле App.vue разметкой для компонента Chat.vue.

Настройка приложения и его запуск

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

Настройте серверную часть

Откройте файл Startup.cs и добавьте необходимые конфигурации для CORS, SignalR и файла ConnectedUsersService.
Убедитесь, что политика CORS разрешает запросы с URL-адреса внешнего интерфейса (например, http://localhost:8080), изменив метод WithOrigins.
Настройте конечную точку SignalR, сопоставив ChatHub в методе UseEndpoints.

Настройте внешний интерфейс

Откройте файл main.js в папке src и импортируйте компонент ChatVue.
Добавьте компонент ChatVue в список компонентов приложения Vue.
Замените существующее содержимое в файле App.vue разметкой для компонента ChatVue.

Запустите приложение

Запустите внутренний сервер, перейдя в папку SignalR.Chat.API и выполнив команду:

Откройте новую командную строку, перейдите в папку chat-app (проект Vue) и выполните команду:

Получите доступ к приложению чата в своем браузере, посетив указанный URL-адрес (например, http://localhost:8080), и вы увидите экран, как показано ниже.

Вот и все! вы дошли до конца.

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

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

GitHub — paulap887/SignalR.Chat
Внесите свой вклад в разработку paulap887/SignalR.Chat, создав учетную запись на GitHub.github.com

Если вы нашли этот контент ценным, я был бы очень признателен за вашу поддержку следующими способами:

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