LayaBox结合Electron开发桌面应用

LayaBox是一个H5游戏以及应用非常棒的开发引擎,其可视化IDE更是用起来非常地爽,快速布局界面,更新UI皮肤都非常方便。

最近由于要开发一个桌面应用,需要集成http服务器以及websocket服务器,在这之前我已经用C#实现过,后来在学习NodeJs,发现NodeJs很好玩的,不过打包NodeJs应用目前知道有两种,nw.js、electron,第一种估计已经非常久没维护更新了,而且它的视频解码dll好像还不支持mp4,这让我很郁闷,于是经朋友介绍研究第二种解决方案。

electron真的很好用,其已经集成了Nodejs环境,而且视频解码也支持mp4,是个不错的选择, 而且LayaBox IDE 也是运行在electron ,也就是说IDE应该能直接运行nodejs的代码,于是测试了一下,在layabox建立的新项目的index.html文件里加入一些nodejs代码,比如os:

<html>
<head>
	<meta charset='utf-8' />
	<title>Server</title>
	<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
	/>
	<meta name='apple-mobile-web-app-capable' content='yes' />
	<meta name='full-screen' content='true' />
	<meta name='screen-orientation' content='portrait' />
	<meta name='x5-fullscreen' content='true' />
	<meta name='360-fullscreen' content='true' />
	<meta http-equiv='expires' content='0' />
	<meta name='laya' logoimg='logo.png' logobkcolor='#ffffff' screenorientation='landscape' cacheid='fffffffff' />
</head>
<body style='margin:0;overflow:none;overflow-x:hidden;overflow-y:hidden;background-color: #fff;'>
	<script type="text/javascript">
		 var os =require('os');console.log(os);console.log(os.tmpdir());
        </script>
  
	<script src='ldxx-server.max.js' loader='laya'></script>
	</script>
  </body>
</html>

然后运行,IDE成功输出os信息以及C:\Users\GOVENL~1\AppData\Local\Temp

注意:调试NodeJs必须在LayaIDE里调试,不要在谷歌调试,前面说了LayaIDE里集成Node环境.

现在代码是在inde.html运行,能否在其他js文件运行呢,由于我习惯as3,因此我在as3的工程里写代码,我们需要在index.html引入os,然后用as3代码调用os的一些方法和熟悉:

package{
	import laya.utils.Browser;
	public class Main
	{
		public function Main()
		{

                        //由于在index.html里var定义的属性或者方法,都可以通过Browser.window访问到,因此
			trace("from as3 :",Browser.window.os);
			trace("from as3 tmpDir:"+Browser.window.os.tmpDir());
		}
	}}

成功输出os对象以及路径,说明直接as3里写nodejs代码时可行的,接下来我先开始实现httpserver,需要安装express框架,如果时windows很简单,先去官网下载最新的nodejs,安装完毕后建议重启电脑,由于官方的nodejs集成的npm,因此我直接用npm进行安装express框架,控制台定位到我工程目录下bin/h5文件,然后npm install express,开始安装express框架,安装完毕后会在此目录下生成node_modules,里面包含了express框架以及一些依赖组件.


index.html引入express,http,path,fs组件:

<script type="text/javascript">
	         var express = require('express');
		 var http =require('http');
		 var path =require('path');
		 var os =require('os');
		 var fs = require('fs');	          </script>

然后写as3的代码:

package server{
	import laya.utils.Browser;
	
	/**
	 * ...
	 * @author 黄观文
	 */
	public class HttpServer
	{
	
                 
		public var app = Browser.window.express();
		public var port= 3001;
                public var FILES_PATH=Browser.window.os.homedir() + "/Documents/Files";

		
		public function HttpServer()
		{

		}
		
		public function openServer():void
		{
			try
			{
				app.get('/*', function(req, res, next)
				{
					var f:String = req.params[0];
					f = FILES_PATH + "/" + f;
					f = decodeURI(f);
					res.download(f);
				});
				Browser.window.http.createServer(app).listen(port);
				trace("listen http server : port-" + port);
			}
			catch (err:Error)
			{
				alert(err.message);
			}
		
		}
	
	}}

由于我只是需要做一个文件的http服务器,供我客户端进行访问这个服务器指定的本地路径下的文件,因此用的download,浏览器打开http://127.0.0.1:3001,如果不是404,那么说明你成功了,试着往服务器指定的路径里放个图片文件,比如img.jpg,然后浏览器http://127.0.0.1:3001/img.jpg,浏览器马上下载此图片,你也可以尝试其他电脑访问此服务器 http:// 服务器ip:3001/img.jpg,肯定是同样的效果 ,到此,http服务器完成,接下来是websocket服务器,同样需要在index.html引入对应的组件

<script type="text/javascript">
	         var express = require('express');
		 var http =require('http');
		 var path =require('path');
		 var os =require('os');
		 var fs = require('fs');	 
		 var WebSocketServer = require('ws').Server;
           
    </script>

然后编写websocket serve代码:

package server{
	import laya.utils.Browser;
	/**
	 * ...
	 * @author 黄观问
	 */
	public class WsServer
	{
		private var wss = null;
                public var port=3005;
		public function WsServer()
		{
			
			
		}
		
		public function openServer():void
		{
			try
			{
				
				wss = new Browser.window.WebSocketServer({port: port});
				wss.on("error", function(e)
				{
					trace(e);
				});
				
				//
				wss.on('connection', function(conn)
				{
                                        trace("new client",conn);
					trace("client length",wss.clients.length);
					conn.on('message', function(message)
					{
						trace("from client message: "+message);
					});
					
					conn.on('error', function()
					{
						trace("client error");
					});
					
					conn.on('close', function()
					{
						trace("client close");
					});
				
				});
				console.log("Websocketserver: " + port);
				
			}
			catch (err:Error)
			{
				alert(err.message);
			}
		}
		
	}}

运行 ,你可以尝试ws连接此服务器.,然后用electron进行打包应用,关于electron 的环境安装以及使用百度上很多,这里就不多讲了

先发布layaair项目,然后在发布好的项目下加入main.js文件:

onst electron = require('electron');// 控制应用生命周期的模块const {app} = electron;// 创建本地浏览器窗口的模块const {BrowserWindow} = electron;
 // 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的// 时候该窗口将会自动关闭let win;function createWindow() {
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 600, height: 400,show:true,title:"server"});
  // 并且装载应用的index.html页面
  win.loadURL(`file://${__dirname}/index.html`);
 
  // 打开开发工具页面
  //win.webContents.openDevTools();

  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
    // 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
    win = null;
  });}
 // 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。// 有些API只能在该事件发生后才能被使用。app.on('ready', createWindow);/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */// 当所有的窗口被关闭后退出应用app.on('window-all-closed', () => {
  // 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }});
 app.on('activate', () => {
  // 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }});

然后加入package.json文件:

{
  "name": "server",
  "version": "1.0.1",
  "description": "服务器",
  "main": "main.js",
  "dependencies": {
    "express": "^4.14.0",
    "ws": "^1.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "index.html"
  },
  "author": "迪赞科技",
  "license": "ISC"}

在electron的resources里新建app文件夹, 然后把发布的layaair代码以及main.js和package.json拖到此文件夹,运行electron即可,到此,桌面应用可以拿去用了,对于打包什么的,工具很多,我习惯inno,大家自己搜

laya electron

网站导航