由于 Blazor-WebAssembly 是在浏览器中运行的，通常不需要执行服务器代码，只要有个“窝”能托管并提供相关文件的下载即可。所以，当你有一个现成的 Blazor wasm 项目，没必要用其他语言重写，或者你不想用 ASP.NET Core 来托管（有些大材小用了），就可以试试用 node.js 来托管。

要实现这个不需要掌握什么新的知识，所以咱们直接开工干活。

首先，咱们做好 Blazor wasm 应用的开发。

dotnet new blazorwasm-empty -n Demo -o .

blazorwasm-empty 模板创建的项目只带一些基本代码和 Hello World，没有演示代码——无Counter无假天气预报。

然后，Program.cs 文件也可以精简一下。

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");

await builder.Build().RunAsync();

#app 是CSS筛选器，即选择 id 为 app 的元素来呈现 Razor 组件。这个相信各位都懂。

为了更好地演示，咱们把 Index 组件改一下，加一点交互功能，以便后面可以验证 Blazor 是否正常启动。

@page "/"

<h1>Hello, world!</h1>

<button @onclick="ClickMe">点这里中大奖</button>

<div>@Message</div>

@code{

    private string? Message{get;set;}

    void ClickMe()

    {

        int xx = Random.Shared.Next(100, 700);

        Message = $"恭喜你获得{xx}万假钞！";

    }

}

这个不复杂，就是点击一下按钮，然后生成个随机整数，并修改 Message 属性。处理 click 事件要注意加上 @，如果是 onclick 你只能用 js 去写，要想用 C# 来写代码，就得用 @onclick。

接着，试执行一下，保证没有错误，能正常运行。

现在，你打开 \bin\Debug\net7.0\wwwroot 目录，里面你看到有个 _framework 目录，这个目录就是我们要的。不过，这个体积太大，不适合。咱们将项目发布一下，这样体积会变小很多。

我们不需要 wwwroot 目录下的东东，把整个目录“咔嚓”掉（这里指的是项目中的 wwwroot 目录，不是输出目录的）。为了防止重新生成时有文件错误（一般不会），可以把 obj 和 bin 目录也删除。

执行发布命令。

dotnet publish -c PublishRelease

-c 参数也可以用 Release，差别不大。

另外新建一个目录，路径随便，不要有非英文字符（防止出错），比如这里我命名为 Server。把刚才发布的整个 _framework 目录复制到 Server 目录中。现在你可以关闭 Blazor 项目了，没它什么事了。

在 Server 目录下新建一个文件，叫 index.html。

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8"/>

        <title>高级示例</title>

    </head>

    <body>

        <div id="app">正在加载……</div>

        <script src="_framework/blazor.webassembly.js"></script>

    </body>

</html>

这里注意两处：

1、要有一个 id 为 app 的元素，它用来呈现组件。

2、<script> 要引用 blazor.webassembly.js 文件。

在 Server 目录下再新建一个文件，名为 app.js。这个用来写服务器主程序（js 代码）。

const url = require("node:url");

const path = require("node:path");

const http = require("node:http");

const fs = require("node:fs");

// 主机

const host = 'localhost';

// 端口

const port = 6748;

// MIME 映射

function getFileMap(fileExt)

{

    switch(fileExt)

    {

        case ".js":

        case ".mjs":

            return "text/javascript";

        case ".json":

            return "application/json";

        case ".htm":

        case ".html":

            return "text/html";

        case ".css":

            return "text/css";

        case ".jpg":

        case ".jpeg":

            return "image/jpeg";

        // 其他的自己看情况添加

        default:

            // 其余的如.dll、.gz等，就是二进制文件

            return "application/octet-stream";

    }

}

http.createServer((request, response)=>

{

    // 获取请求路径

    let reqPath = url.parse(request.url).pathname;

    // 去掉路径开头的“/”

    let fileName = reqPath.substring(1);

    // 如果空白，默认文件名 index.html

    if(fileName.length === 0)

    {

        fileName = "index.html";

    }

    // 读取文件内容

    fs.readFile(fileName, (err, data)=>{

        // 如果出错

        if(err)

        {

            // 直接回个404

            response.writeHead(404, {"Content-Type": "text/html"});

        }

        else

        {

            // 获取文件扩展名，以决定MIME类型

            let ext = path.extname(fileName);

            let mimeType = getFileMap(ext.toLowerCase());

            // 发送HTTP头

            response.writeHead(200, {"Content-Type": mimeType});

            // 发送正文

            response.write(data);

        }

        // 这一行必须，结束响应消息

        response.end();

    });

})

.listen(port, host);

console.log(`服务器：${host}:${port}`);

运行它，执行：node app.js。接着在浏览器中输入地址：http://localhost:6748。再验证 Blazor 应用程序是否成功启动。

