Sponsor me on Patreon to support more content like this.

In the previous post we looked at some of the various approaches to event-driven architecture in go-micro and in go in general. This part, we're going to delve into the client side and take a look at how we can create web clients which interact with our platform.

We'll take a look at how micro toolkit, enables you to proxy your internal rpc methods externally to web clients.

We'll be creating a user interfaces for our platform, a login screen, and a create consignment interface. This will tie together some of the previous posts.

So let's begin!

The RPC renaissance

REST has served the web well for many years now, and it has rapidly become the goto way of managing resources between clients and servers. REST came about to replace a wild west of RPC and SOAP implementations, which felt dated and painful at times. Ever had to write a wsdl file? eye roll.

REST promised us a pragmatic, simple, and unified approach to managing resources. REST used http verbs to be more explicit in the type of action being performed. REST encouraged us to use http error codes to better describe the response from the server. And for the most part, this approach worked well, and was fine. But like all good things, REST had many gripes and annoyances, that I'm not going to detail in full here. But do give this article a read. But RPC is making a comeback with the advent of microservices.

Rest is great for managing different resources, but a microservice typically only deals with a single resource by its very nature. So we don't need to use RESTful terminology in the context of microservices. Instead we can focus on specific actions and interactions with each service.

Micro

We've been using go-micro extensively throughout this tutorial, we'll now touch on the micro cli/toolkit. The micro toolkit provides an API gateway, a sidecar, a web proxy, and a few other cool features. But the main part we'll be looking at in this post is the API gateway.

The API gateway will allow us to proxy our rpc calls to web friendly JSON rpc calls, and will expose urls which we can use in our client side applications.

So how does this work? You firstly ensure that you have the micro toolkit installed:

  1. $ go get -u github.com/micro/micro

Better still, since we're using Docker, let's use the docker image:

  1. $ docker pull microhq/micro

Now let's head into our user service, I made a few changes, mostly error handling and naming conventions:

  1. // shippy-user-service/main.go
  2. package main
  4. import (
  5.     "log"
  7.     pb "github.com/EwanValentine/shippy-user-service/proto/auth"
  8.     "github.com/micro/go-micro"
  9.     _ "github.com/micro/go-plugins/registry/mdns"
  10. )
  12. func main() {
  14.     // Creates a database connection and handles
  15.     // closing it again before exit.
  16.     db, err := CreateConnection()
  17.     defer db.Close()
  19.     if err != nil {
  20.         log.Fatalf("Could not connect to DB: %v", err)
  21.     }
  23.     // Automatically migrates the user struct
  24.     // into database columns/types etc. This will
  25.     // check for changes and migrate them each time
  26.     // this service is restarted.
  27.     db.AutoMigrate(&pb.User{})
  29.     repo := &UserRepository{db}
  31.     tokenService := &TokenService{repo}
  33.     // Create a new service. Optionally include some options here.
  34.     srv := micro.NewService(
  36.         // This name must match the package name given in your protobuf definition
  37.         micro.Name("shippy.auth"),
  38.     )
  40.     // Init will parse the command line flags.
  41.     srv.Init()
  43.     // Will comment this out for now to save having to run this locally... 
  44.     // publisher := micro.NewPublisher("user.created", srv.Client())
  46.     // Register handler
  47.     pb.RegisterAuthHandler(srv.Server(), &service{repo, tokenService, publisher})
  49.     // Run the server
  50.     if err := srv.Run(); err != nil {
  51.         log.Fatal(err)
  52.     }
  53. }
  1. // shippy-user-service/proto/auth/auth.proto
  2. syntax = "proto3";
  4. package auth;
  6. service Auth {
  7.     rpc Create(User) returns (Response) {}
  8.     rpc Get(User) returns (Response) {}
  9.     rpc GetAll(Request) returns (Response) {}
  10.     rpc Auth(User) returns (Token) {}
  11.     rpc ValidateToken(Token) returns (Token) {}
  12. }
  14. message User {
  15.     string id = 1;
  16.     string name = 2;
  17.     string company = 3;
  18.     string email = 4;
  19.     string password = 5;
  20. }
  22. message Request {}
  24. message Response {
  25.     User user = 1;
  26.     repeated User users = 2;
  27.     repeated Error errors = 3;
  28. }
  30. message Token {
  31.     string token = 1;
  32.     bool valid = 2;
  33.     repeated Error errors = 3;
  34. }
  36. message Error {
  37.     int32 code = 1;
  38.     string description = 2;
  39. }

