I built a Blazor tool station and bought the domain name for 10 years at a time!

I built a Blazor tool station and bought the domain name for 10 years at a time!

The website is developed using Blazor Wasm. The website content includes two types: online tools and online Mini games. It is mainly to experience whether Web Assembly is good or not.

最后更新 6/25/2023 1:54 PM
沙漠尽头的狼
预计阅读 10 分钟
分类
Blazor
标签
.NET C# Blazor Blazor WebAssembly Client

Hello everyone, I am a wolf at the end of the desert.

Dotnet9 上线在线小工具和小游戏后,服务器的压力感觉挺大的,打开25个页面,内存占用170MB左右,CPU保持在60~70%,看来Server真不适合搞这类交互较多的程序(服务器配置:2核4G内存),所以站长加急上线 Blazor Wasm 版本网站,便于大家直观对比了解两种模式的区别,下面请看我细说。

1. About launching the Dotnet toolbox

为了后面工具和游戏的扩展,站长把去年买的域名 dotnetools.com 用上了,该域名一次性买了10年(不用担心网站过几年消失,当然不排除意外,比如站长没钱续费服务器。。。),并赶紧在1天之内开发并部署了一个 Blazor Wasm 版本网站,把在 Dotnet9 已经上线的在线小工具和游戏同步搬过来了,大家可以体验下:https://dotnetools.com:

2. Dotnet Toolkit website open source

The source code organization structure of the website is as follows. There is only one project. In order to go online quickly, the code is relatively clear:

The link to the source code of the website is at the end of the text. Don't ask me for the source code address again...

3. Why is Blazor Server not suitable for developing web applications such as online tools or games?

Blazor Server is not suitable for developing website applications such as online tools or games, mainly because of its working principles and characteristics that lead to some limitations and inapplicability.

  1. Real-time limitations: Blazor Server uses SignalR technology to achieve real-time communication with the server. However, since all UI updates need to be completed through the server, users may feel significant latency when network latency is high. This is unacceptable for applications such as online tools or games that require real-time response.

  2. Server resource consumption: Blazor Server works by deploying the entire application on the server, and each user consumes a connection and some server resources. For applications such as online tools or games that require a large number of users to be online at the same time, this can lead to excessive consumption of server resources, making it difficult to expand and maintain.

  3. Client-side performance limitations: Blazor Server's UI rendering is done on the server, and then the updated UI is pushed to the client through SignalR. This means that the performance of the client has a great impact on the response speed and user experience of the application. For some complex online tools or games, the performance of the client may not meet the needs.

To sum up, Blazor Server is more suitable for developing website applications that have low real-time requirements, small user numbers, and low server resource consumption requirements. For applications such as online tools or games that require real-time and a large number of users online at the same time, Blazor WebAssembly may be more suitable because it can deploy the entire application to the client, reducing the burden on the server, and providing a better user experience.

4. Reasons to choose Blazor Wasm Development Tool Station

Dotnet9 网站选择Blazor Server依然不变,因为博客类网站需要SEO,需要搜索引擎提供流量。

Dotnet工具箱 主要关注的是在线小工具和小游戏,所以选择Blazor Wasm,当谈到选择Blazor WebAssembly时,有几个令人兴奋的优势值得一提:

  1. Immediate performance: Blazor WebAssembly leverages WebAssembly (Wasm) technology to compile C#code into an efficient binary format that can be run directly in the browser. This means that you can use applications written in C#on the client side without having to convert them to JavaScript. This ability to run directly gives Blazor WebAssembly performance close to native applications, providing users with faster loading speeds and a smoother user experience.

  2. Cross-platform: Blazor WebAssembly is a cross-platform solution that runs on a variety of operating systems and devices, including Windows, Mac, Linux and mobile devices. This means you can use the same code base to build applications that work on different platforms, reducing development and maintenance efforts.

  3. Development efficiency: Blazor WebAssembly uses the C#language and the. NET framework, a widely used development tool and ecosystem. If you are already familiar with C#and. NET, you can start developing with Blazor WebAssembly immediately without having to learn a new language or framework. This development efficiency can greatly speed up project development and reduce the learning curve for developers.

  4. Powerful ecosystem: Blazor WebAssembly is built on the. NET ecosystem, which means you can leverage the rich features of. NET and third-party libraries to build powerful applications. You can use various tools and technologies from. NET, such as Entity Framework, ASP.NET Core, etc., to simplify the development process and improve application quality and maintainability.

  5. Security: Blazor WebAssembly applications run on the client side, but they are executed in a sandbox environment and are more secure than native applications. This means you can perform sensitive operations on the client without worrying about security issues. In addition, by writing code in C#, you can leverage the security features of. NET to protect applications from common security vulnerabilities and attacks.

