DEV Community

voluntas
voluntas

Posted on

Electron で gRPC を動かす

Electron で gRPC を動かしたときのメモです。

  • Electron のバージョンは 8.2.5
  • Node.js のバージョンは 13.13
  • npm のバージョンは 6.14.4

思ってる以上にサクッと動きます。

インストール

yarn add electron electron-rebuild grpc @grpc/proto-loader --dev 
Enter fullscreen mode Exit fullscreen mode

再ビルドする

gRPC を使うには再ビルドが必要ですが、 electron-rebuild という便利ツールでサクッとできます。

electron/electron-rebuild: Package to rebuild native Node.js modules against the currently installed Electron version

./node_modules/.bin/electron-rebuild
Enter fullscreen mode Exit fullscreen mode

以下動かしたときの主なコード

echo.proto

syntax = "proto3";

package echo;

option go_package = ".;echo";

message EchoRequest {
    string message = 1;
}

message EchoReply {
    string message = 1;
}

service Echo {
    rpc Echo(EchoRequest) returns (EchoReply) {}
}
Enter fullscreen mode Exit fullscreen mode

main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

const grpc = require("grpc");
const protoLoader = require("@grpc/proto-loader");

const PROTO_PATH = __dirname + "/echo.proto";

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  defaults: true,
  oneofs: true,
});

const echoProto = grpc.loadPackageDefinition(packageDefinition);

let client = new echoProto.echo.Echo(
  "127.0.0.1:50051",
  grpc.credentials.createInsecure()
);

client.Echo({ message: "hello!!" }, function (error, response) {
  if (!error) {
    console.log(response.message);
  } else {
    console.error(error);
  }
});

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile("index.html");

  mainWindow.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

app.on("activate", function () {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)