[Asp.Net Core] Blazor Server Side 擴展用途 - 配合CEF來制作帶瀏覽器核心的客戶端軟件

本文轉載自查看原文 2020-04-28 19:38 3600 Blazor Server Side/ CEF/ Blazor/ Asp.Net

實現

目前項目已經實現了大部分目標

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