Предпосылка

Посетите официальный сайт, чтобы понять и узнать, что такое буферы протокола. В этой статье предполагается, что вы достаточно знакомы с angular и protobuf.

Задача

Используйте буферы протокола в приложениях angular.

1. Определите свой сервис

Создайте файл proto / hello.proto и определите службу HelloWorld следующим образом:

2. Сгенерируйте клиентский код службы TypeScript.

Если вы еще не установили компилятор протокола, посетите официальную страницу установки компилятора, чтобы загрузить его.

Используйте следующую команду для установки библиотек npm, необходимых для создания клиентского кода службы машинописного текста:

$ npm install ts-protoc-gen @improbable-eng/grpc-web @types/google-protobuf google-protobuf

Затем создайте сценарий bash genproto.sh со следующим кодом:

Затем запустите скрипт, сделав его исполняемым:

$ chmod +x genproto.sh
$ ./genproto.sh

3. Определите службу HelloWorld в Angular.

Определите службу HelloWorld, которая использует сгенерированный клиент службы машинописного текста для подключения к внутреннему серверу gRPC:

Сервис не будет работать, пока вы не исправите ошибки связи с Envoy. Прочтите статью Отказ от REST с gRPC-web и Envoy для получения дополнительной информации об этом.

4. Настройка посланника

Нам нужно поместить Envoy между нашим клиентом и сервером для прозрачного преобразования между HTTP / 1.x и HTTP / 2. Создайте файл proxy / envoy.yaml со следующим содержанием:

Замените последнюю строку адресом и портом вашего сервера. После создания файла YAML выполните следующую команду, чтобы запустить прокси:

docker run -d -v "$(pwd)"/proxy/envoy.yaml:/etc/envoy/envoy.yaml:ro -p 8080:8080 -p 9901:9901 envoyproxy/envoy:v1.14.1

Страница grpc / examples / helloworld содержит различную информацию по устранению неполадок. Посетите этот веб-сайт, если описанный выше подход не работает.

Если у вас есть какие-либо вопросы или проблемы, не стесняйтесь оставлять комментарии ниже. Я постараюсь перезвонить вам через день или два.