概述
今天逛简书的时候&＃xff0c;发现了一个库&＃xff1a;
- https://www.jianshu.com/p/e0c172c4e3bf
- https://github.com/MZCretin/WifiTransfer-master
主要功能是这样的&＃xff0c;先口述一下&＃xff0c;当打开app&＃xff0c;可以通过浏览器访问一个地址&＃xff0c;然后通过浏览器可以给手机上上传apk&＃xff08;也支持已有apk删除&＃xff09;&＃xff0c;然后手机端可以安装、卸载该apk。
三张图就明白了&＃xff1a;
应用启动后&＃xff1a;
然后PC端访问&＃xff1a;
拖拽apk上传&＃xff0c;即可上传到手机端。
ok&＃xff0c;大致介绍清楚了。
注意一定要在同一个网段。
先不谈其用处到底有多大&＃xff0c;很多时候我看到一个项目的时候&＃xff0c;很少考虑其能干嘛&＃xff0c;考虑最多的是它是如何实现的&＃xff0c;我会么&＃xff0c;不会那就学&＃xff0c;至于能干嘛&＃xff0c;那要等我学会之后&＃xff1f;
那么思考下他的实现&＃xff0c;这种上传文件的方式&＃xff0c;在PC端更加常见&＃xff0c;上传文件到服务器。
说到这&＃xff0c;就可以想到&＃xff0c;可能这个app在手机端搭建了一个服务器。
恩&＃xff0c;没错就是这样的&＃xff0c;在手机端搭建了一个服务器&＃xff0c;这样就可以通过html&＃xff0c;将PC端的文件传给手机端&＃xff0c;然后手机端收到后再同步界面。
同时&＃xff0c;也可以将手机上Sdcard上的文件&＃xff0c;完全在PC上呈现。
手机端的Server利用的是该库&＃xff1a;
- https://github.com/koush/AndroidAsync
解析源码的事情就不做了&＃xff0c;有兴趣可以自己学习下&＃xff0c;接下来开始正片。
一个群友的问题
之所以会关注到这个库&＃xff0c;是因为在wanandroid群&＃xff0c;有个哥们连续问了好久的一个问题&＃xff0c;问题是&＃xff1a;
当时也很多人回答&＃xff0c;回答的核心都是正确的。
当然我恰好看到这个库&＃xff0c;之前也没推送过相关内容&＃xff0c;所以我决定写个简易的Demo.
当然是Demo就没有什么美观可言了&＃xff0c;仅为快速实现效果。
效果图是这样的&＃xff1a;
页面上显示手机上的视频列表&＃xff0c;然后点击某个视频&＃xff0c;即开始播放该视频。
有了上例参考&＃xff0c;非常简单。
注&＃xff1a;部分代码直接从上例copy。 该案例需要网络和Sdcard权限&＃xff01;
先把服务器搭起来
依赖库
首先&＃xff0c;依赖下我们搭建Server需要用到的库&＃xff1a;
compile &＃39;com.koushikdutta.async:androidasync:2.&＃43;&＃39;
编写简易html
然后我们在assets下编写一个html文件用于浏览器访问&＃xff0c;index.html
最简单的即可&＃xff1a;
<html>
<head><meta charset&＃61;"UTF-8">
head><body>嘿嘿嘿&＃xff0c;连通了...body>html>
启动服务&＃xff0c;监听端口
public class MainActivity extends AppCompatActivity {private AsyncHttpServer server &＃61; new AsyncHttpServer();private AsyncServer mAsyncServer &＃61; new AsyncServer();&＃64;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);server.get("/", new HttpServerRequestCallback() {&＃64;Overridepublic void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {try {response.send(getIndexContent());} catch (IOException e) {e.printStackTrace();response.code(500).end();}}});server.listen(mAsyncServer, 54321);}&＃64;Overrideprotected void onDestroy() {super.onDestroy();if (server !&＃61; null) {server.stop();}if (mAsyncServer !&＃61; null) {mAsyncServer.stop();}}private String getIndexContent() throws IOException {BufferedInputStream bInputStream &＃61; null;try {bInputStream &＃61; new BufferedInputStream(getAssets().open("index.html"));ByteArrayOutputStream baos &＃61; new ByteArrayOutputStream();int len &＃61; 0;byte[] tmp &＃61; new byte[10240];while ((len &＃61; bInputStream.read(tmp)) > 0) {baos.write(tmp, 0, len);}return new String(baos.toByteArray(), "utf-8");} catch (IOException e) {e.printStackTrace();throw e;} finally {if (bInputStream !&＃61; null) {try {bInputStream.close();} catch (IOException e) {e.printStackTrace();}}}}
}
可以看到很简单&＃xff0c;创建AsyncHttpServer对象&＃xff0c;我们在onCreate中调用get&＃xff0c;对外设置一个get型的url监听&＃xff0c;监听的url是/即根目录。
然后调用listen&＃xff0c;传入端口号54321&＃xff0c;开启对该端口的监听。
onDestroy的时候停止服务器。
当捕获到对"/"的访问时&＃xff0c;读取assets下的index.html返回给浏览器。
记得添加网络权限。
好了&＃xff0c;运行demo&＃xff0c;测试一下。
输入地址&＃xff0c;你的手机的IP:端口号。
注意电脑和手机在同一个网段&＃xff01;
然后你应该看到如下效果图&＃xff1a;
如果没看到&＃xff0c;那不用往下了&＃xff0c;先找问题吧~
完善Demo
接下来&＃xff0c;我们将手机上的mp4返回让其在浏览器上显示。
很简单&＃xff0c;既然我们可以监听/&＃xff0c;返回一个index.html&＃xff0c;我们就能监听另一个url&＃xff0c;返回文件目录。
server.get("/files", new HttpServerRequestCallback() {&＃64;Overridepublic void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {JSONArray array &＃61; new JSONArray();File dir &＃61; new File(Environment.getExternalStorageDirectory().getPath());String[] fileNames &＃61; dir.list();if (fileNames !&＃61; null) {for (String fileName : fileNames) {File file &＃61; new File(dir, fileName);if (file.exists() && file.isFile() && file.getName().endsWith(".mp4")) {try {JSONObject jsonObject &＃61; new JSONObject();jsonObject.put("name", fileName);jsonObject.put("path", file.getAbsolutePath());array.put(jsonObject);} catch (JSONException e) {e.printStackTrace();}}}}response.send(array.toString());}
});
我们监听/files这个Url&＃xff0c;然后返回Sdcard根目录的视频文件&＃xff0c;拼接成JSON返回。
这里如果你重新启动&＃xff0c;在浏览器上输入&＃xff1a;
http://192.168.1.100:54321/files
会看到一堆JSON数据&＃xff1a;
但是我们需要在刚才的html上显示&＃xff0c;所以这个请求应该是刚才的Html页面发起&＃xff1a;
<html>
<head><meta charset&＃61;"UTF-8"><script src&＃61;"jquery-1.7.2.min.js" type&＃61;"text/Javascript">script><title>文档的标题title><script type&＃61;"text/Javascript">$(function() {var now &＃61; new Date();var url &＃61; &＃39;files&＃39; &＃43; &＃39;?&＃39; &＃43; now.getTime();$.getJSON(url, function(data) {for (var i &＃61; 0; i var $li &＃61; $(&＃39;&＃39; &＃43; data[i].name &＃43; &＃39;&＃39;);$li.attr("path", data[i].path);$("#filelist").append($li);}});});script>
head><body><ul id&＃61;"filelist" style&＃61;"float:left;">ul>body>html>
可能很多朋友没了解过js&＃xff0c;不过应该能看明白&＃xff0c;$.getJSON获取返回的JSON数组&＃xff0c;然后遍历为每个Json对象生成一个li标签&＃xff0c;添加到页面上。
这里用了jquery,对于js的也需要也请求处理&＃xff0c;这里省略了&＃xff0c;很简单&＃xff0c;看源码即可。
此时访问&＃xff0c;已经可以显示出视频目录了&＃xff1a;
接下来就是点击播放了&＃xff0c;在html里面有个标签叫video用于播放视频的&＃xff0c;他有个src属性用于设置播放的视频路径。
所以我们要做的仅为&＃xff1a;
- 点击名字&＃xff0c;拿到该视频对应的url&＃xff0c;然后设置给video的src属性即可。
那么视频的url是什么&＃xff1f;
刚才我们返回了视频的路径&＃xff0c;所以我们只要再监听一个url&＃xff0c;将根据传入的视频路径&＃xff0c;将视频文件流返回即可。
server.get("/files/.*", new HttpServerRequestCallback() {&＃64;Overridepublic void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {String path &＃61; request.getPath().replace("/files/", "");try {path &＃61; URLDecoder.decode(path, "utf-8");} catch (UnsupportedEncodingException e) {e.printStackTrace();}File file &＃61; new File(path);if (file.exists() && file.isFile()) {try {FileInputStream fis &＃61; new FileInputStream(file);response.sendStream(fis, fis.available());} catch (Exception e) {e.printStackTrace();} return;}response.code(404).send("Not found!");}
});
我们又监听了一个url为files/xxx.*&＃xff0c;捕获到之后&＃xff0c;拿到文件名&＃xff0c;去SDCard找到该文件&＃xff0c;返回文件流即可。
html端的代码为&＃xff1a;
当然页面上body标签内部也多了一个video标签。
到这里&＃xff0c;所以的代码就介绍完了~~
小结
回头看&＃xff0c;其实就是app中启动服务器&＃xff0c;监听一些url&＃xff0c;然后针对性的返回文本、json、文件流等。
当然了&＃xff0c;可以做的时候也挺多的&＃xff0c;甚至可以做个PC版本的文件浏览器。
可能有很多人对html,js不太熟悉&＃xff0c;不过还是建议简单了解下&＃xff0c;或者敲一下本例&＃xff0c;因为本例代码很少&＃xff0c;值得作为上手教程。
源码地址&＃xff1a;
https://github.com/hongyangAndroid/demo_ShowPhoneMp4
京公网安备 11010802041100号