1764564459

netcore vue grpc、http grpc

vue 前端

一、項(xiàng)目準(zhǔn)備

創(chuàng)建 vue 項(xiàng)目

$ cd E:\code

# 創(chuàng)建 vue 項(xiàng)目
$ vue create apricot-grpc
   -> 1、選擇 Vue3

安裝依賴

$ npm install grpc-web --save

$ npm install google-protobuf --save

安裝 proto 轉(zhuǎn)換依賴

$ npm install -g protoc-gen-js protoc-gen-grpc-web grpc-tools

二、Proto 文件轉(zhuǎn)換

復(fù)制 proto 文件
- 后端 proto
- 將 Protos 文件夾復(fù)制至 src 目錄下
查看全局目錄地址
```
$ npm config get prefix
```
找到 protoc.exe

生成 js 文件

將所有項(xiàng)目需要 .proto 轉(zhuǎn)換成 .js

# 轉(zhuǎn)到 src 目錄
$ cd .\aproct-grpc\src

# 創(chuàng)建 grpc-proto-js 目錄（輸出js目錄）
$ mkdir grpc-proto-js

# 生成 file_grpc_web_pb.js、file_pb.js
$ D:\nodejs\node_modules\grpc-tools\bin\protoc.exe --proto_path=. --js_out=import_style=commonjs,binary:./grpc-proto-js/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./grpc-proto-js/ .\Protos\File\file.proto

# 生成  google\protobuf\empty_pb.js
$ D:\nodejs\node_modules\grpc-tools\bin\protoc.exe --proto_path=. --js_out=import_style=commonjs,binary:./grpc-proto-js/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./grpc-proto-js/ .\Protos\google\protobuf\empty.proto

# 生成  Params\id_pb.js
$ D:\nodejs\node_modules\grpc-tools\bin\protoc.exe --proto_path=. --js_out=import_style=commonjs,binary:./grpc-proto-js/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./grpc-proto-js/ .\Protos\Params\id.proto   

# 生成  Params\query_pb.js
$ D:\nodejs\node_modules\grpc-tools\bin\protoc.exe --proto_path=. --js_out=import_style=commonjs,binary:./grpc-proto-js/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./grpc-proto-js/ .\Protos\Params\query.proto   

# 生成  Results\result_pb.js
$ D:\nodejs\node_modules\grpc-tools\bin\protoc.exe --proto_path=. --js_out=import_style=commonjs,binary:./grpc-proto-js/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./grpc-proto-js/ .\Protos\Results\result.proto

proto_path：proto 文件地址
mode：請(qǐng)求數(shù)據(jù)類(lèi)型（Content-Type）
grpc-proto-js：生成 .js 輸出目錄

使用 grpc

<template>
 <div class="hello">
   <label for="grpc api">grpc api</label>：
   <input
      name="refulapi"
      type="button"
      value="grpc api"
      v-on:click="onGrpcApi"
   />
 </div>
</template>

<script>
  import { Empty } from "../grpc-proto-js/Protos/google/protobuf/empty_pb";
  import { FileServiceClient } from "../grpc-proto-js/Protos/File/file_grpc_web_pb";

   export default {
      name: "HelloWorld",
      props: {
         msg: String,
      },
      methods: {
         // eslint-disable-next-line
         onGrpcApi(event) {
            const client = new FileServiceClient("http://localhost:5211", null, null);

            // eslint-disable-next-line
            client.readFileAsync(new Empty(), {}, (err, response) => {
               console.log(response);
            });
         },
      
      },
   };
</script>

啟動(dòng)項(xiàng)目
```
$ npm run serve
```
- 可能會(huì)出現(xiàn)錯(cuò)誤：not found Any_pb.js
- 附圖：
- 解決：將 grpc-proto-js 下相關(guān)引用 Any_pb.js 改成 any_pb.js
請(qǐng)求跨域
- 附圖：
- 解決
待續(xù)

三、grpc http

http 請(qǐng)求

<template>
 <div class="hello">
    <label for="reful api">grpc http api</label>：
    <input
       name="refulapi"
       type="button"
       value="grpc http api"
       v-on:click="onGrpcHttpApi"
    />
</template>

<script>
  import { Empty } from "../grpc-proto-js/Protos/google/protobuf/empty_pb";
  import { FileServiceClient } from "../grpc-proto-js/Protos/File/file_grpc_web_pb";

   export default {
      name: "HelloWorld",
      props: {
         msg: String,
      },
      methods: {
         // eslint-disable-next-line
         onGrpcHttpApi(event) {
            var xhr = new XMLHttpRequest();

            xhr.responseType = "json";

            xhr.addEventListener("readystatechange", function () {
            // eslint-disable-next-line
            if (this.readyState === 4) {
               console.log(this.response.data);
            }
            });

            //設(shè)置請(qǐng)求
            xhr.open("get", "http://localhost:5211/v1/electron/getbase64");
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.send();
         },
      }
   };
</script>

待續(xù)

后端

一、grpc proxy

創(chuàng)建項(xiàng)目
- 跳過(guò)，詳細(xì)參考 [netcore grpc]

安裝依賴

> dotnet add package Grpc.AspNetCore --version 2.71.0
> dotnet add package protobuf-net --version 3.2.56
> dotnet add package Yarp.ReverseProxy --version 2.3.0

創(chuàng)建 Proto
- 跳過(guò)，參考上文

創(chuàng)建服務(wù)

