H5游戏开发上的先天不足
做H5游戏开发时,通常都会遇到些问题。
这里总结下本人开发过程中遇到的:
- 开tomcat、nginx、apache之类的web服务器,提供网址
- 需要支持webpack、browserify之类的打包工具,使之能require模块编程。可以使用node.js库。
- 使用gulp、webpack-dev-server之类的热更调试服务器
- websocket到tcp服务器的代理。方便网页直接访问tcp服务器
- 解决浏览器跨域问题
下面,对于每小点,依次详细解释之。
支持Node.js库的H5编程
很久以前的JS编程是不支持模块化编程的。
即类似 require
、module
之类的概念是没有的。
现在主流的,都会使用npm、nodejs。
为了在网页上可以使用require,则必须使用 webpack、browserify之类的打包工具。
使js文件代码,转化为页面能识别的js语法。
本系列使用的webpack打包工具。
所有辅助工具都是围绕webpack,来做集成的。
热更新(自动打包、自动刷新页面)
js的热更新网上搜下一大箩。
然而绝大多数都是不能简单使用的。因为需要和webpack做配合。
总结下,需要做下面的几件事:
- 能监视js、html、css等文件变化
- 能触发变化事件,并重新使用webpack打包
- 能通知页面自动刷新
因此,最终,通过集成下面的内容,实现了上述功能:
- express
- gulp
- gulp-webpack
- gup-connect
主要代码示例:
webdevjs.start = function (configfile) {
if (!configfile) {
configfile = './webpack.config.js';
}
configfile = process.cwd() + '/' + configfile;
var config = require(configfile);
gulp.task('html', function () {
gulp.src(config.devServer.watch_html)
.pipe(gulpConnect.reload());
});
gulp.task('webpack', function () {
gulpWebpack(require(configfile))
.pipe(gulp.dest('.'))
.pipe(gulpConnect.reload());
});
gulp.task('default', function () {
webdevjs.runweb(config);
gulpConnect.server({
livereload: true,
port: config.devServer.port,
middleware: function (connect, opt) {
return [
httpProxyMiddleware('/', {
target: 'http://localhost:' + String(config.devServer.port + 1),
changeOrigin: true
})
];
}
});
gulp.watch(config.devServer.watch_html, ['html']);
gulp.watch(config.devServer.watch_js, ['webpack']);
});
gulp.start();
};
TCP服务代理
H5网页现在做长连接的有2种方式:
- 通过flash对象来做tcp长连接
- 使用websocket来做基于websocket协议的长连接
由于flash as3编程,在手机端不是很流行。因此现在主流使用websocket。
因此,H5应用网络模块通常2种情况:
- 页面WebSocket => 支持websocket协议的游戏服务器
- 页面WebSocket => TCP代理服务器 => TCP协议游戏服务器
正式外网服务必定使用1。
其他用途,可1、可2。
浏览器跨域问题
正式情况不应该出现浏览器跨域问题。
即,游戏服务器必须提供可跨域的方式。如 支持 GET 方式请求,则浏览器有方法绕过跨域问题。
否则,则只能在浏览器端通过增加些启动参数,关闭浏览器某些安全功能。来绕过跨域问题。
通用的开发用web服务器
为了便利开发,可以把上述这些问题,集成到一个通用的辅助web服务器中。
可以参考本人github上的项目webdev。网址: