我正在尝试在我的项目中实现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());
});
您必须先连接到信令服务器。
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://learn.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-3.1。
您必须使用方法延迟setTimeout
setTimeout(function () {
connection.invoke("ReDesignMap");
}, 2000);