connect-test
├── buf.gen.yaml# コード生成の設定。修正必要。
├── buf.yaml# buf mod initで生成。いじらない。
├── cmd
│   └── connect-test
│       └── main.go# サーバーのエントリーポイント
├── frontend# フロントエンドのフォルダ(詳細は省略
│   ├── package.json
│   └── src
│       └── greet# 自動生成で作ったフロントエンドコード
│           └── v1
│               ├── greet_connectweb.ts
│               └── greet_pb.ts
├── release.go# 静的HTMLバンドル用(github.com/shibukawa/frontend-go利用)
├── gen# 自動生成で作ったサーバーコード
│   └── greet
│       └── v1
│           ├── greet.pb.go
│           └── greetv1connect
│               └── greet.connect.go
├── generate.go# go generateを定義したコード
├── go.mod
├── go.sum
├── greet# protobuf定義
│   └── v1
│       └── greet.proto
└── server.go# サーバー実装

mkdir connect-test
go mod init connecttest
npx degit solidjs/templates/ts frontend# Solid.jsでfrontend作成

go install github.com/bufbuild/buf/cmd/buf@latest
go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
go install github.com/bufbuild/connect-go/cmd/protoc-gen-connect-go@latest
cd frontend
npm install --save-dev bufbuild/protoc-gen-connect-web bufbuild/protoc-gen-es

syntax ="proto3";

package greet.v1;

optiongo_package="connecttest/gen/greet/v1;greetv1";

message GreetRequest {
stringname=1;
}

message GreetResponse {
stringgreeting=1;
}

service GreetService {
  rpcGreet(GreetRequest) returns (GreetResponse) {}
}

version:v1
plugins:
-name:go
out:gen
opt:paths=source_relative
-name:connect-go
out:gen
opt:paths=source_relative
-name:es
path:./frontend/node_modules/.bin/protoc-gen-es
out:frontend/src
opt:target=ts
-name:connect-web
path:./frontend/node_modules/.bin/protoc-gen-connect-web
out:frontend/src
opt:target=ts

package connecttest

import (
"context"
"fmt"

greetv1"connecttest/gen/greet/v1"

"github.com/bufbuild/connect-go"
)

type GreetServerstruct{}

func(s *GreetServer) Greet(
ctx context.Context,
req *connect.Request[greetv1.GreetRequest],
) (*connect.Response[greetv1.GreetResponse],error) {
res := connect.NewResponse(&greetv1.GreetResponse{
Greeting: fmt.Sprintf("Hello, %s!", req.Msg.Name),
})
return res,nil
}

package main

import (
"context"
"fmt"
"log"
"net/http"
"os"
"os/signal"
"time"

"github.com/shibukawa/frontend-go"
"golang.org/x/net/http2"
"golang.org/x/net/http2/h2c"

"connecttest"
"connecttest/gen/greet/v1/greetv1connect"
)

funcmain() {
ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
defer stop()

greeter := &connecttest.GreetServer{}
mux := http.NewServeMux()
path, handler := greetv1connect.NewGreetServiceHandler(greeter)
mux.Handle(path, handler)
mux.Handle("/", frontend.MustNewSPAHandler(ctx))// 🐙

server := &http.Server{
Addr:":8888",
Handler: h2c.NewHandler(mux, &http2.Server{}),
}

gofunc() {
<-ctx.Done()
ctx, cancel := context.WithTimeout(context.Background(),5*time.Second)
defer cancel()
server.Shutdown(ctx)
}()
fmt.Println("start receiving at :8888")
log.Fatal(server.ListenAndServe())
}

//go:build release

package connecttest

import (
"embed"

"github.com/shibukawa/frontend-go"
)

//go:embed frontend/dist/*
var asset embed.FS

funcinit() {
frontend.SetFrontAsset(asset, frontend.Opt{
FrameworkType: frontend.SolidJS,
})
}

import {
  createConnectTransport,
  createPromiseClient,
}from"@bufbuild/connect-web";

import {
GreetService
}from"./greet/v1/greet_connectweb"

// トランスポート作成
const transport =createConnectTransport({
baseUrl:"/",
});

// クライアント作成
const client =createPromiseClient(GreetService, transport);

// サーバーリクエスト実行
const res =await client.greet({name:"名前"});

import {
  createSignal,
  createResource,
Component,
}from'solid-js';

(ここに上記のコードを入れる)

asyncfunctiongreeter(name:string) {
return client.greet({name});
}

constApp:Component =() => {
const [name, setName] =createSignal("bob");
const [greet] =createResource(name, greeter);

return (
<divclass={styles.App}>
<headerclass={styles.header}>
<input
placeholder="名前を入れてね"
onInput={(e) => setName(e.currentTarget.value)}
        />
<p>greeting: {greet()?.greeting}</p>
</header>
</div>
  );
};

exportdefaultApp;

asyncfunctionfetcher(key:string, name:string) {
return client.greet({name});
}

const { data, error } =useSWR([GreetService.methods.greet.name, name], fetcher)