[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 

 

目標與好處

1. 開發者下載到項目模板以後, 用VS2019打開, 直接編譯直接運行. 不要再搞那些複雜的玩意了. 
2. 在用戶的電腦上運行 Asp.Net Core 網站, 而且自啓瀏覽器去顯示. 
3. 又或者, 向客戶提供一個特殊的瀏覽器, 知足網站的擴展權限功能. 
4. 開發者能夠像作網站同樣作客戶端程序. 
5. 不限定 Blazor , 能夠是 Mvc, 甚至是ReactJS/ArgularJS/VueJS/jQuery等都OK的. 
6. 能保證瀏覽器的版本, 不用考慮瀏覽器兼容性問題
7. Asp.Net Core在客戶端運行, 擁有客戶端PC的權限, 能夠隨意操做用戶電腦的文檔, 
8. 方便地與客戶端的各類程序進行操做, 例如按需啓動客戶端程序編輯內容, 編輯完再繼續處理.
9. 鍵盤給你們, 你們本身寫...

概念思考

1. 因爲是客戶端程序, 因此全部的資源已經打包好了. 除非要訪問服務器進行交互下載, 不然正常的功能是無延遲無網絡中斷問題的. 
2. 理論上整合了C++的部分, 是能夠整合各類C++玩意, 例如把ActiveX整合進程序的.(非整合進瀏覽器)
3. .....

 

---

 

如下整合步驟只給有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);
        }

 

 

不要用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執行. 

...