开始构建电子应用程序
开始构建电子应用程序
提问于 2017-02-01 08:32:37
所以我已经建立了一个简单的电子应用程序，但不知道如何让它在服务器端做任何事情(使用电子而不是很酷的窗口的全部原因)我想知道我是否必须使用像socket.io这样的东西，但我想有一个更好的方法来做这件事，这是我现在的代码
index.js
const electron = require('electron');
const io = require('socket.io');
const app = electron.app; // Module to control application life.
const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
var mainWindow = null;
app.on('ready', function() {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL('file://' + __dirname + 'masterstyle.css');
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
io = socket;下面是它加载的HTML
<head>
<title>Rex Serial Manipulator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
window.$ = window.jQuery = require('jquery');
</script>
</head>
<body>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks active" onclick="openCity(event, 'basic-window')">Basic</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'advanced-window')">Advanced</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'monitor-window')">Monitor</a></li>
</ul>
<div id="main-content-div" class="main-content-div">
<div id="basic-window" class="tabcontent" style="display: block;">
<center>
<p>Basic Serial Control
<p>
<div id="main-controls-div">
<form id="form-1">
<input type="text" id="serial-value1" class="serial-value-txt-box"></input>
<input type="submit" value="Send"></input>
</form>
<form id="form-2">
<input type="text" id="serial-value2" class="serial-value-txt-box"></input>
<input type="submit" value="Send"></input>
</form>
</div>
<input type="button" class="plus-button" value="+" onclick="addButton()">
</input>
</center>
</div>
<div id="advanced-window" class="tabcontent">
</div>
<div id="monitor-window" class="tabcontent">
</div>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
(function($) {
var controls = [{
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
}, {
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
},
];
function showMessages() {
var controlsDiv = $('#main-controls-div');
controlsDiv.html('');
controls.forEach(function(control) {
controlsDiv.append(
control.textField + ' ' +
'<button class="delete" row="' +
controls.indexOf(control) + '">Send</button><br></br>');
});
} //showMessages()
// document.ready()
$(function() {
showMessages();
$('#addmessage').on('click', function() {
console.log('hi');
controls.push({
textField: '<input type="text" id="serial-value1" class="serial-value-txt-box"></input>'
});
});
});
}(jQuery));
function addButton() {
var serialValNum = 3;
var div = document.getElementById('main-controls-div');
div.innerHTML += '<input type="text" class="serial-value-txt-box"></input> <input type="submit" value="Send"></input></br></br>'
serialValNum++
}
</script>
<style>
.plus-button {
background-color: #2ecc71;
height: 30px;
width: 225px;
border: 0px;
border-radius: 5px;
font-size: 20px;
}
ul {
width: 100%;
padding: 0px;
margin: 0px;
position: fixed;
top: 0px;
left: 0px;
background: #252526;
}
ul.tab li {
padding: 0px;
margin: 0px;
float: left;
background: #252526;
text-decoration: none;
list-style-type: none;
}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: #2ecc71;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: helvetica;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #2c2c2c;
}
/* Create an active/current tablink class */
ul.tab li a:focus,
.active {
background-color: #1e1e1e;
}
/* Style the tab content */
.tabcontent {
font-family: Arial, Helvetica, sans-serif;
color: white;
position: absolute;
width: 100%;
top: 0px;
bottom: 0px;
display: none;
border-top: none;
background: #1e1e1e;
}
body {
padding: 0px;
margin: 0px;
background: #1e1e1e;
}
.main-content-div {
position: absolute;
top: 48px;
bottom: 0px;
width: 100%;
}
</style>那么，我如何才能按下按钮并调用index.js端的函数:)
回答 2
Stack Overflow用户
发布于 2017-02-01 11:14:15
spawn不是一个服务器，它只是一个基于Node.js的程序，它产生用于渲染WebUI的子进程(称为渲染器进程)。
电子本身称为主进程，并从这里创建新的BrowserWindow对象将创建新的渲染器进程，您可以实际看到浏览器。
电子是由Node.js工作的，所以理论上你可以运行Web服务器，但我不建议这样做，服务器必须是独立的。
只需创建新的Node应用程序来创建WebServer + Socket.io，并将Socket.io-client安装到您的电子应用程序中，现在就可以工作了。
Stack Overflow用户
发布于 2017-02-01 11:40:09
如果你只需要在主进程中调用几个方法/函数，也许你可以使用ipc(ipcMain和ipcRenderer)
您可以使用它们在主进程和渲染器进程之间进行通信。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41970018
复制相关文章
相似问题
腾讯云开发者
