question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using bind causes massive traffic in server side blazor

See original GitHub issue

Im working on a small simple drawing tool in server side blazor using the latest template in VS2019 .net core 3-preview. When I was stress testing my app, adding 500 elements it became extremely unresponsive. When inspecting the websocket connection i saw lots of packages over 35kb while moving the mouse. This does not make sense to me, because im not changing anything. Anyways after some experiments I have located something suspecious causing this. Using bind on an element like this: 1)<input type ="text" bind="@Text"/> is completely diffrent then this: 2)<input type ="text" value="@Text" onchange="@(e=>e.Value)"/>

The first one is resending entire page over websocket each mouse move (which seems to be at least 10 times per second) The second one is resending entire page over websocket only when I change the text.

1)This one using bind sends 35kb packages

@page "/"
<div onmousemove="@(e=>MouseMove(e))">
    @for(var i = 0; i < 1000; i++)
    {
        <input type ="text" bind="@Text"/>
    }
</div>

@functions{
    public string Text { get; set; }
    public void MouseMove(UIMouseEventArgs e)
    {

    }
}

This one works as expected with regards to data sent over websocket

@page "/"
<div onmousemove="@(e=>MouseMove(e))">
    @for(var i = 0; i < 1000; i++)
    {
        <input type ="text" value="@Text" onchange="@(e=>OnTextChange(e))"/>
    }
</div>

@functions{
    public string Text { get; set; }
    public void MouseMove(UIMouseEventArgs e)
    {

    }
    public void OnTextChange(UIChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
jsandvcommented, Apr 22, 2020

@ChristianWeyer yes im seeing this in latest bits.

Current steps to reproduce is having either section 1 or section 2 commented in. Run in any valid page.

`

@page "/counter"
Section 2: Not optimal, entire page is sent each mouse move
<div @onmousemove="e=>MouseMove(e)">
    @for (var i = 0; i < 1000; i++)
    {
        <input type="text" @bind="Text" />
    }
</div>

@*Section 2: Optimal, only few bytes transferred each mouse move
<div @onmousemove="e=>MouseMove(e)">
    @for (var i = 0; i < 1000; i++)
    {
        <input type="text" value="@Text" @onchange="e=>OnTextChange(e)" />
    }
</div>*@

@code {
    public string Text { get; set; } = "s";
    public void MouseMove(MouseEventArgs e)
    {

    }
    public void OnTextChange(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

`

0reactions
TanayParikhcommented, Oct 19, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using bind causes massive traffic in server side blazor
Im working on a small simple drawing tool in server side blazor using the latest template in VS2019 .net core 3-preview.
Read more >
ASP.NET Core Blazor performance best practices
Tips for increasing performance in ASP.NET Core Blazor apps and avoiding common performance problems.
Read more >
Is Blazor server side bind-value secure?
I'm starting worried, that client can in some way (with some tool) edit the communication message and set for example not "Age" but...
Read more >
Blazor Server RadGrid: huge websocket data volume issue
- I have sniffed packets on network and i have seen a very huge amount of data in websocket traffic when i click...
Read more >
Intro to Blazor Server Side - Includes SQL Data Access and ...
Blazor Server Side is an ASP.NET Core application type that uses SignalR to connect the client to the server. This allows for a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found