글 목차
이 글은 https://okane-on-cliff.tistory.com/297
일렉트론 시작하기
참고한 문서는 공식문서다. https://www.electronjs.org/docs/latest/ 그럼 내가 이해하기 쉽게 개발 환경을 만드는 과정을 정리해 보겠다. 목적 이 문서의 목적은 1. hello world를 표시하는 앱을 실행한다. 2.
okane-on-cliff.tistory.com
에서 이어져요
먼저 dotenv라는 라이브러리를 설치해줘요
npm i dotenv
그리고 프로젝트 폴더에 .env 파일을 만들어요 .env가 안만들어 지면 .env.도 괜찮아요
# SOCKET_URL="wss://blhablhablhablhablha.org/api/socket"
# HOST_URL="https://blhablhablhablhablha.org/api"
SOCKET_URL="ws://localhost:9999/api/socket"
HOST_URL="http://localhost:9999/api/"
그럼 main.js 에서
require("dotenv").config();를 추가한 후
console.log(process.env.HOST_URL);을 출력시키면 터미널에 환경변수에 등록한 문자열이 나오게 되요.
이제 index.html 과 main.js를 연결할 다리를 두어요
프로젝트 폴더에 preload.js를 만들어요
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('versions', {
host: () => process.env.HOST_URL,
socket: () => process.env.SOCKET_URL
})
main.js를 다리에 연결해요
const path = require('node:path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
그리고 index.html에서 만들어진 다리에 접근을 해요
var host_url = window.versions.host();console.log를 찍어보면 host_url에 env 파일의 HOST_URL이 담겨있는걸 알 수 있어요
전체 코드는 아래와 같아요
main.js
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
require("dotenv").config();
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
preload.js
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('versions', {
host: () => process.env.HOST_URL,
socket: () => process.env.SOCKET_URL
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://unpkg.com;">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
display: block;
border: dashed;
}
</style>
<script>
var host_url = window.versions.host();
var socket_url = window.versions.socket();
console.log(host_url);
console.log(socket_url);
var socket_init = () => {
var conn = new WebSocket(socket_url);
conn.onopen = () => {
console.log("연결 성공!");
axios.get(host_url + '/test').then(function(response) {
console.log(response.data);
})
}
conn.onclose = () => {
console.log("연결 끊어짐ㅜㅜ");
setTimeout(function() {
socket_init();
}, 500);
}
}
socket_init();
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
let canvas_width = canvas.offsetWidth;
let canvas_height = canvas.offsetHeight;
context = canvas.getContext("2d");
</script>
</body>
</html>