electronのwebviewとipcで通信する方法

6689 ワード
TypeScript electron-vue Electron TypeScript テキストリンク

開発環境

electron-vue-typescript-starterをベースに実装しました。

  • electron
  • typescript
  • vue.js

実装方法

vueコンポーネントファイル

HogePage.vue
<template>
  <webview 
    src="http://localhost:3000/" 
    partition="persist:hoge"
    :preload="preload"
    autosize
    allowpopups
  />
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "hoge-page",
  data () {
    return {
      preload: `file:${require('path').resolve(__dirname, '../path/to/preload.js')}`
    }
  },  
  mounted () {
    const webview: any = document.querySelector('webview')
    webview.addEventListener("ipc-message", (event: any) => {
      console.log("channel: " + event.channel)
    })

    webview.addEventListener('dom-ready', () => {
      webview.openDevTools() // webview側のデベロッパーツールを表示する。うざかったら消していい。
      webview.send("ping")
    })
  }
});
</script>

preloadファイル(javascript)

preload.js
const {ipcRenderer} = require('electron')

ipcRenderer.on('ping', (e, data) => {
  ipcRenderer.sendToHost('pong');
});

window.onload = function(event) {
  ipcRenderer.sendToHost("onload")
}

動作確認

デベロッパーツールのログに以下のように出力されれば成功

channel: onload
channel: pong

参考

laravel5.4フレームワークjwt-auth APIユーザー認証を実現
Pythonデータ型とその使い方