To sum up, Blazor WebAssembly has exciting advantages such as instant performance, cross-platform, development efficiency, strong ecosystem and security. These advantages make Blazor WebAssembly an exciting technology choice, providing developers with a new way to build high-performance, cross-platform Web applications.

** Focus **: WASM is the future of Blazor.

5. Detailed comparison of Blazor Server and Blazor Wasm

Dotnet9 网站选择Blazor Server,可在在线工具和在线游戏页面体验Server,比如 扫雷游戏,在游戏页面也可选择跳转到 Dotnet工具箱扫雷游戏 页面,这是Wasm版本,可通过浏览器F12打开开发者工具查看网络请求情况,下面简单说说查看步骤。

Dotnet9 页面的 扫雷游戏,点击工具栏可以跳转到 Dotnet工具箱扫雷游戏 页面:

Dotnet9 页面的 扫雷游戏页面,看网络请求,几乎一直在请求,简直令人发指,丧心病狂:

Dotnet工具箱扫雷游戏 页面,看网络请求,只有网页的图片请求,其他请求就没有,这就是客户端的魅力(WebAssembly):

Regarding Blazor, or Blazor Server and Blazor Wasm, I believe many people have only heard of it and don't know much about the related concepts. Here, by asking about GPT, the answers are similar to those in the previous paragraph. Here, we will compare and list them for everyone to popularize it:

Blazor is an open source framework for building Web applications that allows client-side code to be written using C#and. NET. Blazor has two models: Blazor Server and Blazor WebAssembly (Wasm). Here is a detailed comparison of the two models:

  1. Architecture:
  • Blazor Server: The Blazor Server mode renders the application's UI on the server, and then pushes UI updates to the client through SignalR. Clients receive UI updates and process user interactions by establishing a persistent connection with the server.
  • Blazor WebAssembly: The Blazor Wasm pattern compiles the entire application's code and dependencies into WebAssembly format and runs it on the client. Applications run independently on the client and do not require a persistent connection to the server.
  1. Performance:
  • Blazor Server: The performance of the Blazor Server model is affected by the server and network. Since UI rendering occurs on the server, large applications or high concurrency scenarios may cause a large load on the server.
  • Blazor WebAssembly: The performance of the Blazor Wasm model is mainly affected by client devices. Because the application runs on the client, you can get better response speeds and lower latency.
  1. Reliability:
  • Blazor Server: The Blazor Server model relies on the stability and availability of the server. If the server fails or the network connection is interrupted, the application will not work properly.
  • Blazor WebAssembly: The Blazor Wasm pattern runs independently on the client and does not rely on the stability and availability of the server. Applications can continue to run even if the server is unavailable.
  1. Development experience:
  • Blazor Server: The development experience of the Blazor Server model is similar to traditional server-side development, and can use the full functionality and ecosystem of. NET. However, since the UI is rendered on the server, communication delays with the server need to be considered when processing user interactions.
  • Blazor WebAssembly: The development experience of the Blazor Wasm model is similar to client-side development, with most features of C#and. NET available, but some features may be limited. Because the application runs on the client, it can provide a user experience that is closer to that of a native application.

In general, Blazor Server is suitable for applications that require rapid development and deployment, while Blazor WebAssembly is suitable for applications that require better performance and independent operation. Which model you choose depends on the needs and priorities of the application.

6. last words

In the previous two articles, some netizens suggested that webmasters use Wasm mode. Webmasters have successfully deployed it online. Please leave a message if you have any tool needs. Webmasters will consider adding them when they have free time. Of course, I hope that everyone can use PR tools and games, only developed by Blazor WASM.

I have shared it here today, thank you very much for reading.

  • Website address: dotnetools.com/
  • Website source code: github.com/dotnet9/Dotnet9
  • .NET版本: .NET 8.0.0-preview.5.23280.8
  • WeChat technology group: To add webmaster WeChat (codewf), you must note the two words "join the group"
  • QQ technology group: 771992300
Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 11/6/2024

Why is my blog site back in Blazor?

The blog website has gone through hardships in development. It has tried nearly 10 versions such as MVC, Vue, and Go. Now it has returned to Blazor and adopts static SSR. The speed has skyrocketed and it has been successfully launched.

继续阅读
同分类 / 同标签 2/29/2024

Data display can also be done in Winform

In the process of developing winform, data display functions are often needed. I have been using the gridcontrol before. Today, I want to use an example to introduce to you how to use the table component in ant design blazor hybrid to display data.

继续阅读
同分类 / 同标签 2/29/2024

Can Winform's interface become better?

A few days ago, I introduced to you the use of blazor hybrid in winform, and I also said that with blazor's ui, our winform program design can be more beautiful. Next, I want to use an example of drawing in winform blazor hybrid to illustrate it, hoping to be helpful to you.

继续阅读