一直以來都是一個桌面端程序狗，某天突發奇想，想用網頁實現一個客戶端，于是開始了electron+vue+asp.netcore的探尋之路，這條道路很坎坷主要是css讓我頭疼不已（當然我們并沒有放棄使用wpf，我是一個wpf老手，最近項目使用到GRPC特此分享一下入坑經驗）。

??? ??我們總是依賴于使用Axios來進行遠程數據傳遞，Axios是以json明文方式傳遞數據，這個方式對于調試非常友好，但是卻沒法節省網絡帶寬，而且我個人是比較熱衷于更前沿的技術，所以我選擇使用grpc（對了忘了說一句，如果你是用的nodejs那么恭喜你你沒有這么多坑爹問題，因為nodejs使用的是完整版的grpc，而JavaScript使用的是grpc-web,）廢話不多說，說干就干。

?????? 首先需要準備一個可靠的后臺程序，因為我實在是太喜歡C#了，所以我選擇使用Asp.net.core（其實主要原因是Asp.net.core官方對grpc-web支持最好，這里不得不說一句微軟牛B，其他的后臺我只能呵呵，因為都需要使用代理服務器，如果有不需要的歡迎打臉， 當然反向代理那也是代理），使用Asp.Net.Core創建一個Grpc服務器也很簡單，只需要在創建grpc工程時選擇gRPC即可。

??這是一個Grpc服務器的創建過程：

??這是我的pb文件（是由vs默認生成）：

• 這是Grpc的一個服務（是由vs默認生成）

??啟動Grpc服務

? ? 接著使用npm安裝grpc-web +gooble-protobuf (因為本人使用的是typescript所以我還安裝了@improbable-eng/grpc-web + @types/google-protobuf)(另外如果你希望在執行自動編譯protobuffer文件編譯的話還建議安裝grpc-tools ,如果你需要這樣的功能那么可以跟我深入探討一下，這里需要自己做一個編譯腳本)。

?????? 完成了上面的準備工作，那么恭喜你，你已經完成了80%的工作了，你可以開始在前臺使用grpc服務了，經過一通折騰（包括拷貝protobuffer文件，將protobuffer文件編譯成對應的js文件）（對了在vue中如果想要做一個plugins那么請查閱vue的官方描述文檔，這個文檔說了跟沒說差別不大，說得太簡單了 -- 為什么要這么做，當然就是可以實現一個單例啊）。

??這是我的typescript調用方式：

??編譯工程運行前臺網頁程序：

? ? ? ?沒錯結果就是這樣，我在前面說了javascript只支持grpc-web，而我們卻把grpc-web當成grpc在使用，為了解決這個問題，我經過多方查證（grpc-web官網以及微軟Asp.net.core的官網），找到了兩個解決方案：

u? 方案1：使用官方推薦的代理，進行轉發（grpcwebproxy 這是官方提供的代理服務，下載地址Releases · improbable-eng/grpc-web(github.com)）

??下載完成啟動代理，以下是代理啟動命令以及各參數的意義：

?? 修改前臺調用代碼的端口定向到代理服務器（代理端口是5005）

?? 運行網頁查看通訊：

Good這是一個看似完美的解決方案，但是對于一個客戶端來說你需要在一臺機器上開兩個后臺，這個設定看上去很2。

u? 方案2：使用Asp.Net.Core官網做法（在瀏覽器應用中使用 gRPC | Microsoft Docs），微軟牛B

?在Asp.Net.Core的grpc工程中添加?Grpc.AspNetCore.Web支持庫（nuget搜索添加即可）

?修改Startup配置

?啟動Grpc服務器

??修改javascript調用host（注意目前我只找到https的協議方式http仍然不能使用，我還不知道用什么辦法解決）

??編譯運行網頁客戶端

Good這是一個近乎完美的方案，這個方案簡直是最佳方案，雖然我還沒有找到怎么使用http而不使用https.

至此，終于可以安心的用網頁寫客戶端了。

總結

以上是生活随笔為你收集整理的GRPC在网页前端的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。