/// <summary>
/// Grcp service
/// </summary>
public class FileService : Electron.Grpc.FileService.FileServiceBase
{
   public override async Task<GetBufferResponse> ReadFileAsync(Empty request, ServerCallContext context)
   {
      using var fileStream = System.IO.File.OpenRead("C:\\Users\\Administrator\\Desktop\\2fdda3cc7cd98d1001e9f6a7b36eaf0e7bec54e73a51.jpg");

      var memeoryStream = new MemoryStream();

      await fileStream.CopyToAsync(memeoryStream);

      var buffer = memeoryStream.ToArray();

      var resp = new GetBufferResponse
      {
            Code = 200,
            Data = Convert.ToBase64String(buffer)
      };

      return resp;
   }
}

服務(wù)配置

using Apricot.Grpc.Proxy.Services;

var builder = WebApplication.CreateBuilder(args);

// yarp proxy
builder.Services.AddReverseProxy();

// grpc
builder.Services.AddGrpc();

// cors
builder.Services.AddCors(options =>
{
   options.AddPolicy("AllowAll", policy =>
   {
      policy.SetIsOriginAllowed(_ => true)
            .AllowAnyMethod()
      .AllowAnyHeader()
      .AllowCredentials()
      .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding", "X-Grpc-Web", "User-Agent");
   });
});


var app = builder.Build();

// route
app.UseRouting();

// grpc web 
app.UseGrpcWeb();

app.UseCors("AllowAll");

// grpc service 
app.MapGrpcService<FileService>().EnableGrpcWeb();

// frontend（http://localhost:8081） proxy
app.MapForwarder("/electron.FileService/{**catch-all}", "http://localhost:8081");

app.Run();

Yarp.ReverseProxy 跨域代理

未找到更優(yōu)方案，有更好方案評(píng)論區(qū)留言

解決

 using Apricot.Grpc.Proxy.Services;

 var builder = WebApplication.CreateBuilder(args);

 // yarp proxy
 builder.Services.AddReverseProxy();

 // cors
 builder.Services.AddCors(options =>
 {
    options.AddPolicy("AllowAll", policy =>
    {
       policy.SetIsOriginAllowed(_ => true)
             .AllowAnyMethod()
       .AllowAnyHeader()
       .AllowCredentials()
       .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding", "X-Grpc-Web", "User-Agent");
    });
 });

 var app = builder.Build();

 // use cors
 app.UseCors("AllowAll");

 // frontend（http://localhost:8081） proxy
 app.MapForwarder("/electron.FileService/{**catch-all}", "http://localhost:8081");

 app.Run();

處理 Unsupported Media Type

參考

解決

// route
app.UseRouting();

// grpc web 
app.UseGrpcWeb();

// grpc service （EnableGrpcWeb）
app.MapGrpcService<FileService>().EnableGrpcWeb();

待續(xù)

二、grpc http

安裝依賴 [官網(wǎng)]

> dotnet add package  Microsoft.AspNetCore.Grpc.JsonTranscoding --version 8.0.21

更改 proto 協(xié)議

syntax = "proto3";
option csharp_namespace = "Apricot.Electron.Grpc";

package electron;

// google protos
import "google/protobuf/empty.proto";
import "google/protobuf/Any.proto";
import "google/api/annotations.proto";

// results protos
import "Protos/Results/result.proto";
import "Protos/File/buffer.proto";

// services
service FileService{

   rpc ReadFileAsync(google.protobuf.Empty) returns(GetBufferResponse);

   rpc GetBase64Async(google.protobuf.Empty) returns(GetBufferResponse){
      option (google.api.http) = {
            get: "/v1/electron/getbase64"
      };
   }
}

添加服務(wù)

/// <summary>
/// Grcp service
/// </summary>
public class FileService : Electron.Grpc.FileService.FileServiceBase
{
   public override async Task<GetBufferResponse> GetBase64Async(Empty request, ServerCallContext context)
   {
       using var fileStream = System.IO.File.OpenRead("C:\\Users\\Administrator\\Desktop\\2fdda3cc7cd98d1001e9f6a7b36eaf0e7bec54e73a51.jpg");

       var memeoryStream = new MemoryStream();

       await fileStream.CopyToAsync(memeoryStream);

       var buffer = memeoryStream.ToArray();

       var resp = new GetBufferResponse
       {
           Code = 200,
           Data = Convert.ToBase64String(buffer)
       };

       return resp;
   }
}

服務(wù)配置

using Apricot.Grpc.Proxy.Services;

var builder = WebApplication.CreateBuilder(args);
// grpc
builder.Services.AddGrpc().AddJsonTranscoding();

// cors
builder.Services.AddCors(options =>
{
   options.AddPolicy("AllowAll", policy =>
   {
      policy.SetIsOriginAllowed(_ => true)
            .AllowAnyMethod()
      .AllowAnyHeader()
      .AllowCredentials()
      .WithExposedHeaders("Grpc-Status", "Grpc-Message", "Grpc-Encoding", "Grpc-Accept-Encoding", "X-Grpc-Web", "User-Agent");
   });
});

var app = builder.Build();

// route
app.UseRouting();

// cors
app.UseCors("AllowAll");

// grpc service
app.MapGrpcService<FileService>();

app.Run();

待續(xù)

posted @ 2025-10-25 12:15 1764564459 閱讀(8) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

1764564459

netcore vue grpc、http grpc

netcore vue grpc、http grpc

vue 前端

一、項(xiàng)目準(zhǔn)備

二、Proto 文件轉(zhuǎn)換

三、grpc http

后端

一、grpc proxy

二、grpc http

示例項(xiàng)目

公告