
Содержание статьи
от 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 здесь