如何在ASP.NET Core Angular应用中使用SignalR Stream？

Question

I tried to use SignalR stream to send real-time data to client and then display the data on Angular component's template.

Here is my code snippet, this function is bound to a button (click) event in the template:

    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);
        }
      });
    })
  }

I can't make it to work and will appreciate it if someone can provide me a working example.

Thanks, Jack

Answer 1

index.html Code be like this :

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

.JS code be like this :

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();

You might be looking for this :

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

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

Answer 2

Add a property to your class messages: string[]; . Update your click event

 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);
    }
  });
})

}

Now set your html something like this

<ul class="heroes"> <li *ngFor="let message of messages"> </li> </ul>

Now on wards for each signalR iteration your new data will be pushed into messages array and it will update in html as well.