And…

  1. // shippy-user-service/handler.go
  2. package main
  4. import (
  5.     "errors"
  6.     "fmt"
  7.     "log"
  9.     pb "github.com/EwanValentine/shippy-user-service/proto/auth"
  10.     micro "github.com/micro/go-micro"
  11.     "golang.org/x/crypto/bcrypt"
  12.     "golang.org/x/net/context"
  13. )
  15. const topic = "user.created"
  17. type service struct {
  18.     repo         Repository
  19.     tokenService Authable
  20.     Publisher    micro.Publisher
  21. }
  23. func (srv *service) Get(ctx context.Context, req *pb.User, res *pb.Response) error {
  24.     user, err := srv.repo.Get(req.Id)
  25.     if err != nil {
  26.         return err
  27.     }
  28.     res.User = user
  29.     return nil
  30. }
  32. func (srv *service) GetAll(ctx context.Context, req *pb.Request, res *pb.Response) error {
  33.     users, err := srv.repo.GetAll()
  34.     if err != nil {
  35.         return err
  36.     }
  37.     res.Users = users
  38.     return nil
  39. }
  41. func (srv *service) Auth(ctx context.Context, req *pb.User, res *pb.Token) error {
  42.     log.Println("Logging in with:", req.Email, req.Password)
  43.     user, err := srv.repo.GetByEmail(req.Email)
  44.     log.Println(user, err)
  45.     if err != nil {
  46.         return err
  47.     }
  49.     // Compares our given password against the hashed password
  50.     // stored in the database
  51.     if err := bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(req.Password)); err != nil {
  52.         return err
  53.     }
  55.     token, err := srv.tokenService.Encode(user)
  56.     if err != nil {
  57.         return err
  58.     }
  59.     res.Token = token
  60.     return nil
  61. }
  63. func (srv *service) Create(ctx context.Context, req *pb.User, res *pb.Response) error {
  65.     log.Println("Creating user: ", req)
  67.     // Generates a hashed version of our password
  68.     hashedPass, err := bcrypt.GenerateFromPassword([]byte(req.Password), bcrypt.DefaultCost)
  69.     if err != nil {
  70.         return errors.New(fmt.Sprintf("error hashing password: %v", err))
  71.     }
  73.     req.Password = string(hashedPass)
  74.     if err := srv.repo.Create(req); err != nil {
  75.         return errors.New(fmt.Sprintf("error creating user: %v", err))
  76.     }
  78.     res.User = req
  79.     if err := srv.Publisher.Publish(ctx, req); err != nil {
  80.         return errors.New(fmt.Sprintf("error publishing event: %v", err))
  81.     }
  83.     return nil
  84. }
  86. func (srv *service) ValidateToken(ctx context.Context, req *pb.Token, res *pb.Token) error {
  88.     // Decode token
  89.     claims, err := srv.tokenService.Decode(req.Token)
  91.     if err != nil {
  92.         return err
  93.     }
  95.     if claims.User.Id == "" {
  96.         return errors.New("invalid user")
  97.     }
  99.     res.Valid = true
  101.     return nil
  102. }

Now run $ make build && make run. Then head over to your shippy-email-service and run $ make build && make run. Once both of these are running, run:

  1. $ docker run -p 8080:8080 \ 
  2.     -e MICRO_REGISTRY=mdns \
  3.     microhq/micro api \
  4.     --handler=rpc \
  5.     --address=:8080 \
  6.     --namespace=shippy

This runs the micro api-gateway as an rpc handler on port 8080 in a Docker container. We're telling it to use mdns as our registry locally, the same as our other services. Finally, we're telling it to use the namespace shippy, this is the first part of all of our service names. I.e shippy.auth or shippy.email. It's important to set this as it defaults to go.micro.api, in which case, it won't be able to find our services in order to proxy them.

Our user service methods can now be called using the following:

Create a user:

  1. curl -XPOST -H 'Content-Type: application/json' \
  2.     -d '{ "service": "shippy.auth", "method": "Auth.Create", "request": { "user": { "email": "[email protected]", "password": "testing123", "name": "Ewan Valentine", "company": "BBC" } } }' \ 
  3.     http://localhost:8080/rpc

As you can see, we include in our request, the service we want to be routed to, the method on that service we want to use, and finally the data we wish to be used.

Authenticate a user:

  1. $ curl -XPOST -H 'Content-Type: application/json' \ 
  2.     -d '{ "service": "shippy.auth", "method": "Auth.Auth", "request":  { "email": "[email protected]", "password": "SomePass" } }' \
  3.     http://localhost:8080/rpc

Great!

Consignment service

Now it's time to fire up our consignment service again, $ make build && make run. We shouldn't need to change anything here, but, running the rpc proxy, we should be able to do:

Create a consignment:

  1. $ curl -XPOST -H 'Content-Type: application/json' \ 
  2.     -d '{
  3.       "service": "shippy.consignment",
  4.       "method": "ConsignmentService.Create",
  5.       "request": {
  6.         "description": "This is a test",
  7.         "weight": "500",
  8.         "containers": []
  9.       }
  10.     }' --url http://localhost:8080/rpc

Vessel service

