[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專案地址 : 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執行.
...