소개

Electron은 기본적으로 내부에서 Chrome(Chromium)이 움직이고 있어 웹 애플리케이션을 그대로 데스크톱 애플리케이션으로 제공할 수 있습니다.

gRPC는 Google이 발표한 RPC 프레임워크입니다. RPC는 뭐야… Protocol Buffer는 뭐야…

지금, gRPC가 주로 사용되고 있는 부분은 마이크로서비스화된 서버끼리의 통신등입니다만, 클라이언트와의 통신에도 점점 사용되고 있습니다.
웹에서 gRPC를 사용하려면 grpc-gateway 등을 사용하여 통신해야 합니다.

electron-vue

electron-vue은 Electron에서 Vue를 사용할 때 설정하는 데 도움이되며 vue-cli에서 사용할 수 있습니다.

자세한 것은 2017년도판 electron-vue로 시작하는 Vue.js를 보면 됩니다.

설정

$ vue init simulatedgreg/electron-vue electron-vue-grpc
$ cd electron-vue-grpc
$ yarn

gRPC / electron-rebuild 추가

grpc를 설치하고 electron-rebuild로 electron에 grpc를 넣습니다.
electron-rebuild는 아무리 길기 때문에 기장을 기다립니다.

$ yarn add grpc  electron-rebuild
$ ./node_modules/.bin/electron-rebuild
⠴ Building module: grpc, Completed: 0
✔ Rebuild Complete

gRPC를 사용해보십시오

간단한 gRPC 서버를 준비하고 gRPC를 사용해보십시오.

서버

gRPC 공식 Node.js 샘플 을 참고로 만들어 갑니다.

helloworld.proto

syntax = "proto3";

package helloworld;

// The greeting service definition.
service Greeter {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}

// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}

// The response message containing the greetings
message HelloReply {
  string message = 1;
}

server.js

const path = require('path')
const grpc = require('grpc')
const PROTO_PATH = path.join(`${__dirname}/../src/protos/`)
const helloProto = grpc.load(`${PROTO_PATH}/helloworld.proto`).helloworld

function sayHello (call, callback) {
  console.log(`Hello ${call.request.name}`)
  callback(null, { message: `Hello ${call.request.name}` })
}

function main () {
  const server = new grpc.Server()
  server.addService(helloProto.Greeter.service, { sayHello })
  server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure())
  server.start()
  console.log('Server is running')
}

main()

클라이언트

처음부터 있는 LandingPage.vue 에 구현해 갑니다.

먼저 gRPC Button라는 버튼을 추가합니다.gRPC Button 를 클릭하면 sayHello 메서드를 두드려갑니다.

LandingPage.vue

<div class="doc">
  <div class="title alt">Other Documentation</div>
  <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
  <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
  <button class="alt" @click="sayHello('エレクトロン太郎')">gRPC Button</button>
</div>

grpc를 import하여 서버와 연결합니다.sayHello 메서드는 서버에 sayHello 합니다.

LandinPage.vue

<script>
  import path from 'path'
  import grpc from 'grpc'
  import SystemInformation from './LandingPage/SystemInformation'

  const helloProto = grpc.load(path.join(`${__dirname}/../../protos/helloworld.proto`)).helloworld
  const client = new helloProto.Greeter('localhost:50051', grpc.credentials.createInsecure())

  export default {
    name: 'landing-page',
    components: { SystemInformation },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      sayHello (name) {
        client.sayHello({ name }, (err, response) => {
          alert(response.message)
          console.log(`Greeting ${response.message}`, err)
        })
      }
    }
  }
</script>

동작 확인

gRPC Button 를 누르면 서버에서 Hello エレクトロン太郎 로 돌아온 것을 확인할 수 있습니다.



서버에도 제대로 접속되어 있는 것을 확인할 수 있습니다.

요약

Electron에서 grpc를 사용하려면 electron-rebuild 로 반죽만 하면 됩니다.

마지막으로

여기서 소개한 코드는 Github에 공개되어 있습니다. 꼭 참고하십시오.
htps : // 기주 b. 코 m / 사토 타쿠미 / 에 ct 론

어쩌면 eletron-rebuild 그냥 스스로 할 필요는 있을지도.