[Asp.Net Core] Blazor Server Side 扩展用途 – 配合CEF来制作客户端浏览器软件

前言

大家用过微信pc端吧? 这是用浏览器做的.

用过visual studio code吧? 也是用浏览器做的.

听说, 暴雪客户端也包含浏览器核心??

在客户端启动一个浏览器, 并不是什么难事了.

现在既然用开了blazor server side技术 ,

那么当然是也想用blazor server side来做客户端软件了.

没错, 的确是blazor server side技术. 客户端也可以使用这技术的.

虽然现在有很多各种各样用于 dotnet 的 cef 框架, 但是大部分还没有一步到位.

这次要做的是, 打算弄一个开源项目, 做成 dotnet 的 dll , 生成项目模板, 让开发者直接用上.

(本教程包含 c++部分, 但后续的开源项目, 会去掉c++部分, 只剩下一个cppinterop.dll 和项目模板)

开发者难度:

当这个模板做好之后, 对于初步用途来说, 没有难度. 开发者可以直接复制模板, 然后在模板上加入自己的代码便可.

和一般的cef c#框架不一样, 这边不是针对浏览器技术, 而是针对开发者最常用的几个功能去考虑, 直接做好简单易用的api

目标与好处

开发者下载到项目模板之后, 用vs2019打开, 直接编译直接运行. 不要再搞那些复杂的玩意了.
在用户的电脑上运行 asp.net core 网站, 并且自启浏览器去显示.
又或者, 向客户提供一个特殊的浏览器, 满足网站的扩展权限功能.
开发者可以像做网站一样做客户端程序.
不限定 blazor , 可以是 mvc, 甚至是reactjs/argularjs/vuejs/jquery等都ok的.
能保证浏览器的版本, 不用考虑浏览器兼容性问题
asp.net core在客户端运行, 拥有客户端pc的权限, 可以随意操作用户电脑的文档,
方便地与客户端的各种程序进行操作, 例如按需启动客户端程序编辑内容, 编辑完再继续处理.
键盘给大家, 大家自己写…

概念思考

由于是客户端程序, 所以所有的资源已经打包好了. 除非要访问服务器进行交互下载, 否则正常的功能是无延迟无网络中断问题的.
理论上整合了c++的部分, 是可以整合各种c++玩意, 例如把activex整合进程序的.(非整合进浏览器)
…..

以下整合步骤只给有c++经验的人士观看. 其他人等这个项目的成品出来便可.

整合步骤

cef项目地址 :

cef下载地址 , 找到 windows 32位的版本, 这样可以兼容性更好

下载后, 解压到更短的路径, 因为后面要使用 .

进入 , 下载 : cmake , 然后运行, 输入目录, 与输出目录(生成 vs2019 solution).

配置:

提示有错吗? 不管. 直接点多一次 generate 便可.

注意, visual studio 2019 必须安装 c++ 和 c++ cli

打开工程, 配置编译. 我们只需编译这些玩意: (或者把那几个不用的工程删掉算了)

先编译一次, 应该会通过.

在下载的文件里面, 找到这4个文件 , c++不好写, 但是我们可以在样板工程上直接改.

复制到 libcef_dll_wrapper 工程目录下, 并且添加现有项 :

修改 simple_app.cc , 在16行插入

std::string _surl;
std::string getstartupurl()
{
    return _surl;
}


void setstartupurl(lptstr url)
{
    char chars[2048];
    int cch = widechartomultibyte(936, 0, url, -1, 0, 0, null, null);
    widechartomultibyte(936, 0, url, -1, chars, cch, null, null);
    _surl = chars;
}

int runcefapp(lptstr cmdline)
{
    hinstance hinst = (hinstance)getmodulehandle(null);
    wwinmain(hinst, null, cmdline, 0);
    return 0;
}

找到 command_line->getswitchvalue(“url”) 这一行, 把启动url 换掉 , 这样后面 seturl 就有效果啦.

编译, 通过.

cppinterop工程

新增一个c++ cli工程 (注意, cli没打错字, cli和clr概念不一样, 请自行搜索)

项目名称 cppinterop 好了.

添加引用

添加 libcef.lib , debug的用 cef32\debug\libcef.lib , release的用 cef32\release\libcef.lib

修改 cppinterop.cpp

