Sunday Engineer: JavaScript今さら入門(4)

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

HTMLに埋め込んだJavaScriptでgRPCしたんだから結果はConsoleじゃなくてブラウザに表示したくなるよね。
ってことで、JavaScript今さら入門(1)を見ながら書き直していく。

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>Greeter</p>
  <input type="text" id="user" placeholder="user"><br>
  <button type="button" id="greet">greet</button><br>
  <div id="out"></div><br>
  <script src="dist/bundle.js"></script>
</body>
</html>

src/client.js



let out=document.getElementById('out');
let user=document.getElementById('user');
let button=document.getElementById('greet');
 
// 生成されたコード
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);
 
function button_clicked(){
  let user_value=user.value;
 
  // リクエストを作成
  const request = new HelloRequest();
  request.setName(user_value);
 
  // SayHelloメソッドを呼び出し
  client.sayHello(request, {}, (err, response) => {
    if (err) {
      console.error('Error: ', err.message);
      return;
    }
    let response_message=response.getMessage();
    console.log('Greeting:', response_message);
    out.textContent=response_message;
  });
}
 
button.addEventListener("click",button_clicked);

でけた
埋め込み用のコードを生成
npx webpack

ブラウザで読み込んでみる

で、なんか入力してボタンを押してみる

うまくいったー

2025年9月18日木曜日

JavaScript今さら入門(4)

0 件のコメント:

コメントを投稿