JavaScript  ·  18日 9月 2025

    JavaScript今さら入門(3)

     

    今さらなんだけど、JavaScriptに挑戦してみる。JavaScriptでgRPC Clientを作ってみる試み。どうせならHTMLから実行したい。

    唐突にJavaScriptでgRPCしたんだけど、どうも生のgRPC(HTTP/2)のJavaScriptはHTMLに埋め込めないらしくて、gPRC-Webにせんといかんらしい。サーバー側にも変更が必要らしいので、別途検討してみた(こちら)。
    なんだけど、じつはそれだけじゃ足りなかったので、加えてこちら。
    では、ようやく、HTMLに埋め込んだJavaScriptからgRPCしてみるでー
    今回もGeminiに聞いてみるけど、参考サイトはこちら。

    プロジェクトフォルダを作成して移動
    mkdir grpcweb-jscli
    cd grpcweb-jscli

    protocとprotoc-gen-grpc-webのインストール
    tool-install.sh
    1. #!/bin/sh
    2. # プロトコルバッファコンパイラ（protoc）のインストール
    3. PROTOBUF_VERSION="32.1"
    4. wget "https://github.com/protocolbuffers/protobuf/releases/download/v${PROTOBUF_VERSION}/protoc-${PROTOBUF_VERSION}-linux-x86_64.zip"
    5. unzip "protoc-${PROTOBUF_VERSION}-linux-x86_64.zip" -d protoc_install
    6. sudo mv protoc_install/bin/protoc /usr/local/bin/
    7. sudo mv protoc_install/include /usr/local/include/
    8. rm -rf protoc_install*
    9.  
    10. # gRPC-Webプラグインのインストール
    11. GRPC_WEB_PLUGIN_VERSION="2.0.1"
    12. wget "https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_PLUGIN_VERSION}/protoc-gen-grpc-web-${GRPC_WEB_PLUGIN_VERSION}-linux-x86_64"
    13. sudo mv "protoc-gen-grpc-web-${GRPC_WEB_PLUGIN_VERSION}-linux-x86_64" /usr/local/bin/protoc-gen-grpc-web
    14. sudo chmod +x /usr/local/bin/protoc-gen-grpc-web
    chmod 755 tool-install.sh
    ./tool-install.sh

    protoc-gen-jsのインストール
    sudo npm install -g protoc-gen-js

    npmパッケージのインストール
    npm init -y
    npm install grpc-web google-protobuf

    protoファイルの準備
    mkdir Protos
    cp ../grpcweb-srv/Protos/* Protos
    Protos/greet.proto
    1. syntax = "proto3";
    2.  
    3. //option csharp_namespace = "grpcweb_srv";
    4.  
    5. package greet;
    6.  
    7. // The greeting service definition.
    8. service Greeter {
    9.   // Sends a greeting
    10.   rpc SayHello (HelloRequest) returns (HelloReply);
    11. }
    12.  
    13. // The request message containing the user's name.
    14. message HelloRequest {
    15.   string name = 1;
    16. }
    17.  
    18. // The response message containing the greetings.
    19. message HelloReply {
    20.   string message = 1;
    21. }
    C#で作ったprotoファイルと同じなんだけどoption csharp_namespace=...ってのはいらんでしょっでコメントアウト

    JavaScriptコードの生成
    Protos/greet.protoファイルから、JavaScriptクライアントのコードを生成
    生成先のディレクトリを作成
    mkdir -p src/gen
    protocを使ってコードを生成
    -I: .protoファイルの場所を指定
    --js_out: Protobufのメッセージクラスを生成
    --grpc-web_out: gRPC-Webクライアントクラスを生成
    protoc \
      -I=./Protos \
      --js_out=import_style=commonjs,binary:./src/gen \
      --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./src/gen \
      ./Protos/greet.proto

    JavaScriptクライアントの実装
    src/client.js
    1. // 生成されたコード
    2. const {HelloRequest} = require('./gen/greet_pb.js');
    3. const {GreeterClient} = require('./gen/greet_grpc_web_pb.js');
    4.  
    5. // gRPC-Webサービスのエンドポイントを指定
    6. const client = new GreeterClient('http://localhost:5052', null, null);
    7.  
    8. // リクエストを作成
    9. const request = new HelloRequest();
    10. request.setName('JavaScript Client');
    11.  
    12. // SayHelloメソッドを呼び出し
    13. client.sayHello(request, {}, (err, response) => {
    14.   if (err) {
    15.     console.error('Error: ', err.message);
    16.     return;
    17.   }
    18.   console.log('Greeting:', response.getMessage());
    19. });

    HTMLファイルへの埋め込み
    Webpackのインストールと設定
    npm install --save-dev webpack webpack-cli
    webpack.config.js作成
    webpack.config.js
    1. // webpack.config.js
    2. const path = require('path');
    3. module.exports = {
    4.   entry: './src/client.js',
    5.   output: {
    6.     path: path.resolve(__dirname, 'dist'),
    7.     filename: 'bundle.js',
    8.   },
    9.   mode: 'development',
    10.   resolve: {
    11.     alias: {
    12.       './gen': path.resolve(__dirname, 'src', 'gen')
    13.     }
    14.   }
    15. };
    バンドルを実行
    npx webpack

    HTMLファイルへの埋め込み
    index.html
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>gRPC-Web Client</title>
    6. </head>
    7. <body>
    8.   <h1>gRPC-Web Client Example</h1>
    9.   <p>コンソールを確認してください。</p>
    10.  
    11.   <script src="dist/bundle.js"></script>
    12. </body>
    13. </html>

    んで、index.htmlをブラウザで開いて、chromeならCTRL+SHIFT+Iでデベロッパーツールを開いて、Consoleを見ると(てか、最近のブラウザってローカルのファイルを開く方法ってドラッグアンドドロップしかないの？)
    やったぜ
    これ使いこなせたらやりたい放題じゃん(何をじゃ？)ꉂꉂ(˃▿˂๑)
    「アナログエンジニア」による アナログ電子回路の基礎と入門！これ１冊

    ↑愛読書、、、ブログも素晴らしかったのに見れなくなっている(´•̥ ω •̥` )
    カテゴリ： 非現実