實作

目前專案已經實作了大部分目標

https://www.cnblogs.com/zhgangxuan/p/asp_net_core_blazor_server_side_cef_winforms_2.html

https://github.com/BlazorPlus/BlazorCefApp

補充

謝謝小編的推薦.

在這補充一下.

專案現在還未完成. 文中的做法已經包含所有新增的代碼, 開源專案還沒開始上傳, 要晚點到一個可用的階段.
目前處于一個測驗階段, 先測驗各種可能性, 看看這個想法最遠能達到哪里.
當前測驗進度是, CEF , Asp.Net Core , Console , Wpf , WinForms , ActiveX(WinForms) 這些東西都可以在單個行程里同時運行.

開發側重點:

照顧各種入門級開發人員, 讓他們可以專注于實作程式, 而不是學習瀏覽器框架如何使用. 做到開箱即用.
一如既往, 側重于Windows, 所以直接支持 Wpf/WinForms/ActiveX , 不做跨平臺. (跨平臺請到github找Chromely)
不搞框架, 而是搞成類別庫與模板. 能用一句靜態方法/全域函式解決的事情, 絕對不會搞成多個class協作的模式.

時間安排上:

不會太快, 不會全力放到這事情上. 要做的其他事情還很多.
還好, 因為這專案的主要目標還是運行Blazor server side, Blazor還在發展中, 這個方案完成后, Blazor也越來越多人用了. 飛一會兒.

模板程式:

最簡模板, 僅CEF+Asp.Net Core的部分(MVC/Blazor), 讓開發者可以有一個干凈的起點.
WPF+WinForms模板, 開發者按需要顯示WPF的Window或WinForms的Form, 或混合使用.

用Blazor server side做客戶端程式的例子 , 盡量做到看上去和其他Windows程式沒什么兩樣 :

Demo - 記事本 , 做一個很簡單的多Tab的代碼/文本編輯工具.
Demo - 注冊表編輯器 , 純粹是Demo, 用于強調這是客戶端程式
Demo - 畫圖程式 , 打開保存本地的圖片, 跨域名加載各種網路圖片做素材.
Demo - 遠程桌面管理, 仿照 tsmmc.msc 做一個出來. tsmmc.msc 有一些缺點, 想做一個自己用的界面模式.
Demo - 嵌入Word/Excel編輯(需客戶端安裝Office) , 這可能是很多人想要的. 業務系統需要打開一個對話框, 編輯完回傳給服務器.
Demo - 與服務器進行通信的例子, 包含登錄驗證, 大檔案斷點續傳, 動態下載dll并在客戶端執行.

還有一個很大型的視頻剪輯制作工具的想法, 這個是后話了. 想法太多, 往往最后是不做的.

(更后的后話, 跨平臺的版本以后肯定會做的. 但是這要觀察Xamarin做到什么程度. 也許Xamarin就會直接搞出blazor server side的跨平臺版本, 在Windows上模擬各種環境開發, 然后部署到各種平臺上)

前言

大家用過微信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專案地址 : https://github.com/chromiumembedded/cef

CEF下載地址 http://opensource.spotify.com/cefbuilds/index.html , 找到 Windows 32位的版本, 這樣可以兼容性更好

下載后, 解壓到更短的路徑, 因為后面要使用 .

進入 https://cmake.org/ , 下載 : 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] = '\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);

        }
    };
}

編譯 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);
        }