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

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

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

うまくいったー

ENGINEER エンジニアニブリングツール TZ-20

↑タカチアルミケースを加工するのに使ってます
のこぎりはしんどい、はさみはゆがむ、ニブリングツールは、、、やっぱり少ししんどいかな；
ユニバーサル基板切るのにも使えるんよ