如果看到随机数能正确生成，说明运行成功了。

【ASP.NET Core】在node.js上托管Blazor WebAssembly应用的更多相关文章

  1. 腾讯云-ASP.NET Core+Mysql+Jexus+CDN上云实践

    腾讯云-ASP.NET Core+Mysql+Jexus+CDN上云实践.md 开通腾讯云服务器和Mysql 知识点: ASP.NET Core和 Entity Framework Core的使用 L ...

  2. ASP.NET Core MVC 在linux上的创建及发布

    前言 ASP.NET core转眼都发布半月多了,社区最近也是非常活跃,虽然最近从事python工作,但也一直对.NET念念不忘,看过了园区大神们搭建的Asp.net core项目之后,自己也是跃跃欲 ...

  3. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  4. ASP.NET Core 中的文件上传

    ASP.NET Core上传文件 ASP.NET Core使用IFormFile来读取上传的文件内容,然后将数据写入到磁盘或其它存储空间. 添加FileUpload模型,用来接收上传的文件内容. pu ...

  5. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  6. 深入浅出Node.js(上)

    (一):什么是Node.js Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹.从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟 ...

  7. node.js上除了Express还有哪些好用的web开发框架

    老司机都有体会, 开发本身没有多难, 最纠结其实是最初的技术和框架选型, 本没有绝对的好坏之分, 可一旦选择了不适合于自己业务场景的框架, 将来木已成舟后开发和维护成本都很高, 等发现不合适的时候更换 ...

  8. ASP.Net Core项目在Mac上使用Entity Framework Core 2.0进行迁移可能会遇到的一个问题.

    在ASP.Net Core 2.0的项目里, 我使用Entity Framework Core 2.0 作为ORM. 有人习惯把数据库的连接字符串写在appSettings.json里面, 有的习惯写 ...

  9. ASP.NET CORE 之 在IIS上部署MVC项目

    与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,IIS则是作为反向代理的角色转发请求到Kestrel ...

  10. 【译】Asp.net core应用在 Kubernetes上内存使用率过高问题分析

    原文:https://blog.markvincze.com/troubleshooting-high-memory-usage-with-asp-net-core-on-kubernetes/ ps ...

随机推荐

  1. spring的作用

    Spring能有效地组织你的中间层对象,无论你是否选择使用了EJB.如果你仅仅使用了Struts或其他的包含了J2EE特有API的framework,你会发现Spring关注了遗留下的问题.Sprin ...

  2. 【python】python3.7与3.9共存，两个3版本同时存在（平时用vscode敲代码）pip复制

    1.按照安装python及环境配置 - 人间寒梅 - 博客园 (cnblogs.com),将3.9装好. 2.在官网下载3.7的对应文件 3.下载后运行,并自定义下载且选中添加到path.,自己为py ...

  3. php后端遇到的问题

    1.用文件记录日志,会有并发问题

  4. Java 获取【.jar】文件里的资源文件

    获取jar文件里的图片等文件时,会发现使用相对路径不行了. 因为打包后的jar文件,在获取路径时稍有不同. 下面是获取jar文件中图片的例子: 1 Resource[] resources = new ...

  5. 独显坏掉，openSUSE启动黑屏卡死

    我的Dell Vostro 1440配置双显卡,独显是 AMD 的.可能是因为散热的问题,独显烧坏了.原先每次启动都有 openSUSE 的圆形启动动画,显卡烧坏后,启动动画变成三个点. 装 Debi ...

  6. win10 系统 腾讯云服务器 部署网站 并进行访问

    1.首先需要一个服务器 我是用的Windows系统 我用的是腾讯云的服务器(因为便宜) 然后给服务器重置密码 然后用重置后的密码 用户名 用远程桌面连接登录试试 远程桌面连接成功 然后回到服务器网站 ...

  7. Liunx mosquitto卸载

    1.查询文件: whereis mosquitto whereis mosquitto_sub 2.删除查询到的文件,命令: rm -rf /etc/mosquitto rm -f /usr/loca ...

  8. 20200924--图像相似度(奥赛一本通P92 5多维数组)

    给出两幅相同大小的黑白图像(用0-1矩阵)表示,求它们的相似度.说明:若两幅图像在相同位置上的像素点颜色相同,则称它们在该位置具有相同的像素点.两幅图像的相似度定义为相同像素点数占总像素点数的百分比. ...

  9. 132pattern-Leetcode456

    QUESTION: To search for a subsequence (s1,s2,s3) such that s1 < s3 < s2. INTUITION: Suppose we ...

  10. js获取当前日期的前七天，月份+日（数组）

    1.定义一个空对象. let dayArr = []: 2.时间格式化  function formatterDate(date,fmt){     let nowDate = {       yyy ...