Sunday Engineer: 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



#!/bin/sh
# プロトコルバッファコンパイラ（protoc）のインストール
PROTOBUF_VERSION="32.1"
wget "https://github.com/protocolbuffers/protobuf/releases/download/v${PROTOBUF_VERSION}/protoc-${PROTOBUF_VERSION}-linux-x86_64.zip"
unzip "protoc-${PROTOBUF_VERSION}-linux-x86_64.zip" -d protoc_install
sudo mv protoc_install/bin/protoc /usr/local/bin/
sudo mv protoc_install/include /usr/local/include/
rm -rf protoc_install*
 
# gRPC-Webプラグインのインストール
GRPC_WEB_PLUGIN_VERSION="2.0.1"
wget "https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_PLUGIN_VERSION}/protoc-gen-grpc-web-${GRPC_WEB_PLUGIN_VERSION}-linux-x86_64"
sudo mv "protoc-gen-grpc-web-${GRPC_WEB_PLUGIN_VERSION}-linux-x86_64" /usr/local/bin/protoc-gen-grpc-web
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



syntax = "proto3";
 
//option csharp_namespace = "grpcweb_srv";
 
package greet;
 
// The greeting service definition.
service Greeter {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply);
}
 
// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}
 
// The response message containing the greetings.
message HelloReply {
  string message = 1;
}

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



// 生成されたコード
const {HelloRequest} = require('./gen/greet_pb.js');
const {GreeterClient} = require('./gen/greet_grpc_web_pb.js');
 
// gRPC-Webサービスのエンドポイントを指定
const client = new GreeterClient('http://localhost:5052', null, null);
 
// リクエストを作成
const request = new HelloRequest();
request.setName('JavaScript Client');
 
// SayHelloメソッドを呼び出し
client.sayHello(request, {}, (err, response) => {
  if (err) {
    console.error('Error: ', err.message);
    return;
  }
  console.log('Greeting:', response.getMessage());
});

HTMLファイルへの埋め込み
Webpackのインストールと設定
npm install --save-dev webpack webpack-cli
webpack.config.js作成
webpack.config.js



// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/client.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  mode: 'development',
  resolve: {
    alias: {
      './gen': path.resolve(__dirname, 'src', 'gen')
    }
  }
};

バンドルを実行
npx webpack

HTMLファイルへの埋め込み
index.html



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>gRPC-Web Client</title>
</head>
<body>
  <h1>gRPC-Web Client Example</h1>
  <p>コンソールを確認してください。</p>
 
  <script src="dist/bundle.js"></script>
</body>
</html>

んで、index.htmlをブラウザで開いて、chromeならCTRL+SHIFT+Iでデベロッパーツールを開いて、Consoleを見ると(てか、最近のブラウザってローカルのファイルを開く方法ってドラッグアンドドロップしかないの？)

やったぜ
これ使いこなせたらやりたい放題じゃん(何をじゃ？)ꉂꉂ(˃▿˂๑)

2025年9月17日水曜日

JavaScript今さら入門(3)

0 件のコメント:

コメントを投稿