Question

所以我已经建立了一个简单的电子应用程序，但我真的不知道如何让它在服务器端做任何事情（除了冷却窗口之外使用电子的全部原因）我想知道我是否需要使用像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 + '&nbsp' +
                    '<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>&nbsp<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方面的函数：）

Answer 1

Electron不是服务器，它只是基于Node.js的程序，它生成子进程以呈现WebUI（称为渲染器进程）。

Electron本身称为主进程，从此处创建新的BrowserWindow对象将创建新的渲染器进程，您可以实际看到该浏览器。

Electron正在运行Node.js，因此您可以理论上运行Web服务器，但我不推荐它，服务器必须是分开的。

只需创建新的Node应用程序来制作WebServer + Socket.io，然后将Socket.io-client安装到您的Electron App中，现在可以使用了。

Answer 2

如果您只需要在主要流程中调用一些方法/功能，也许您可以使用ipc（ipcMain和ipcRenderer）

您可以使用它们在主进程和渲染器进程之间进行通信。

建立电子应用程序入门

2 个答案: