Playground

The playground is not for documentation - it is there to play with the service interface, the server implementation and the generated gotsrpc code.

Go Service

Service interface defintion

server/services/playground/service.go

package playground

import time "time"

type Greeting struct {
	Text string    `json:"text"`
	Time time.Time `json:"time"`
}

type Service interface {
	ImplementMe() Greeting
}

Service implementation

server/services/playground/service.go

package server

import (
	"time"

	"github.com/foomo/gotsrpc-playground/server/services/playground"
)

type playgroundService struct {
}

func NewPlayground() playground.Service {
	return &playgroundService{}

}

func (s *playgroundService) ImplementMe() playground.Greeting {
	return playground.Greeting{
		Text: "Starting breaking things here 😎",
		Time: time.Now(),
	}
}

Next.js TypeScript client

client/pages/playground.tsx

import { DocsAside } from "@/components/DocsAside";
import { ServiceClient } from "@/services/generated/client-playground";
import { Greeting } from "@/services/generated/vo-playground";
import { getClient } from "@/services/transport";
import { getClientWithTransportLog } from "@/services/transportWithLog";
import classes from "@/styles/Playground.module.css";
import { useEffect, useState } from "react";

// prettier-ignore
const preFormattedDocs = `
client/
  pages/plaground.tsx - what you are looking at
  styles/Playground.module.css - for styling

server/
  services/playground/service.go - your service interface
  server/server/plaground.go - your service implemetation
`;

const client = getClientWithTransportLog(ServiceClient);

const Playground = () => {
  const [greeting, setGreeting] = useState<Greeting | undefined>();
  useEffect(() => {
    client.implementMe().then(setGreeting);
  }, []);
  return (
    <>
      <DocsAside examplePage="playground">
        <p>Here is a playground just for you ❤️</p>
        <p>start hacking here:</p>
        <code>
          <pre>{preFormattedDocs}</pre>
        </code>
      </DocsAside>

      <div className={classes.greeting}>
        {greeting ? (
          <>
            <h2>text:greetings from the server:</h2>
            <table>
              <tr>
                <td>text</td>
                <td>{greeting.text}</td>
              </tr>
              <tr>
                <td>time</td>
                <td>{new Date(greeting?.time).toISOString()}</td>
              </tr>
            </table>
          </>
        ) : (
          <>pending ...</>
        )}
      </div>
    </>
  );
};
export default Playground;