错误：如果连接未处于“已连接”状态，则无法发送数据。为什么我的 signalR 连接不起作用？

Question

我正在尝试在我的项目中实现 SignalR。这是我的 Index.cshtml 的代码，我在其中开始连接，然后从 URL 获取数据。每次我运行我的代码时，我都会收到错误消息！“错误：如果连接未处于‘已连接’状态，则无法发送数据”，并且它不像安装 SignalR 之前那样显示地图。

var connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();

connection.on("ReDesignMap", function () {
//script que retorna todas as ignições presentes na base de dados 
  //$(document).ready(function ()    {

$.get( "/api/IgnicoesAPI", function( data ) {
  $.each(data, function (i, item) {  
                //janela de informação de cada marcador 
    var estado = "em avaliação"
    var infowindow = '<div id="content" style="hight:700px; width:500px">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<div id="bodyContent">' +
                    '<p><b>Avaliação da Ocorrência:</b></p>' +
                    // iterar todas as ocorrencias para tirar delas as imagens
                    //$.each(item.ListaOcorrencias, function (f, foto) {
                    //    '<img src="https://wpde.com/resources/media/83f69602-210f-4ad1-bad0-bd5cf19470c7-large16x9_MARIONWOODSFIRE2.jpeg?1553519933510https://wpde.com/resources/media/83f69602-210f-4ad1-bad0-bd5cf19470c7-large16x9_MARIONWOODSFIRE2.jpeg?1553519933510" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width:70px; height:60px" hspace="4">' +

                    //        });


                            '<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Controlled_burn_to_restore_mountain_longleaf_pine_in_northwest_Georgia_-_170317-FS-Chattahoochee-Oconee-SB-062_%2833575304935%29.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width:70px; height:60px" hspace="4">' +
                        '<img src="https://b50ym1n8ryw31pmkr4671ui1c64-wpengine.netdna-ssl.com/wp-content/blogs.dir/11/files/2016/09/wildfire_px-1024x500.png" onclick="openModal();currentSlide(3)" class="hover-shadow" style="width:70px; height:60px" hspace="4">' +        
                    //
                    '<p></p>' +
                    '<div class="button-holder">' +
                    '<a href="#slider-image-1" class="slider-change"></a>' +
                    '<a href="#slider-image-2" class="slider-change"></a>' +
                    '<a href="#slider-image-3" class="slider-change"></a>' +
                    '</div>' +
                    '</div> ' + 
                    '<p id="estadoP"> Estado: '+ estado +'</p>'+
                    '<button id="aceite" onclick="aceite()" style="background-color:#4CAF50;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin:5px;">Aceitar</button>' +
                    '<button id="recusado" onclick="recusado()" style="background-color:#f44336;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" >Recusar</button>' +
                    '<button id="concluido" onclick="concluido()" style="background-color:#008CBA;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" > Concluído</button>' +
                    '</div>';

                //definição do icon para o marcador
   var ignicao = L.icon({
                    iconUrl: 'https://cdn3.iconfinder.com/data/icons/basicolor-signs-warnings/24/186_fire-512.png',
                    iconSize: [35, 35], // size of the icon
                });
                //colocar um marcador no mapa de acordo com a latitude e longitude fornecidas 
                var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })
                    .bindPopup(infowindow)
                    .on('click', onClick)
                    .addTo(map);
                //adiciona marador ao mapa
      $('#json map').append(marker);


            }); // fim do 'for each'
   });


 });

connection.invoke("ReDesignMap").catch(function (err) {
 return console.error(err.toString());
});

Answer 1

您必须先连接到信号器服务器。

var connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();
await connection.start();

connection.invoke("ReDesignMap").catch(function (err) {
  return console.error(err.toString());
});

// or if you don't use async/await style
var connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();
connection.start().then(() => {
  connection.invoke("ReDesignMap").catch(function (err) {
    return console.error(err.toString());
  });
}

完整示例请参见https://docs.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-3.1。

Answer 2

你必须使用 setTimeout 方法延迟

setTimeout(function () {
       connection.invoke("ReDesignMap");
}, 2000);