Блог

У меня есть следующий файл .js в моей папке wwwroot Blazor WASM, внутри папки «Скрипты» :

 var SignalrConnection; var ChatProxy;  export function ChangeWeather(temperature) {  //calling the ChangeWeather function on the signalr server  ChatProxy.invoke('change_weather', temperature); }  export function GetWeather() {  ChatProxy.invoke('get_weather'); }  export function Connect() {  var ChatServerUrl = "http://localhost:8080/";  var ChatUrl = ChatServerUrl   "signalR";  //This will hold the connection to the signalr hub   SignalrConnection = $.hubConnection(ChatUrl, {  useDefaultPath: false  });  ChatProxy = SignalrConnection.createHubProxy('ChatHub');   ChatProxy.on("NotifyUser", function (temperature) {  $('#temp').text(temperature);  });   //connecting the client to the signalr hub   SignalrConnection.start().done(function () {  GetWeather();  alert("Connected to Signalr Server");  })  .fail(function () {  alert("failed in connecting to the signalr server");  }) }  

Внутри Blazor у меня есть страница со следующей логикой кода:

 using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; using Microsoft.JSInterop.Implementation; using System.Threading.Tasks;  namespace BlazorClientJS.Pages {  public partial class Chat  {  [Inject] IJSRuntime JS { get; set; }   string name = string.Empty;  string temperature = string.Empty;  IJSObjectReference module;    protected async override Task OnInitializedAsync()  {  module = await JS.InvokeAsynclt;IJSObjectReferencegt;("import", "./Scripts/changeweather.js");  await module.InvokeVoidAsync("Connect");  }   async Task ChangeWeather(string temperature)  {  if(module != null)  {  await module.InvokeVoidAsync("ChangeWeather", temperature);  }  }  } }   

На моей странице razor у меня есть следующий простой код :

 lt;div style="text-align:center;"gt;   lt;input type="text" id="txtTemperature" @bind-value="@temperature"/gt;   lt;button id="btnChange" @onclick="@(() =gt; ChangeWeatherAsync(temperature))"gt;Change Weatherlt;/buttongt;   lt;/divgt;  lt;div style="text-align:center;"gt;   Temperature : lt;span id="temp"gt;lt;/spangt; ℃  lt;/divgt;   

Теперь, когда моя страница загружена, я вижу, что соединение работает (я вижу предупреждение, поступающее из моего Javascript, которое сообщает мне, что соединение установлено). На HTML-странице мой интервал с идентификатором «temp» инициализируется значением 0.

Теперь, когда я нажимаю кнопку «Изменить погоду», я вижу, что сообщение SignalR отправляется в концентратор (скажем, если мой ввод 1234 — я могу поймать его в соединении SignalR). Но самое странное, что на html-странице интервал #temp не меняется, он по-прежнему остается 0.

но! Если я перейду на другую страницу, а затем вернусь, я смогу увидеть значение 1234, и с этого момента каждое изменение, которое я внесу в это значение, всякий раз, когда я нажимаю кнопку «Изменить погоду», это также изменит диапазон #temp!

Что я здесь упускаю ? Почему я должен уйти, а затем вернуться, чтобы увидеть эти изменения «вживую»? Я предполагаю, что это как-то связано с Blazor/WASM.