今回は、Node.jsの+電子についての詳細を学ぶためにいくつかの例を通り抜けました。
三つの例：
- 、ウェブを介してサーバーへのアクセスをhttpサーバをセットアップします
- Wsは、サーバーをセットアップし、Web経由でサーバーにメッセージを送信
- プロセス管理は、オープン/外部プロセスを閉じ
例1：httpサーバ
+電子環境1.デプロイのNode.js
Node.jsの+電子コース（A）：インストールと電子nodejs
2. HTTPサーバのインストール
プロジェクトのルートディレクトリのための作業ディレクトリcmdを確認してください。
実行コマンド：
糸は、httpサーバ--saveを追加します
3. HTTPサーバmain.jsを追加します。
下部のMain.js、次のコードを追加します。
// http-server
const httpServer = require('http-server');
httpServer.createServer().listen(8080);このコードでは：
私たちは、作成したhttpServerターゲットを
const httpServer = require('http-server');このオブジェクトはによって達成されたhttp-serverモジュールから作成。
作成、httpServerのオブジェクトを使用しhttp服务器て、モニターを8080端口。
サーバーが開始された後、ユーザーがブラウザを介して当社のサーバーにアクセスすることができます。
4. Startプログラム！
実行コマンド：
標高開始
彼らのブラウザアクセスではhttp://localhost:8080/index.html、ローカルindex.htmlファイルを取得します
（これはChromeブラウザは効果開きます）
例2：サーバWS
+電子環境1.デプロイのNode.js
Node.jsの+電子コース（A）：インストールと電子nodejs
2. WSをインストールします。
プロジェクトのルートディレクトリの確認作業ディレクトリcmdを行います。
命令を実行します：
糸が追加WS --save
3. WSサーバーmain.jsを追加します。
下部のMain.js、次のコードを追加します。
// ws-服务器
const WebSocketServer = require('ws').Server;
wss = new WebSocketServer({port: 12122});
wss.on('connection', (ws) => {
// 有客户端连接时, 打印一条日志
console.log('client connected');
// 并且创建'message'监听
ws.on('message', (message) => {
// 直接将消息打印出来
console.log(message);
});
});このコードでは：
私たちは、作成したWebSocketServerターゲットを
const WebSocketServer = require('ws').Server;このオブジェクトはによって達成されたwsモジュールから作成。
使用しWebSocketServer作成し、オブジェクトのws服务器名前のwssオブジェクト、およびモニターを12122端口。
オブジェクトWSS 2つのイベントは、コールバックをバインドされています。
connectionイベント、クライアント接続、ログを印刷します。
messageイベントには、直接的なメッセージが印刷されました。
index.htmlを導入jqueryの4.
するjQueryの公式サイトにjQueryライブラリをダウンロードしjquery.min.js、プロジェクトのルートフォルダ内のlibファイル。
そして、index.htmlを<head>と</head>ブロックは、次のコードを追加します。
<script type="text/javascript" src="lib\jquery.min.js"></script>
index.htmlを5.、ボタン入力ボックスを追加
index.htmlを内<body>と</body>最下ブロック、次のコードを追加します。
<div class="vertical-center">
<div class="container">
<p> </p>
<form role="form" id="chat_form" onsubmit="sendWsMessage(); return false;">
<div class="form-group">
<input class="form-control" type="text" name="message" id="message"
placeholder="Type text to echo in here" value="" />
</div>
<button type="button" id="send" class="btn btn-primary"
onclick="sendWsMessage();">
Send!
</button>
</form>
</div>
</div>このコードでは：
私たちは、最初の形式で入力ボックスを定義するformフォームが含まれている、input要素を、ユーザーが文字入力ボックス、およびHTML缶に記入できるmessage文字入力ボックスを取得します。
その後、我々はボタン定義button、ボタンをWebページに表示されているsend!、とするボタン左键点击事件onclickの機能をバインドするonclick="sendWsMessage();"ユーザーは、このときに左クリックし、send!トリガするボタンsendWsMessage()の機能を。
index.htmlに定義されたクライアントWS 6.
index.htmlを内<script>と</script>最下ブロック、次のコードを追加します。
const ws = new WebSocket("ws://localhost:12122");このコード：
私たちは、最初のインスタンス化しwebsocketたオブジェクトがありws、このマシンの使用はアドレス接続する、ためのパラメータlocalhost的12122端口あなたがLANで起動している場合、あなたもすることができlocalhost、あなたのIPネットワークを交換してください。
index.htmlを、カスタムボタンsendWsMessage（）関数7.
index.htmlを内<script>と</script>最下ブロック、次のコードを追加します。
function sendWsMessage() {
ws.send($('#message').val());
}このコードでは：
我々は、オブジェクトのWebSocketを呼び出すwsのsend()ターゲットアドレス、方法localhost的12122端口、データを送信するために、コンテンツデータが経由で#messageユーザーを意味し、買収输入框入力でデータを。
フロントエンド・プロセス：
ユーザーがクリックしたときに
send!取得するためにボタンを输入框通じ、内のコンテンツをwsするには、localhost的12122端口送信してください。
8.スタート
実行コマンド：
標高開始
この時点で、プログラム・インタフェース、があった输入框とsend!ボタン。
戻るcmdはcmdが、ログを印刷しました
client connected我々は、サーバー（main.jsを）WSので、それは、次のコードを追加します：
wss.on('connection', (ws) => {
// 有客户端连接时, 打印一条日志
console.log('client connected');プログラムが起動すると、接続が自動的に確立ので、このログを印刷しています。
あなたは例1を完了している、とのコードが削除されていない場合は、ブラウザからアクセスして再度試してhttp://localhost:8080/index.html、彼らは同じのログをプリントアウトするかどうか、？
今、私たちは、機能のメッセージを送信しよう：
プログラム・インタフェースの入力ボックスで、入力し
Hello electron!をクリックしsend!
正常に印刷ログに戻るCMD Hello electron!。
フロントエンド・プロセス：
ユーザーがクリックしたときに
send!取得するためにボタンを输入框通じ、内のコンテンツをwsするには、localhost的12122端口送信してください。
バックエンドプロセス：
WSサーバーがメッセージを受信すると、メッセージが直接印刷されます。
例3：プロセス管理
+電子環境1.デプロイのNode.js
Node.jsの+電子コース（A）：インストールと電子nodejs
2. main.jsでは、外部プロセスを起動
main.jsでは、次のコードを追加します。
const myChildProccess = require('child_process');
// 打开一个子进程notepad++
const mySpawn = myChildProccess.spawn(
'e:\\Application\\Notepad++\\notepad++.exe');このコードでは：
私たちは、作成したmyChildProccessターゲットを
const myChildProccess = require('child_process');このオブジェクトはによって達成されchild_process、主に子プロセスを作成するために使用されるモジュールの外に作成。
私たちは、このオブジェクトの呼び出しspwan()、子プロセスへのパスで、文体のパスに注意を払うこのメソッドは、文字列パラメータを取ります。子プロセスを起動し、メソッドを。
3.テスト
コマンドを実行します。
標高開始
プログラムは、メモ帳++も開始、その後、メモ帳を起動した後++このプログラムの子が開始されます。
電子は、子プロセスを開始することができ、自然にも、子供、どのようなプロセス管理をオフにするか、他に数えることができますか？
今、私たちは、次の手順に進み、プログラムを閉じます。
index.htmlを4.は、サブプロセスを閉じるためにボタンを追加します
在index.html的<body>和</body>块中的最下方, 添加如下代码:
<button onclick="killChildProcess()">关闭子进程</button>在这段代码中, 我们添加了一个按钮button, 在网页中按钮显示为关闭子进程, 并给该按钮绑定了一个函数killChildProcess().
5. 创建renderer.js, 并添加到项目中
在项目根目录创建一个renderer.js文件
添加如下代码:
function killChildProcess() {
// 发消息，由html的按钮调用，给主进程发消息，回调中关闭进程
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('kill-child-now', 'get async message');
}我们定义了关闭子进程按钮的点击函数killChildProcess(), 这个函数只有两行:
在函数的第一行, 创建了一个ipcRenderer对象
const ipcRenderer = require('electron').ipcRenderer;这个对象是通过ipcRenderer模块创建出来的, w3cschool是这样解释的:
ipcRenderer 模块是一个 EventEmitter 类的实例. 它提供了有限的方法，你可以从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的响应.
简单的说, main.js是主进程, renderes.js是渲染进程, 在渲染进程调用ipcRenderer.send()方法, 可以发送消息. 在主进程可以收到消息, 如果你给这个消息绑定了回调, 收到消息后, 就会触发回调.
在函数的第二行, 我们发送了kill-child-now消息.
现在我们把renderer.js引入到项目之中
和jquery相似, 在index.html的<head>和</head>块中, 添加如下代码:
<script type="text/javascript" src="renderer.js"></script>
6. 在main.js中, 监听消息, 绑定回调
在main.js的最下方, 添加如下代码:
// 监听消息, 关闭子进程
const ipcMain = require('electron').ipcMain;
ipcMain.on('kill-child-now', (e, appUrl)=>{
// 收到消息, 关闭进程
mySpawn.kill();
});在这段代码中:
我们创建了一个ipcMain对象
const ipcMain = require('electron').ipcMain;这个对象是通过ipcMain模块创建出来的, w3cschool是这样解释的:
ipcMain 模块是类 EventEmitter 的实例.当在主进程中使用它的时候，它控制着由渲染进程(web page)发送过来的异步或同步消息.从渲染进程发送过来的消息将触发事件.
简单的说, ipcMain是使用在主进程中的, 负责监听从渲染进程中发送出来的消息.
( 还记得吗? 渲染进程是通过ipcRenderer发送消息的. )
我们用ipcMain对象监听了消息kill-child-now, 并且绑定了一个回调函数. 一旦收到这个消息, 就会触发这个回调函数.
回调函数只有一行, 简单直接:
mySpawn.kill( )
关闭在第三步中创建的子进程notepad++.
7. 启动
执行命令:
npm start
和之前的测试一样, 在程序启动后, notepad++也紧跟着启动了, notepad++就是本程序启动的子进程.
不一样的是, 程序界面上出现了一个按钮关闭子进程.
点击这个按钮试试看!