手机app内置http服务器实现电脑端访问手机html页面（上）

112 阅读 0 评论 74 点赞

我是靠谱客的博主追寻音响，这篇文章主要介绍手机app内置http服务器实现电脑端访问手机html页面（上），现在分享给大家，希望可以做个参考。

一、准备及原型

前言这个暑假接了一个小项目，用cordova实现一个表型采集的app，其中一个文件传输导入导出的的需求使：手机端开启服务，在同一个wifi环境下，电脑浏览器进行访问手机ip地址，然后显示出手机暴露的页面，再进行相关的操作。
第一念头：什么鬼的需求！

但是还是硬着头皮按照产品经理学长的的意思，画出该功能相关的原型：
原型
手机端：

电脑端：

二、httpd插件

1..思路分析
大概就是上述原型的意思了，这个有点像小米文件管理中的远程管理功能，不过它的是ftp协议的服务，只能进行简单的文件传输。而需求是可以访问到html页面。
按照这种思路即是将手机变成一个http服务器，这样需要重写很多东西，这个项目是基于html的移动app，采用的是cordova 框架，于是我先去cordova 官方插件，功夫不负有心人，找到了一个httpd的插件。

复制代码

1
cordova plugin add cordova-plugin-httpd

添加成功
2. api：先是看了一下readme提供的api，嗯只有四个分别是启动服务、停止服务，显示手机暴露的ip、显示根目录

复制代码

1
2
3
4
startServer( options, success_callback, error_callback );
stopServer( success_callback, error_callback );
getURL( success_callback, error_callback );
getLocalPath( success_callback, error_callback );

三、使用及开发

1 . index.html界面分别创建四个按钮

复制代码

1
2
3
4
5

<p><button onclick="startServer('');">Start CorHttpd at assets/www/filetransfer</button></p>
<p><button onclick="startServer('/');">Start CorHttpd at /</button></p>
<p><button onclick="stopServer();">Stop CorHttpd</button></p>
<p><button onclick="updateStatus();">Check Status</button></p>

2 .根据插件的示例编写js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 var httpd = null;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
httpd = ( cordova && cordova.plugins && cordova.plugins.CorHttpd ) ? cordova.plugins.CorHttpd : null;
startServer("");
}
function updateStatus() {
document.getElementById('location').innerHTML = "document.location.href: " + document.location.href;
if( httpd ) {
httpd.getURL(function(url){
if(url.length > 0) {
document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
} else {
document.getElementById('url').innerHTML = "server is down.";
}
});
httpd.getLocalPath(function(path){
document.getElementById('localpath').innerHTML = "<br/>localPath: " + path;
});
} else {
alert('CorHttpd plugin not available/ready.');
}
}
function startServer( wwwroot ) {
if ( httpd ) {
httpd.getURL(function(url){
if(url.length > 0) {
document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
} else {
httpd.startServer({
'www_root' : wwwroot,
'port' : 8080
}, function( url ){
document.getElementById('url').innerHTML = "server is started: <a href='" + url + "' target='_blank'>" + url + "</a>";
}, function( error ){
document.getElementById('url').innerHTML = 'failed to start server: ' + error;
});
}
},function(){});
} else {
alert('CorHttpd plugin not available/ready.');
}
}
function stopServer() {
if ( httpd ) {
httpd.stopServer(function(){
document.getElementById('url').innerHTML = 'server is stopped.';
},function( error ){
document.getElementById('url').innerHTML = 'failed to stop server' + error;
});
} else {
alert('CorHttpd plugin not available/ready.');
}
}
function createFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
alert('File creation successfull!')
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}

3 . 运行
安装app,手机端并启动服务，当电脑端和手机在同一网络环境下，电脑端访问地址。
手机端：
这里写图片描述
电脑端

是我们手机端的index.html，也就是说暴露的就是我们编辑的页面，之前的需求端要求的页面是自定义的，所以应该可以自定义一个页面让手机端进行暴露。

4 . 修改源码指定要暴露的页面
这里写图片描述
找到插件的java源码在选中的java 文件中查找index.html,改为自己制订暴露的html页面

复制代码

1
2
3
4
5
6
7
8
9
10

if ( res == null )
{
// First try index.html and index.htm
if ( new AndroidFile( f, "filetransfer.html" ).exists())
f = new AndroidFile( homeDir, uri + "/filetransfer.html" );
else if ( new AndroidFile( f, "filetransfer.htm" ).exists())
f = new AndroidFile( homeDir, uri + "/filetransfer.htm" );
// No index file, list the directory if it is readable
else if ( allowDirectoryListing && f.canRead() )