Создайте потоковую диаграмму в реальном времени за 5 минут (Smoothie JS + сервер Butterfly .NET)

Давайте создадим простое веб-приложение, которое передает и отображает данные в реальном времени с веб-сервера, как это…

Для этого нам всего лишь нужно…

Создайте сервер с помощью Butterfly Server .NET, который предоставляет данные в реальном времени
Создайте клиент, который подключается к Butterfly Server .NET и отображает данные в реальном времени в Smoothie Chart.

Чтобы создать наш клиент, мы изменим Учебное пособие по диаграммам Smoothie и будем использовать пакет Butterfly Client для подключения к серверу и получения данных в реальном времени (под капотом используется WebSocket).

Хотя конечный результат выглядит так же, как и в Учебнике по диаграммам смузи, есть важное отличие. В этом посте показано, как получать данные в реальном времени с сервера, а не просто генерировать случайные данные в клиенте.

Это предполагает, что у вас установлены Visual Studio и установлен npm.

Создание сервера

Сначала создайте новое консольное приложение .NET Core в Visual Studio с именем MyStreamingApp.

Затем установите Butterfly.Core и Butterfly.EmbedIO с помощью Консоли диспетчера пакетов…

Install-Package Butterfly.Core
Install-Package Butterfly.EmbedIO

Затем замените Program.cs этим кодом сервера…

using System;
using Butterfly.Core.Util;
using Butterfly.EmbedIO;
using Dict = System.Collections.Generic.Dictionary<string, object>;
namespace Butterfly.Example.RealtimeStreamingChart {
  class Program {
    static readonly Random random = new Random();
    static void Main(string[] args) {
      using (var ctx = 
        new EmbedIOContext("http://+:8000/", "../../../www")) {
        
        // When a client subscribes to "feed", create
        // an instance of RunEvery that pushes
        // a new row over the channel every 1000ms
        ctx.SubscriptionApi.OnSubscribe("feed",(vars, channel) => {
          return new RunEvery(() => {
            var row = GetRow();
            channel.Queue("data", row);
          }, 1000);
        });
        ctx.Start();
        ProcessX.OpenBrowser($"http://localhost:8000/");
        Console.ReadLine();
      }
    }
    // Replace this with something that reads your real-time data
    static Dict GetRow() {
      return new Dict {
        ["timestamp"] = DateTime.Now.ToUnixTimestamp(),
        ["cpu_core_1"] = random.Next(),
        ["cpu_core_2"] = random.Next()
      };
    }
  }
}

Код выше…

Инициализирует веб-сервер EmbedIO для прослушивания порта 8000.
Прослушивает подписки на канал feed (подписчики получают случайные данные каждую секунду).

Вы также можете увидеть код сервера здесь.

Примечание. Если вы решите запустить это с помощью dotnet run вместо запуска в Visual Studio, вам нужно изменить "../../../www" на просто "www".

Создание клиента

Сначала создайте папку www в Visual Studio под своим проектом.

Затем откройте командную строку или терминал в каталоге MyStreamingApp/MyStreamingApp/www и запустите…

# just accept the defaults
npm init
npm install butterfly-client

Затем создайте index.html в папке www с этим содержимым…

<!DOCTYPE html>
<html lang="en">
<body>
<div style="text-align: center">
  <canvas id="mycanvas" width="400" height="100"></canvas>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.js"></script>
<script src="node_modules/butterfly-client/lib/butterfly-client.js">
</script>
<script>
  var smoothie = new SmoothieChart({
    grid: {
      strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)',
      lineWidth: 1, millisPerLine: 250, verticalSections: 6,
    },
    labels: { fillStyle: 'rgb(60, 0, 0)' }
  });
  smoothie.streamTo(document.getElementById("mycanvas"), 1500);
  var line1 = new TimeSeries();
  var line2 = new TimeSeries();
  smoothie.addTimeSeries(line1, { 
    strokeStyle: 'rgb(0, 255, 0)', 
    fillStyle: 'rgba(0, 255, 0, 0.4)', 
    lineWidth: 3 
  });
  smoothie.addTimeSeries(line2, { 
    strokeStyle: 'rgb(255, 0, 255)', 
    fillStyle: 'rgba(255, 0, 255, 0.3)', 
    lineWidth: 3 
  });
  
  // Get data from server
  var butterflyClient = window['butterfly-client'];
  var channelClient = new butterflyClient.WebSocketChannelClient({
    url: '/ws'
  });
  channelClient.subscribe({
    channel: 'feed',
    handler: function (messageType, data) {
      console.debug('messageType=' + messageType
        + ',cpu_core_1=' + data.cpu_core_1
        + ',cpu_core_2=' + data.cpu_core_2);
      line1.append(data.timestamp * 1000, data.cpu_core_1);
      line2.append(data.timestamp * 1000, data.cpu_core_2);
    }
  });
  channelClient.connect();
</script>
</body>
</html>

Код выше…

Инициализирует Smoothie Chart (подробное объяснение см. в этом учебнике)
Использует Butterfly Client для создания экземпляра WebSocketChannelClient, который подключается к серверу и подписывается на канал feed (добавляя любые полученные данные в line1 экземпляры line2)

Вы также можете увидеть код клиента здесь.

пробовать это

В Visual Studio запустите MyStreamingApp. Это запустит сервер и откроет экземпляр браузера для http://localhost:8000/.

Вы должны увидеть что-то подобное в окне браузера…

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

Следующие шаги

Этот пример демонстрирует способность Butterfly Server .NET передавать данные в реальном времени веб-клиентам; однако Butterfly Server .NET умеет гораздо больше. См. https://butterflyserver.io для получения дополнительной информации.

Создайте потоковую диаграмму в реальном времени за 5 минут (Smoothie JS + сервер Butterfly .NET)