2

I am following this Blazor Server Counter Increment example.

The specific code example is below.

I have three questions:

1 - Does the call to IncrementCount after the button is clicked happen via SignalR?

2 - Does the execution of IncrementCount happen on the Server? (as opposed to in the browser)

3 - If it is via SignalR - How can I see "the call" (the request) being made using Chrome Developer tools? I have looked at the Network Tab and cant not see any activity. See the screengrab:

enter image description here

Code example:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
fourbeatcoder
  • 1,159
  • 3
  • 13
  • 21
  • 1
    Depends on if you chose Blazor server-side or Blazor webassembly in the wizard – Flores Dec 10 '19 at 08:54
  • @Flores thank you, but I am talking about Blazor Server as mentioned in the title of this question and in the body also. – fourbeatcoder Dec 10 '19 at 08:56
  • Then the answer to 1 & 2 is: Yes. – Flores Dec 10 '19 at 08:57
  • For the signalr part: https://stackoverflow.com/questions/29771676/cant-see-signalr-traffic-in-browser-development-tools – Flores Dec 10 '19 at 08:59
  • In chrome developer tools under network like you have, there should be a 101 switching protocols to websocket. You made need to reload the page. Click on that record and then near the top select "Messages". "Headers" is selected by default. It's a binary message so you won't get much out of it but you'll at least be able to see the traffic. – Kevin Jun 19 '20 at 20:19
  • This question has a good answer for question 3. https://stackoverflow.com/questions/5751495/debugging-websocket-in-google-chrome – Kevin Jun 19 '20 at 20:22

2 Answers2

5

Using Blazor Server

1 - Yes, it happen via SignalR
2 - Yes, it run on the Server
3 - SignalR use a websoket per default, if you want to see Http request in your browser dev tool, configure SignalR transport to use long pooling
Or using firefox, you can use Firefox’s New WebSocket Inspecto

Using Blazor WASM

1 - No, it's executed on browser
2 - No, it's executed on browser
3 - No request, but you can debug using Visual Studio breakpoint since 3.1-preview4

agua from mars
  • 16,428
  • 4
  • 61
  • 70
  • For point 3 - i tried adding the following. But it doesnt work, cant see anything in chrome dev tools: ` endpoints.MapBlazorHub(options => { options.Transports = HttpTransportType.WebSockets | HttpTransportType.LongPolling; });` Any other ideas how to see this? Or have i done something wrong? – fourbeatcoder Dec 10 '19 at 11:41
  • 1
    remove `HttpTransportType.WebSockets` – agua from mars Dec 10 '19 at 12:58
  • @fourbeatcoder new update for firefox with WebSocket inspector – agua from mars Dec 12 '19 at 20:46
0

For part 3, on chrome 100.0.4896.75, just select "Network -> All"enter image description here

Steef
  • 569
  • 5
  • 21