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

 

補充

謝謝小編的推薦. 

在這補充一下. 

  • 項目現在還未完成.  文中的做法已經包含所有新增的代碼, 開源項目還沒開始上傳, 要晚點到一個可用的階段. 
  • 目前處于一個測試階段, 先測試各種可能性, 看看這個想法最遠能達到哪里. 
  • 當前測試進度是, 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 

 

目標與好處

  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執行. 

...

 

posted on 2020-04-28 19:38  軒軒之家  閱讀(...)  評論(...編輯  收藏

導航

統計

全民捕鱼游戏怎么玩