Как создать фотоканал с помощью .NET и Pusher

1656684613 kak sozdat fotokanal s pomoshhyu net i pusher

от Ogundipe Samuel

Сегодня мы создадим ленту фотографий в реальном времени с помощью .NET и Pusher.

0*w8Gy4MNNr3vwqdWh

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

Звучит вкрутую? Едем дальше.

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

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

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

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

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

Затем скопируйте свой идентификатор программы, ключ и секрет из App Keys раздел, поскольку они нам понадобятся позже.

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

Следующее, что нам нужно сделать, это создать новое приложение Asp.Net MVC.
Для этого давайте:

  • Откройте Visual Studio и выберите новый проект на боковой панели
  • В разделе Шаблоны выберите Visual C#
  • Далее выберите Интернет
  • В средней части выберите ASP.N``ET MVC Web Applicat``ion

Для этого учебника я назвал проект: Real-time-photo-feed.

Теперь мы почти готовы. Следующим шагом будет установление официальной Pusher библиотека для .Net с использованием NuGet Package.

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

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

Кроме того, мы также можем установить Pusher библиотека с использованием NuGet Package Manager UI. Для этого в Solution Explorerщелкните правой кнопкой мыши References или проект и выберите Manage NuGet Packages. Вкладка «Обзор» отображает доступные пакеты по популярности. Поиск для Pusher пакет, введя PusherServer в окне поиска вверху справа. Выберите пакет Pusher, чтобы отобразить информацию о пакете справа и включить Install кнопку.

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

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

По умолчанию Visual Studio создает для нас три контроллера. Однако мы будем использовать HomeController для логики приложения. Первое, что мы хотим сделать, это определить модель, хранящая список изображений, которые мы имеем в базе данных.

под models папку, давайте создадим файл под названием PhotoFeed.cs и добавьте следующее содержимое:

В вышеприведенном блоке кода мы объявили модель под названием PhotoFeed с тремя основными свойствами:

  • Идентификатор: это первоначальный ключ таблицы модели
  • Комментарий: Описание изображения
  • Imagepath: Путь к сохраненному изображению

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

В блоке кода выше, DBSet класс представляет набор сущностей, используемых для операций чтения, обновления и удаления. Сущность, которую мы будем использовать для выполнения операций CRUD, это PhotoFeed модель, которую мы создали раньше, и мы дали ей название FeedModel.

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

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

Существуют различные базы данных, которые являются легкими и могут подойти к создаваемой программе, например:

  • База данных Microsoft Access
  • База данных Sqlite
  • Сервер MSSQL
  • Жар-птица
  • VistaDb

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

Создание нашего индексного маршрута

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

В блоке кода выше мы определили нашу функцию Index для обоих GET и POST запросы.

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

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

В GET мы вернули вид, с помощью которого мы будем обрабатывать сложение и обновление нашего канала в реальном времени.

Обратите внимание, что в GET мы передаем переменную в функцию просмотра под названием me. Эта переменная есть a спрашиваемый версия нашей BlogFeed модель. Это будет передано в просмотр, который позже зацикливается и воспроизводится.

Обратите внимание, что POST метод установлен как асинхронный. Это объясняется тем, что библиотека Pusher .NET использует оператор await для ожидания асинхронного ответа от данных, отправленных в Pusher.

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

Однако заметьте, что приведенный выше код не будет обрабатывать ошибку, если изображение было сохранено в БД, но не опубликовано с помощью Pusher. Возможно, нам понадобится использовать оператор try and catch, чтобы обрабатывать сообщения об ошибках в Pusher.

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

Давайте откроем наш Views\Home\Index.cshtml и замените содержимое следующим образом:

В приведенном выше блоке кода мы создали нашу форму, которая включает в себя три основных элемента, а именно:

  • Ввод текста для комментария к изображению.
  • Введите файл для выбора изображения, которое мы хотим передать.
  • Клавиша для сохранения новой записи в базе данных.

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

  • Загрузочный CSS
  • Библиотека JavaScript jQuery
  • Библиотека Pusher JavaScript

Привязки Pusher и фрагмент jQuery

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

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

Загрузка кода изображения

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

  • Мы подключили слушатель событий к нашей кнопке ввода файла, который сохраняет наше изображение в переменной под названием files.
  • Мы определили функцию под названием feed_it которая создает новую FormData, затем добавляет наше изображение и описание в данные формы. Затем эта функция создает AJAX POST запрос к нашему index маршрут.

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

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

  • Инициализирован объект Pusher при передаче ключа программы и кластера.
  • Подписался на наш канал звонил a_channel.
  • Объявил привязку к нашему мероприятию под названием an_event. В функции обратного вызова этого связывания мы имеем pre-pended новые данные в наш список каналов.

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

Ниже представлено изображение того, что мы создали:

0*w8Gy4MNNr3vwqdWh

Вывод

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

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

Есть лучший способ создать нашу программу, оговорки или комментарии? Дайте нам знать в комментариях.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *