Как вы можете научиться создавать веб-приложения в реальном времени, которые масштабируются, используя .net Core, C#, Azure SignalR Service и JavaScript

Следуй за мной на Twitter , рад принять ваши предложения по темам или улучшениям/Крис

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

TLDR; Есть две вещи, которые эта статья будет решать, одна – сама сигнал, что она является и зачем ее использовать. Мы также перейдем к службе Azure Signalr и поговорим о разнице. Наконец, мы покажем демонстрацию, используя SignalR Service и Serverless.

Эта статья является частью #25daysofserverless Анкет Новые проблемы будут публиковаться каждый день от Microsoft Cloud Advocates в течение месяца месяца. Узнайте больше о том, как Microsoft Azure позволяет вашему Без сервера функции Анкет

использованная литература

Подпишитесь на бесплатную учетную запись Azure Чтобы иметь возможность использовать службу Service Azure, вам понадобится бесплатная учетная запись Azure
Обзор сигнала Отличная страница, которая объясняет, что такое сигнал, как он работает и т. Д.
ASP.NET CORE Signalr Отличный обзор. Не так много, как первая страница, но все еще охватывает основные концепции, хорошо проведенный TLDR; Версия, если хотите.
Signalr Github Repo Он открыт и содержит примеры, использующие разные языки для без сервера, а также клиентов с Auth и без.
Signalr + .net Основной учебник Этот учебник охватывает, как построить бэкэнд SignalR в .net Основной веб -проект и то, как мы называем его от клиента.

Сигнал

ASP.NET SignalR-это библиотека для разработчиков ASP.NET, которая упрощает процесс добавления веб-функциональности в реальном времени к приложениям. Веб-функциональность в реальном времени-это возможность иметь код сервера толкать Контент к подключенным клиентам мгновенно по мере того, как он становится доступным, вместо того, чтобы сервер ожидает, пока клиент запросит новые данные.

Для чего я могу его использовать?

Хотя в качестве примера часто используется чат, вы можете делать гораздо больше по похоже на мониторинг и приложения для мониторинга, совместные приложения (такие как одновременное редактирование документов), обновления прогресса работы и формы в реальном времени.

Как мне узнать, когда я должен использовать SignalR?

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

Как это работает?

SignalR предоставляет простой API для создания вызовов удаленных процедур сервера к клиенту (RPC), которые вызывают функции JavaScript в клиентских браузерах (и других клиентских платформах) из кода сервера .NET .NET.

Итак, SignalR вызывает мой код JavaScript, когда есть новые данные?

Правильный.

SignalR обрабатывает управление соединением автоматически и позволяет вам транслировать сообщения всем подключенным клиентам одновременно, как чат. Вы также можете отправлять сообщения конкретным клиентам.

Трансляция И я также могу нацелиться на конкретных клиентов, понял.

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

О, так что я мог бы использовать веб -питания вместо сигнала Но если бы это не сработало, мне нужно было бы кодировать запасной. Но если я использую Signalr, мне не нужно заботиться? Я получаю веб -сайт в первую очередь, кроме как завышенное поведение?

Правильный.

Хостинг

Есть два способа размещения сигнала:

Самостоятельно , мы проводим Signalr как часть веб -приложения
Azure SignalR Service , это сигнал, живущий в облаке как сервис, он имеет множество преимуществ

Вот обзор:

Azure SignalR Service

Почему я должен идти с службой за самостоятельно?

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

Итак, вы обрабатываете клиентские подключения для меня и масштабирование. Приятно, мне это нравится.

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

Упрощения и экономит мне деньги. Никаких возражений от меня:)

SignalR Service предлагает глобальный охват и центр обработки данных и сеть мирового класса, масштабируется миллионам соединений, гарантирует SLA, обеспечивая при этом все соответствие и безопасность в стандарте Azure.

Миллионы связей! Это большая чата;) Соблюдение SLA, это сделает мой генеральный директор и юридический отдел счастливым:) Хорошая безопасность, конечно, обязательна.

КАК

Я знаю, что ты хочешь научиться использовать это, так что мы? Мы будем:

Предоставление сервис Azure SignalR
Создать приложение Function Azure , это позволит нам подключиться к сервису Azure SignalR. Мы узнаем, как управлять соединениями, а также как получать и отправлять сообщения.
Создайте пользовательский интерфейс Это может подключиться к нашему приложению Function Function и отправлять/получать сообщения.

Предоставить услугу Azure SignalR

Перейти к Portal.azure.com
Нажмите + Создать ресурс
Введите Сигнал Сервис в поле поиска

Пресс Обзор + Create а затем Создать На следующем экране.

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

Создать приложение для функции Azure

Это связано с созданием приложения Function Function. В нем будет две разные функции:

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

Предварительные условия

Во -первых, как и в случае с любой функцией Azure, необходимой для того, чтобы убедиться, что мы установили предпосылки, которые выглядят по -разному на разных OSS:

Для Mac:

brew tap azure/functions
brew install azure-functions-core-tools

Для Windows:

npm install -g azure-functions-core-tools

Подробнее здесь, если у вас есть Linux как ОС:

https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local

Еще одна вещь, чтобы сделать авторизацию функции без сервера Я рекомендую установить расширение функции Azure. Это позволит вам выполнять функции каркасов, а также отладку и развертывание их. Перейдите на вкладку расширения в коде VS и установите ниже:

Если вы находитесь в Visual Studio, посмотрите здесь:

https://docs.microsoft.com/en-us/azure/azure-functions/functions-develop-vs

Создать наши функции без серверов

ОК, тогда, ради этой статьи, мы будем использовать код VS в качестве нашего выбора IDE. Мы сделаем следующее:

Создать приложение Function Azure , функция Azure должна принадлежать к приложению
Скафолд двух функций лазурного цвета , договориться и Сообщения
Настройка Наши две функции для работы с нашим сервисом Azure SignalR

Привлечь палитру команд Просмотр/Командная палитра , или Cmd+shift+p на Mac.

Далее выберите каталог для вашего приложения (я обычно выбираю тот, в котором я стою)

После этого нас просят выбрать язык. Как вы можете видеть ниже, у нас есть довольно много вариантов. Пойдем с C# для этого.

Следующий шаг – выбрать Триггер Для вашей первой функции (в первый раз, когда вы создаете без серверного проекта, он создаст Project + One Function). A Триггер определяет, как будет начата наша функция. В этом случае мы хотим, чтобы он был запущен/запустил HTTP -вызов, поэтому мы выбираем Httptrigger ниже:

У нас здесь есть еще два шага, это:

Имя нашей функции, давайте назовем это договориться
Пространство имен , назовите это Компания
Авторизация Пойдем с Анонимный

Итак, теперь мы получили без сервера .NET Основной проект. Давайте разберем палитру команд еще раз Просмотр/Командная палитра и введите Функции Azure: создать функцию Как ниже.

Выбирать:

Триггер Выберите Httptrigger
Имя функции , назовите это Сообщения
Пространство имен Назовите это Компания
Уровень авторизации , давайте выберите анонимный

ОК, тогда мы должны иметь проект «Создать функциональный приложение/функциональный приложение» с двумя функциями в нем. Это должно выглядеть так, после того, как вы переименовали Durniate.cs к Durniate.cs и Сообщения.cs были переименованы в Сообщения.cs :

Настройка Signalr

На данный момент нам нужно сделать две вещи:

Добавить декораторы SignalR в код , это гарантирует, что мы подключаемся к правильному экземпляру Azure SignalR в облаке
Добавить информацию о строке подключения , нам нужно добавить эту информацию в наш файл конфигурации, чтобы он знал, с каким экземпляром сигнала поговорить

Добавьте декораторы SignalR

Давайте откроем Durniate.cs и дайте ему следующий код:

// Negotiate.cs
using Microsoft.AspNetCore.Http;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Extensions.SignalRService;

namespace Company
{
  public static class Negotiate
  {
      [FunctionName("negotiate")]
      public static SignalRConnectionInfo GetSignalRInfo(
          [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req,
          [SignalRConnectionInfo(HubName = "chat")] SignalRConnectionInfo connectionInfo)
      {
          return connectionInfo;
      }
  }
}

Из приведенного выше кода мы видим, что у нас есть декоратор SignalrConnectionInfo и мы указываем так называемый центр под названием чат Анкет Кроме того, мы видим, что функция в конечном итоге возвращает ConnectionInfo объект. Здесь продолжается то, что когда эта конечная точка попадает в HTTP -запрос, который мы проводим с нашей службой Azure SignalR в облаке, и в итоге она возвращает нам необходимую информацию об соединении, чтобы мы могли продолжать говорить, когда делаем такие вещи, как отправка сообщений.

Теперь давайте откроем Сообщения.cs и дайте ему следующий код:

// Messages.cs
using System.Threading.Tasks;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Azure.WebJobs.Extensions.SignalRService;

namespace Company
{
  public static class Messages
  {

    [FunctionName("messages")]
    public static Task SendMessage(
          [HttpTrigger(AuthorizationLevel.Anonymous, "post")] object message,
          [SignalR(HubName = "chat")] IAsyncCollector signalRMessages)
    {
      return signalRMessages.AddAsync(
          new SignalRMessage
          {
            Target = "newMessage",
            Arguments = new[] { message }
          });
    }
  }
}

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

Давайте посмотрим на корпус функции в следующий раз. Мы видим, что называем SignalRmessages. Addasync () Анкет Что это делает? Ну, он проходит в SignalRmessage это состоит из двух вещей:

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

Добавить строку подключения

Итак, мы узнали, что наш код нуждается в декораторах SignalR в коде для правильной работы. Однако ничего не будет работать, если мы не добавим информацию о строке подключения в файл конфигурации нашего проекта с именем local.setting.json Анкет

Давайте посмотрим на текущее состояние файла:

{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "dotnet",
        "AzureSignalRConnectionString": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "",
        "CORSCredentials": true
    }
}

Давайте посмотрим на AzuresignalrConnectionString , это должна иметь правильную информацию строки подключения. Мы можем обнаружить, что если мы пойдем нашим сервисом Azure SignalR в облаке.

Перейти к Portal.azure.com
Выберите сервис Azure Signalr
Нажмите Ключи В левом меню
Скопируйте значение под Строка соединения

Далее, давайте обновим Корр имущество. Потому что мы запускаем это локально, нам нужно пока, пока http://localhost: 8080 разрешено говорить о нашем приложении Function Function и службе Azure SignalR.

Обратите внимание, мы убедитесь, что клиент, который мы собираемся создать, будет запущен на порту 8080 Анкет

Создайте пользовательский интерфейс

Хорошо, мы предприняли все необходимые шаги, чтобы создать бэкэнд и сервис Azure SignalR, который способен масштабировать наши соединения в реальном времени. Мы также добавили функцию без сервера, способная прокси, выполняемые любые вызовы в нашу службу Azure SignalR. Что остается, так это код приложения, часть, которую увидят наши пользователи.

Мы построим приложение чата. Таким образом, наше приложение сможет сделать следующее:

Установить Подключение к нашей службе Azure SignalR
Показать входящие сообщения от других клиентов
Отправлять сообщения другим клиентам

Установить связь

Давайте выберем другой каталог, чем в нашем приложении без сервера. Теперь создайте файл index.html и дайте ему следующий контент:

Выше мы добавили несколько тегов скрипта:

Vue.js , это ссылка на версию CDN на Vue.js, вы можете пойти с любым спа -платформой, который вы хотите здесь или ваниль JS
Signalr , это ссылка на CDN -версию SignalR, это необходимо, нам нужно это, чтобы установить соединение с нашем концентратором SignalR, а также для отправки сообщений, которые другие клиенты могут прослушать
Axios Это ссылка на CDN -версию Axios, Axios – это библиотека для обработки HTTP -запросов. В этом случае вы в порядке, используя нативную выборку, вплоть до вас

Как установить соединение в коде? Приведенный ниже код сделает именно это. Мы указываем apibaseurl В местоположении нашего приложения без сервера функции, как только оно будет запущено и запущено.

const apiBaseUrl = 'http://localhost:7071';

const connection = new signalR.HubConnectionBuilder()
    .withUrl(`${apiBaseUrl}/api`)
    .configureLogging(signalR.LogLevel.Information)
    .build();

Выше приведет объект соединения. Чтобы на самом деле подключиться, нам нужно позвонить start () На нашем объекте соединения.

console.log('connecting...');
connection.start()
  .then((response) => {
    console.log('connection established', response);
  })
  .catch(logError);

Прежде чем мы движемся дальше, давайте попробуем убедиться, что мы можем подключиться к нашей функции без сервера и службы Azure SignalR.

Принять это за вращение

Нам нужно предпринять следующие шаги, чтобы проверить вещи:

Стартап Наша функция без сервера в режиме отладки
Стартап Наш клиент на http://localhost: 8080
Обеспечить Соединение установлено Сообщение показано в клиенте

Перейдите в наше приложение без сервера и выберите Отладка/начала отладки из меню. Это должно выглядеть как ниже.

Также поместите точку останова в Durniate.cs и первая строка функции, поэтому мы можем захватить, когда клиент пытается подключиться.

Далее, давайте начнем клиента в http://localhost: 8080 Анкет Использовать, например http-server Для этого в корне вашего клиентского кода:

http -server -p 8080

Как только вы открываете браузер на http://localhost: 8080 это должно нанести нанесение вашей функции без сервера вести переговоры , вот так:

Как вы можете видеть выше, служба Azure SignalR отправляет обратно Accesstoken и URL Вы соединялись с.

Глядя на браузер, мы должны увидеть что -то вроде этого:

Хорошо, все работает до сих пор. Это была сложная часть. Итак, что остается в том, чтобы создать это в приложение, которое пользователь хочет использовать, так что это дальше.:)

Создайте наше приложение Vue.js

Наше приложение должно поддерживать:

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

Давай приступим к работе:)

Создайте приложение Vue.js

Нам нужно создать приложение VUE и убедиться, что оно отображает определенный элемент DOM, например, так:


  
    
      App goes here

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

а также

const app = new Vue({
  el: '#app',    
});

Теперь у нас есть приложение, но оно ничего не делает.

Показать сообщения

Чтобы иметь возможность показывать сообщения, мы должны прослушать события, поднимающиеся из нашей функции без сервера. Если вы помните, в нашей без серверной функции мы позвонили следуя код в нашем Сообщения.cs :

return signalRMessages.AddAsync(
  new SignalRMessage
  {
    Target = "newMessage",
    Arguments = new[] { message }
  });

Мы заинтересованы в прослушивании события Newmessage поднимаясь вышеупомянутой функцией. Код для этого выглядит так:

connection.on('newMessage', newMessage);

function newMessage(message) {
  // do something with an incoming message
}

Хорошо, как мне получить это сообщение, чтобы показать в моем приложении vue.js?

Давайте обязательно обновим нашу наценку до этого:


  Messages
  
    {{message.sender}} {{message.text}}

и код нашего приложения:

const data = {
  messages: []
}

const app = new Vue({
  el: '#app',    
  data: data
});

и это:

function newMessage(message) {
  data.messages = [...data.messages, {...message}]
}

Теперь мы можем представить все сообщения.

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

Справедливая точка, давайте дадим вам эту способность:

Отправить сообщение

Нам нужен способ для пользователя ввести сообщение в HTML, а также способ отправить это сообщение в концентратор SignalR в коде. Начнем с HTML

и код для отправить Функция:

function createMessage(sender, messageText) {
  return axios.post(`${apiBaseUrl}/api/messages`, {
    sender: sender,
    text: messageText
  }).then(resp => console.log('success sending message',resp.data);
}

Наш полный код пока выглядит так:


  
    
      
        User
      
      
        
      
      
          
        
      
      Messages
      
        {{message.sender}} {{message.text}}

И запустить это с двумя разными окнами рядом, должно выглядеть примерно так:

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

Резюме

Мы узнали следующее:

Signalr , что это такое и как его можно размещать либо как часть вашего веб -приложения в службе приложений, либо через службу Azure SignalR + Serverless без сервера.
Серверный , мы предприняли наши первые шаги в без серверов и научились рисковать приложением с функциями
Чат , мы узнали, как создать чат, создав без серверного приложения в качестве конечной точки, и мы также создали клиента в Vue.js

Хотите отправить свое решение в этот вызов?

Хотите отправить свое решение в этот вызов? Создайте решение локально, а затем Отправить проблему Анкет Если ваше решение не включает код, вы можете записать короткое видео и отправить его в качестве ссылки в описании выпуска. Обязательно сообщите нам, какой вызов решению. Мы рады видеть, что вы строите! У вас есть комментарии или вопросы? Добавьте их в область комментариев ниже.

Следите за сюрпризами в течение декабря, когда мы празднуем 25 дней без сервера. Следите за обновлениями здесь на Dev.To, поскольку мы представляем проблемы и решения! Подпишитесь на Бесплатная учетная запись на Azure Чтобы подготовиться к испытаниям!

Оригинал: “https://dev.to/azure/how-you-can-learn-to-build-real-time-web-apps-using-net-core-c-and-azure-signalr-service-and-some-javascript-27b0”