The final service we will need to run in order to test our user interface, is our vessel service, nothing's changed here eiter, so just run $ make build && make run.

User interface

Let's make use of our new rpc endpoints, and create a UI. We're going to be using React, but feel free to use whatever you like. The requests are all the same. I'm going to be using the react-create-app library from Facebook. $ npm install -g react-create-app. Once that's installed you can do $ react-create-app shippy-ui. And that will create the skeleton of a React application for you.

So let's begin…

  1. // shippy-ui/src/App.js
  2. import React, { Component } from 'react';
  3. import './App.css';
  4. import CreateConsignment from './CreateConsignment';
  5. import Authenticate from './Authenticate';
  7. class App extends Component {
  9.   state = {
  10.     err: null,
  11.     authenticated: false,
  12.   }
  14.   onAuth = (token) => {
  15.     this.setState({
  16.       authenticated: true,
  17.     });
  18.   }
  20.   renderLogin = () => {
  21.     return (
  22.       <Authenticate onAuth={this.onAuth} />
  23.     );
  24.   }
  26.   renderAuthenticated = () => {
  27.     return (
  28.       <CreateConsignment />
  29.     );
  30.   }
  32.   getToken = () => {
  33.     return localStorage.getItem('token') || false;
  34.   }
  36.   isAuthenticated = () => {
  37.     return this.state.authenticated || this.getToken() || false;
  38.   }
  40.   render() {
  41.     const authenticated = this.isAuthenticated();
  42.     return (
  43.       <div className="App">
  44.         <div className="App-header">
  45.           <h2>Shippy</h2>
  46.         </div>
  47.         <div className='App-intro container'>
  48.           {(authenticated ? this.renderAuthenticated() : this.renderLogin())}
  49.         </div>
  50.       </div>
  51.     );
  52.   }
  53. }
  55. export default App;

Now let's add our main two components, Authenticate and CreateConsignment:

  1. // shippy-ui/src/Authenticate.js
  2. import React from 'react';
  4. class Authenticate extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.   }
  10.   state = {
  11.     authenticated: false,
  12.     email: '',
  13.     password: '',
  14.     err: '',
  15.   }
  17.   login = () => {
  18.     fetch(`http://localhost:8080/rpc`, {
  19.       method: 'POST',
  20.       headers: {
  21.         'Content-Type': 'application/json',
  22.       },
  23.       body: JSON.stringify({
  24.         request: {
  25.           email: this.state.email,
  26.           password: this.state.password,
  27.         },
  28.         service: 'shippy.auth',
  29.         method: 'Auth.Auth',
  30.       }),
  31.     })
  32.     .then(res => res.json())
  33.     .then(res => {
  34.       this.props.onAuth(res.token);
  35.       this.setState({
  36.         token: res.token,
  37.         authenticated: true,
  38.       });
  39.     })
  40.     .catch(err => this.setState({ err, authenticated: false, }));
  41.   }
  43.   signup = () => {
  44.     fetch(`http://localhost:8080/rpc`, {
  45.       method: 'POST',
  46.       headers: {
  47.         'Content-Type': 'application/json',
  48.       },
  49.       body: JSON.stringify({
  50.         request: {
  51.           email: this.state.email,
  52.           password: this.state.password,
  53.           name: this.state.name,
  54.         },
  55.         method: 'Auth.Create',
  56.         service: 'shippy.auth',
  57.       }),
  58.     })
  59.     .then((res) => res.json())
  60.     .then((res) => {
  61.       this.props.onAuth(res.token.token);
  62.       this.setState({
  63.         token: res.token.token,
  64.         authenticated: true,
  65.       });
  66.       localStorage.setItem('token', res.token.token);
  67.     })
  68.     .catch(err => this.setState({ err, authenticated: false, }));
  69.   }
  71.   setEmail = e => {
  72.     this.setState({
  73.       email: e.target.value,
  74.     });
  75.   }
  77.   setPassword = e => {
  78.     this.setState({
  79.       password: e.target.value,
  80.     });
  81.   }
  83.   setName = e => {
  84.     this.setState({
  85.       name: e.target.value,
  86.     });
  87.   }
  89.   render() {
  90.     return (
  91.       <div className='Authenticate'>
  92.         <div className='Login'>
  93.           <div className='form-group'>
  94.             <input
  95.               type="email"
  96.               onChange={this.setEmail}
  97.               placeholder='E-Mail'
  98.               className='form-control' />
  99.           </div>
  100.           <div className='form-group'>
  101.             <input
  102.               type="password"
  103.               onChange={this.setPassword}
  104.               placeholder='Password'
  105.               className='form-control' />
  106.           </div>
  107.           <button className='btn btn-primary' onClick={this.login}>Login</button>
  108.           <br /><br />
  109.         </div>
  110.         <div className='Sign-up'>
  111.           <div className='form-group'>
  112.             <input
  113.               type='input'
  114.               onChange={this.setName}
  115.               placeholder='Name'
  116.               className='form-control' />
  117.           </div>
  118.           <div className='form-group'>
  119.             <input
  120.               type='email'
  121.               onChange={this.setEmail}
  122.               placeholder='E-Mail'
  123.               className='form-control' />
  124.           </div>
  125.           <div className='form-group'>
  126.             <input
  127.               type='password'
  128.               onChange={this.setPassword}
  129.               placeholder='Password'
  130.               className='form-control' />
  131.           </div>
  132.           <button className='btn btn-primary' onClick={this.signup}>Sign-up</button>
  133.         </div>
  134.       </div>
  135.     );
  136.   }
  137. }
  139. export default Authenticate;

