C# 如何在ASP.NET核心应用程序中使用信号器流？

我尝试使用信号器流向客户端发送实时数据，然后将数据显示在角度组件的模板上

这是我的代码片段，此函数绑定到模板中的按钮（单击）事件：

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

getMessage（消息：字符串）{
this.connection=new-HubConnectionBuilder（）.withUrl（'/messageHub'）.build（）；
const connect=this.connection；
connect.start（）.then（函数（）{
connect.stream（'SendMessage'，message.）。订阅({
下一步：（项目）=>{
console.log（item）；//
index.html
代码如下：

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

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

您可能正在寻找以下内容：


向类添加属性
消息：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设置如下





现在，对于每个signalR迭代，您的新数据将被推送到messages数组中，并以html格式更新。
这里不要创建新的li元素，而是尝试将li与*ngFor一起使用，并保持消息/项目的数组，每一次迭代只需推送到数组中。Angular将为您创建新的li元素。这里的问题是，我无法不将项值传递给DOM元素。例如：如果用this.values.add（项）替换li.textContent=item；则可以使用*ngFor将值绑定到li元素。但是，this.values.add（项）；声明在此无效。不知道为什么。感谢您的回答。我以前阅读过这些链接，并使其在非Angular应用程序中工作。现在，我只想在Angular应用程序中使用TypeScript和数据绑定来实现它，例如startI以前尝试过。它给出了一条错误消息：连接断开，错误为'TypeError:canno无法读取未定义的属性“messages”。为什么我们不能使用此。messages.push（item）；语句？这适用于非角度应用程序，为什么不适用于角度应用程序？这里找到了一个很好的示例。