Golang gRPC服务端与Angular gRPC客户端实现

以下是一个完整的Go gRPC服务端与Angular gRPC客户端的实现示例：

1. 定义Protocol Buffers（proto/user.proto）

syntax = "proto3";

package user;
option go_package = "./proto";

service UserService {
  rpc GetUser (UserRequest) returns (UserResponse);
  rpc CreateUser (CreateUserRequest) returns (UserResponse);
}

message UserRequest {
  string id = 1;
}

message CreateUserRequest {
  string name = 1;
  string email = 2;
}

message UserResponse {
  string id = 1;
  string name = 2;
  string email = 3;
}

2. Go gRPC服务端实现

// main.go
package main

import (
	"context"
	"log"
	"net"

	"google.golang.org/grpc"
	pb "your-project/proto"
)

type server struct {
	pb.UnimplementedUserServiceServer
	users map[string]*pb.UserResponse
}

func (s *server) GetUser(ctx context.Context, req *pb.UserRequest) (*pb.UserResponse, error) {
	if user, exists := s.users[req.Id]; exists {
		return user, nil
	}
	return nil, status.Errorf(codes.NotFound, "user not found")
}

func (s *server) CreateUser(ctx context.Context, req *pb.CreateUserRequest) (*pb.UserResponse, error) {
	id := generateID()
	user := &pb.UserResponse{
		Id:    id,
		Name:  req.Name,
		Email: req.Email,
	}
	s.users[id] = user
	return user, nil
}

func main() {
	lis, err := net.Listen("tcp", ":50051")
	if err != nil {
		log.Fatalf("failed to listen: %v", err)
	}

	s := grpc.NewServer()
	pb.RegisterUserServiceServer(s, &server{
		users: make(map[string]*pb.UserResponse),
	})

	log.Println("gRPC server listening on port 50051")
	if err := s.Serve(lis); err != nil {
		log.Fatalf("failed to serve: %v", err)
	}
}

3. Angular gRPC客户端实现

安装依赖

npm install @grpc/grpc-js google-protobuf @types/google-protobuf

生成TypeScript代码

protoc --plugin=protoc-gen-ts_proto=./node_modules/.bin/protoc-gen-ts_proto \
  --ts_proto_out=./src/app/proto \
  --ts_proto_opt=outputServices=grpc-js \
  --ts_proto_opt=esModuleInterop=true \
  proto/user.proto

Angular服务层（user.service.ts）

import { Injectable } from '@angular/core';
import { GrpcClientFactory, GrpcMetadata } from '@ngx-grpc/common';
import { GrpcWebClientFactory } from '@ngx-grpc/grpc-web-client';
import { UserServiceClient } from './proto/user.pb';
import { UserRequest, CreateUserRequest, UserResponse } from './proto/user.pb';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private client: UserServiceClient;

  constructor(
    private grpcClientFactory: GrpcClientFactory,
    private grpcWebClientFactory: GrpcWebClientFactory
  ) {
    this.client = this.grpcClientFactory.createClient(
      'UserService',
      UserServiceClient,
      'http://localhost:50051'
    );
  }

  getUser(id: string): Promise<UserResponse> {
    const request = new UserRequest();
    request.setId(id);
    
    return new Promise((resolve, reject) => {
      this.client.getUser(request, null, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve(response);
        }
      });
    });
  }

  createUser(name: string, email: string): Promise<UserResponse> {
    const request = new CreateUserRequest();
    request.setName(name);
    request.setEmail(email);
    
    return new Promise((resolve, reject) => {
      this.client.createUser(request, null, (err, response) => {
        if (err) {
          reject(err);
        } else {
          resolve(response);
        }
      });
    });
  }
}

Angular组件（user.component.ts）

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <div>
      <h2>Create User</h2>
      <input [(ngModel)]="name" placeholder="Name">
      <input [(ngModel)]="email" placeholder="Email">
      <button (click)="createUser()">Create</button>
      
      <h2>Get User</h2>
      <input [(ngModel)]="userId" placeholder="User ID">
      <button (click)="getUser()">Get User</button>
      
      <div *ngIf="user">
        <h3>User Details</h3>
        <p>ID: {{user.id}}</p>
        <p>Name: {{user.name}}</p>
        <p>Email: {{user.email}}</p>
      </div>
    </div>
  `
})
export class UserComponent {
  name: string = '';
  email: string = '';
  userId: string = '';
  user: any = null;

  constructor(private userService: UserService) {}

  async createUser() {
    try {
      const response = await this.userService.createUser(this.name, this.email);
      console.log('User created:', response.toObject());
      alert(`User created with ID: ${response.getId()}`);
    } catch (error) {
      console.error('Error creating user:', error);
    }
  }

  async getUser() {
    try {
      const response = await this.userService.getUser(this.userId);
      this.user = response.toObject();
    } catch (error) {
      console.error('Error getting user:', error);
      this.user = null;
    }
  }
}

4. 配置Angular模块

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { GrpcCoreModule } from '@ngx-grpc/core';
import { GrpcWebClientModule } from '@ngx-grpc/grpc-web-client';
import { AppComponent } from './app.component';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    GrpcCoreModule.forRoot(),
    GrpcWebClientModule.forRoot({
      settings: { host: 'http://localhost:50051' }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 运行说明

1. 启动Go服务端：

go run main.go

1. 启动Angular应用：

ng serve

1. 启用CORS（Go服务端）：

import "github.com/rs/cors"

func main() {
    // ... 其他代码
    grpcServer := grpc.NewServer(
        grpc.UnaryInterceptor(cors.UnaryServerInterceptor(cors.Options{
            AllowedOrigins: []string{"http://localhost:4200"},
        })),
    )
    // ... 注册服务
}

这个实现展示了完整的gRPC双向通信，包括服务定义、Go服务端实现、Angular客户端集成和前后端交互。