and…

  1. // shippy-ui/src/CreateConsignment.js
  2. import React from 'react';
  3. import _ from 'lodash';
  5. class CreateConsignment extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.   }
  11.   state = {
  12.     created: false,
  13.     description: '',
  14.     weight: 0,
  15.     containers: [],
  16.     consignments: [],
  17.   }
  19.   componentWillMount() {
  20.     fetch(`http://localhost:8080/rpc`, {
  21.       method: 'POST',
  22.       headers: {
  23.         'Content-Type': 'application/json',
  24.       },
  25.       body: JSON.stringify({
  26.         service: 'shippy.consignment',
  27.         method: 'ConsignmentService.Get',
  28.         request: {},
  29.       })
  30.     })
  31.     .then(req => req.json())
  32.     .then((res) => {
  33.       this.setState({
  34.         consignments: res.consignments,
  35.       });
  36.     });
  37.   }
  39.   create = () => {
  40.     const consignment = this.state;
  41.     fetch(`http://localhost:8080/rpc`, {
  42.       method: 'POST',
  43.       headers: {
  44.         'Content-Type': 'application/json',
  45.       },
  46.       body: JSON.stringify({
  47.         service: 'shippy.consignment',
  48.         method: 'ConsignmentService.Create',
  49.         request: _.omit(consignment, 'created', 'consignments'),
  50.       }),
  51.     })
  52.     .then((res) => res.json())
  53.     .then((res) => {
  54.       this.setState({
  55.         created: res.created,
  56.         consignments: [...this.state.consignments, consignment],
  57.       });
  58.     });
  59.   }
  61.   addContainer = e => {
  62.     this.setState({
  63.       containers: [...this.state.containers, e.target.value],
  64.     });
  65.   }
  67.   setDescription = e => {
  68.     this.setState({
  69.       description: e.target.value,
  70.     });
  71.   }
  73.   setWeight = e => {
  74.     this.setState({
  75.       weight: Number(e.target.value),
  76.     });
  77.   }
  79.   render() {
  80.     const { consignments, } = this.state;
  81.     return (
  82.       <div className='consignment-screen'>
  83.         <div className='consignment-form container'>
  84.           <br />
  85.           <div className='form-group'>
  86.             <textarea onChange={this.setDescription} className='form-control' placeholder='Description'></textarea>
  87.           </div>
  88.           <div className='form-group'>
  89.             <input onChange={this.setWeight} type='number' placeholder='Weight' className='form-control' />
  90.           </div>
  91.           <div className='form-control'>
  92.             Add containers...
  93.           </div>
  94.           <br />
  95.           <button onClick={this.create} className='btn btn-primary'>Create</button>
  96.           <br />
  97.           <hr />
  98.         </div>
  99.         {(consignments && consignments.length > 0
  100.           ? <div className='consignment-list'>
  101.               <h2>Consignments</h2>
  102.               {consignments.map((item) => (
  103.                 <div>
  104.                   <p>Vessel id: {item.vessel_id}</p>
  105.                   <p>Consignment id: {item.id}</p>
  106.                   <p>Description: {item.description}</p>
  107.                   <p>Weight: {item.weight}</p>
  108.                   <hr />
  109.                 </div>
  110.               ))}
  111.             </div>
  112.           : false)}
  113.       </div>
  114.     );
  115.   }
  116. }
  118. export default CreateConsignment;

Note: I also added Twitter Bootstrap into /public/index.html and altered some of the css.

Now run the user interface $ npm start. This should automatically open within your browser. You should now be able to sign-up and log-in and view a consignment form where you can create new consignments. Take a look in the network tab in your dev tools, and take a look at the rpc methods firing and fetching our data from our different microservices.

That's the end of part 6, as ever, any feedback, please do drop me an email and I'll reply as fast as I can (which sometimes isn't that fast, please bare with me).

If you are finding this series useful, and you use an ad-blocker (who can blame you). Please consider chucking me a couple of quid for my time and effort. Cheers! https://monzo.me/ewanvalentine

Or, sponsor me on Patreon to support more content like this.