от Ogundipe Samuel

Сегодня мы создадим двигатель мини-блог с функциями живых комментариев с помощью .NET и Pusher.

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

Чтобы продлить этот учебник, мы будем использовать MSSQL как нашу базу данных. Убедитесь, что он запущен и работает.

Чтобы следовать этому учебнику, убедитесь, что вы знакомы с основами:

Настройка учетной записи и программы Pusher

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

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

Если у вас его еще нет, перейдите к Pusher и создайте бесплатную учетную запись.

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

Настройка проекта Asp.Net в Visual Studio

Следующее, что нам нужно сделать, это создать новый Asp.Net MVC application.

Для этого давайте:

• ОТКРЫТО Visual Studio и выберите New Project с боковой панели
• В разделе Шаблоны выберите Visual C#
• Далее выберите Web
• В средней части выберите ASP.NET Web Application
• Для этого учебника я назвал проект: Real-Time-Commenting
• Теперь мы почти готовы. Следующим шагом будет установление официальной Pusher библиотека для ASP.NET используя NuGet Package

Для этого переходим в инструменты на верхней панели, нажимаем на NuGet Package Managerв нисходящем списке выбираем Package Manager Console.

Мы увидим Package Manager Console в нижней части нашего Visual Studio. Далее установим пакет, выполнив:

Создание нашей аппликации

Теперь, когда наша среда настроена и готова, давайте погрузимся в написание кода.

По умолчанию Visual Studio создает для нас три контроллера. Но мы будем использовать HomeController для программы логики.

Первое, что мы хотим сделать это определить модель, которая хранит список статей, которые мы имеем в базе данных. Назовем эту модель BlogPost. Итак, давайте создадим файл под названием BlogPost.cs в нашей папке моделей и добавьте:

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

• Идентификатор публикации, который называется BlogPostID (обычно первичный ключ).
• Заголовок нашего поста называется Title (определяется как строка)
• Тело сообщения, которое мы будем создавать (определяется как строка)

Далее создадим модель под названием Comment, о котором мы упоминали раньше. Давайте создадим файл под названием Comment.cs в нашей папке моделей и добавьте:

Глядя на код выше, мы замечаем, что мы объявили следующие свойства:

• Вызван идентификатор нашего комментария CommentID (обычно первичный ключ)
• Имя комментирующего лица
• Тело комментария
• Идентификатор публикации, которую мы комментируем

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

Для этого откроем models\IdentityModels.cs файл. Найдите класс под названием ApplicationDbContext и добавьте следующее после функции create:

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

Здесь мы определили две сущности, наши BlogPost и Comment модели. Теперь у нас будет доступ к ним из экземпляра ApplicationDbContext .

Подключение к нашей базе данных

Несмотря на то, что наша модель сконфигурирована, нам все равно нужно присоединить базу данных к нашей программе. Для этого выберите Server Explorer слева в Visual Studio, щелкните правой кнопкой мыши Data Connections и добавьте базу данных.
Существуют различные базы данных, которые являются легкими и могут подойти к создаваемой программе, например:

• База данных Microsoft Access
• База данных Sqlite
• Сервер MSSQL

Для этого учебника я использовал MSSQL Server.

Создание нашего контроллера

Теперь и наша модель, и база данных настроены, давайте приступим к созданию маршрута индекса. Откройте HomeController и замените его на:

В приведенном выше блоке кода мы определили шесть различных функций:

• The Index функция, показывающая краткий список всех публикаций нашего блога
• The Create функция, которая обрабатывает добавление новых BlogPosts для обоих GET и POST запросы
• The Details функция, возвращающая полный вид нашей публикации
• The Comments функция, которая возвращает данные JSON всех комментариев к определенной публикации
• The Comment функция, которая обрабатывает добавление нового комментария и отправку данных в Pusher.

Прежде чем просмотреть наши функции контроллера, мы заметили, что существует импорт нашего контекста БД в наш класс с помощью строки, которая говорит:

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

В Index мы возвращаем наше представление, передавая список всех сообщений в нашей базе данных, которые будут зациклены.

Дальше, в Create функция, которая обрабатывает наши GET запрос, мы просто возвращаем просмотр для создания новой публикации.

Переходим к Create функция, которая обрабатывает наши POST запрос, который получает вызванный аргумент post типа BlogPost . В этой функции мы добавляем новый post в базу данных, после чего мы возвращаем перенаправление на нашу Index функция.

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

В нашем Comments возвращаем все comments которые принадлежат к конкретному post, идентификатор которого был предоставлен как JSON. Этот метод будет вызван через AJAX POST.

Наконец-то наш Comment функция обрабатывает добавление комментариев в базу данных и отправку данных в Pusher. Здесь мы заметим, что эта функция есть async метод. Это потому, что библиотека Pusher отправляет данные асинхронно, и мы должны ждать ее ответа.

Кроме того, нам нужно заменить XXX_APP_CLUSTER, XXX_APP_ID, XXX_APP_KEY и XXX_APP_SECRET с нашим кластером программ, ID, ключом и секретом, которые мы получили от Pusher раньше.

Создание наших файлов просмотра

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

Просмотр индекса

Давайте заменим стандартное содержимое в Index.cshtml файл по адресу Views\Home\Index.cshtml из:

Глядя на вышеприведенную структуру HTML, мы замечаем, что мы определили таблицу, в которой перечислены все наши публикации и ссылки на них на странице деталей.

Просмотр создания

Здесь нам нужно создать новый файл под названием Create.cshtml в View\Home папку и вставьте в нее следующее:

В приведенной выше структуре HTML мы располагаем тремя основными входными данными:

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

Просмотр деталей и привязки Vue

Это последний файл View, который нам пригодится. Этот файл также обрабатывает привязку к событиям Pusher и обновление комментариев в реальном времени с помощью Pusher и Vue.
Давайте создадим новый файл под названием Details.cshtml в нашем Views\Home и добавьте в нее следующее содержимое:

https://gist.github.com/755c0e5e8cbf53dbb9560deafdd50a21

В приведенном выше блоке кода мы отобразили название и содержимое текущей публикации и количество комментариев Это должно.

Мы также создали нашу форму для комментариев, которая состоит из трех основных элементов, а именно:

• Ввод текста для имени лица, делающего комментарий
• Текстовое поле для текста комментария
• Кнопка для сохранения нового комментария в базе данных

Обратите внимание, что мы использовали Vue v-for директива для повторения и отображения доступных комментариев.

Также обратите внимание, что мы включили некоторые необходимые библиотеки, такие как:

• Библиотека JavaScript axios
• Библиотека JavaScript Vue js
• Библиотека Pusher JavaScript

Pusher Bindings и фрагмент Vue

Ниже представлен наш пример фрагмента Vue, который используется для обработки представления комментариев и обновлений Pusher в реальном времени.

В блоке кода выше мы выполнили два основных действия, а именно:

Чтобы обработать новые комментарии со стороны клиента на сервер, были выполнены следующие шаги:

• Мы присоединили слушатель событий Vue @click к нашей кнопке отправки, которая запускает метод под названием submit_comment
• Мы определили функцию под названием submit_comment который использует axios чтобы сделать запрос POST к нашему comment функция

Подписка на дополнение канала на сервере от других клиентов

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

• Инициализирован объект Pusher при передаче ключа программы и кластера
• Подписался на наш канал звонил asp_channel
• В методе listen в нашем коде Vue мы объявили привязку к нашему событию под названием asp_event. В функции обратного вызова этой связи мы отправляем новые данные в наш список комментариев.

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

Вывод

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

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

Эту публикацию сначала опубликовал автор в блоге Pusher здесь