Как использовать SignalR Stream в приложении ASP.NET Core Angular? - PullRequest
Новая
       42

Как использовать SignalR Stream в приложении ASP.NET Core Angular?

0 голосов
/ 28 ноября 2018

Я попытался использовать поток SignalR для отправки данных в реальном времени клиенту, а затем отобразить данные в шаблоне компонента Angular.

Вот мой фрагмент кода, эта функция связана с событием нажатия кнопки (click)в шаблоне: 

    getMessage(message: string) {
    this.connection = new HubConnectionBuilder().withUrl('/messageHub').build();
    const connect = this.connection;

    connect.start().then(function () {
      connect.stream('SendMessage', message).subscribe({
        next: (item) => {
          console.log(item);   // <= this works: I can get the data from server
          let li = document.createElement("li"); // <= works
          li.textContent = item; // <= works
          document.getElementById("ulId").appendChild(li); // <= does not work, cannot get dom element by Id....
        },
        complete: () => {
          console.log("finished.");
        },
        error: (err) => {
          console.log(err);
        }
      });
    })
  }

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

Спасибо, Джек

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Добавьте недвижимость к вашему классу messages: string[];.Обновите событие клика 

 getMessage(message: string) {
this.connection = new HubConnectionBuilder().withUrl('/messageHub').build();
const connect = this.connection;

connect.start().then(function () {
  connect.stream('SendMessage', message).subscribe({
    next: (item) => {
      this.messages.push(item);
    },
    complete: () => {
      console.log("finished.");
    },
    error: (err) => {
      console.log(err);
    }
  });
})

}

Теперь настройте свой html примерно такновые данные будут помещены в массив сообщений, а также обновятся в формате html.

0 голосов
/ 28 ноября 2018

index.html Код будет таким: 

<div class="container">
    <input type="button" id="startStreaming" value="Send" />
    <ul id="discussion"></ul>
</div>

.JS Код будет таким: 

var connection = new signalR.HubConnectionBuilder()
                .withUrl("/streaming")
                .build();
    var button = document.getElementById("startStreaming");
    function startStreaming(){
        connection.stream("StartStreaming").subscribe({
            next: onStreamReceived,
            err: function(err){
                console.log(err);
            },
            complete: function(){
                console.log("finished streaming");
            }
        });
    }
    connection.on("streamStarted", function(){
        startStreaming();
    });
    button.addEventListener("click", event => {
        connection.invoke("sendStreamInit");
    });
    function onStreamReceived(data){
        console.log("received: " + data);
        var liElement = document.createElement('li');
        liElement.innerHTML = '<strong>' + "received" + '</strong>:&nbsp;&nbsp;' + data;
        document.getElementById('discussion').appendChild(liElement);
    }
    connection.start();

Возможно, вы ищете это:

https://radu -matei.com / blog / signalr-core / # streaming

https://github.com/radu-matei/signalr-samples/blob/master/streaming/web/wwwroot/index.html

...