#include "pch.h"

#include <windows.h>

using namespace system;

void setstartupurl(lptstr url);
int runcefapp(lptstr cmdline);

wchar cscmd[4096];
wchar csurl[4096];

namespace cppinterop {
    public ref class cpp
    {
    public:
        static void seturl(string^ url)
        {
            for (int i = 0; i < url->length; i++)
                csurl[i] = url[i];
            csurl[url->length] = '#include "pch.h"
#include <windows.h>
using namespace system;
void setstartupurl(lptstr url);
int runcefapp(lptstr cmdline);
wchar cscmd[4096];
wchar csurl[4096];
namespace cppinterop {
public ref class cpp
{
public:
static void seturl(string^ url)
{
for (int i = 0; i < url->length; i++)
csurl[i] = url[i];
csurl[url->length] = '\0';
setstartupurl(csurl);
}
static int run(string^ cmdline)
{
for (int i = 0; i < cmdline->length; i++)
cscmd[i] = cmdline[i];
cscmd[cmdline->length] = '\0';
return runcefapp(cscmd);
}
};
}';

            setstartupurl(csurl);
        }
        static int run(string^ cmdline)
        {
            for (int i = 0; i < cmdline->length; i++)
                cscmd[i] = cmdline[i];
            cscmd[cmdline->length] = '#include "pch.h"
#include <windows.h>
using namespace system;
void setstartupurl(lptstr url);
int runcefapp(lptstr cmdline);
wchar cscmd[4096];
wchar csurl[4096];
namespace cppinterop {
public ref class cpp
{
public:
static void seturl(string^ url)
{
for (int i = 0; i < url->length; i++)
csurl[i] = url[i];
csurl[url->length] = '\0';
setstartupurl(csurl);
}
static int run(string^ cmdline)
{
for (int i = 0; i < cmdline->length; i++)
cscmd[i] = cmdline[i];
cscmd[cmdline->length] = '\0';
return runcefapp(cscmd);
}
};
}';

            return runcefapp(cscmd);

        }
    };
}

编译 cppinterop工程. 通过.

自此, c++部分已经完结.

blazorapp1

新建dotnetcore blazor server 工程 , 添加对 cppinterop 的引用,

无论是 debug或release , 都修改为 x86架构

程序入口改为:

        [stathread]
        public static void main(string[] args)
        {
            string cmdargs = string.join(" ", args);

            if (cmdargs.contains("--type="))
            {
                cppinterop.cpp.run(cmdargs);
                return;
            }

            system.threading.cancellationtokensource cts = new system.threading.cancellationtokensource();
            var tsk = createhostbuilder(args).build().runasync(cts.token);
            cppinterop.cpp.seturl("https://localhost:5001");
            cppinterop.cpp.run(cmdargs);
            cts.cancel();
            tsk.wait(3000);
        }

不要用iis启动了, 必须用exe方式启动:

把 d:\temp\cef32\resources 和 d:\temp\cef32\debug 复制到输出文件夹

启动项目:

edge浏览器正常, 但是自己启动的浏览器无法启动子进程渲染器, 原因是 com thread model 有问题. 估计是debug模式的问题.

解决方法有两种, 一种是使用参数 –single-process 启动 :

这种模式好啊. 只有1个进程.

另外一种模式是 , 编译为release 再执行 :

去掉 –single-process的效果:

这个和一般的浏览器的行为一致了.

显示控制台, 有助于查看调试信息.

如果不想控制台弹出来, 可以把工程的属性改掉. 从 ‘控制台应用程序’ 改成 ‘windows应用程序’

结尾

目前先记录到这里.

后面还有一大堆要和浏览器进行交互的事情.

对于开发者来说, 目前考虑有以下需求需要解决:

1 – c# 代码能控制窗口的大小 , 最大化, 最小化等等. 例如启动时固定大小, 登录后, 自动最大化.

2 – c# 代码可以自己实现一些下载的功能,

3 – 可以自定义方式弹出devtools,

4 – 如何另外弹出winforms, wpf界面.

5 – 如何与真正的服务器进行通信, 如何下载服务器的dll执行.

…

转自：https://www.cnblogs.com/zhgangxuan/p/blazor_server_side_cef_browser_01.html

黄山市民网：https://www.huangshanshimin.com/

前言