如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)公司專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

這篇文章將為大家詳細(xì)講解有關(guān)如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

概述

今天逛簡書的時(shí)候，發(fā)現(xiàn)了一個(gè)庫：

https://github.com/MZCretin/WifiTransfer-master

主要功能是這樣的，先口述一下，當(dāng)打開app，可以通過瀏覽器訪問一個(gè)地址，然后通過瀏覽器可以給手機(jī)上上傳apk（也支持已有apk刪除），然后手機(jī)端可以安裝、卸載該apk。

三張圖就明白了：

應(yīng)用啟動后：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

然后PC端訪問：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

拖拽apk上傳，即可上傳到手機(jī)端。

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

ok，大致介紹清楚了。

注意一定要在同一個(gè)網(wǎng)段。

先不談其用處到底有多大，很多時(shí)候我看到一個(gè)項(xiàng)目的時(shí)候，很少考慮其能干嘛，考慮最多的是它是如何實(shí)現(xiàn)的，我會么，不會那就學(xué)，至于能干嘛，那要等我學(xué)會之后？

那么思考下他的實(shí)現(xiàn)，這種上傳文件的方式，在PC端更加常見，上傳文件到服務(wù)器。

說到這，就可以想到，可能這個(gè)app在手機(jī)端搭建了一個(gè)服務(wù)器。

恩，沒錯(cuò)就是這樣的，在手機(jī)端搭建了一個(gè)服務(wù)器，這樣就可以通過html，將PC端的文件傳給手機(jī)端，然后手機(jī)端收到后再同步界面。

同時(shí)，也可以將手機(jī)上Sdcard上的文件，完全在PC上呈現(xiàn)。

手機(jī)端的Server利用的是該庫：https://github.com/koush/AndroidAsync

解析源碼的事情就不做了，有興趣可以自己學(xué)習(xí)下，接下來開始正片。

一個(gè)群友的問題

之所以會關(guān)注到這個(gè)庫，是因?yàn)樵趙anandroid群，有個(gè)哥們連續(xù)問了好久的一個(gè)問題，問題是：

如何通過瀏覽器輸入一個(gè)地址播放手機(jī)上的視頻

當(dāng)時(shí)也很多人回答，回答的核心都是正確的。

當(dāng)然我恰好看到這個(gè)庫，之前也沒推送過相關(guān)內(nèi)容，所以我決定寫個(gè)簡易的Demo.

當(dāng)然是Demo就沒有什么美觀可言了，僅為快速實(shí)現(xiàn)效果。

效果圖是這樣的：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

頁面上顯示手機(jī)上的視頻列表，然后點(diǎn)擊某個(gè)視頻，即開始播放該視頻。

有了上例參考，非常簡單。

注：部分代碼直接從上例copy。

該案例需要網(wǎng)絡(luò)和Sdcard權(quán)限！

先把服務(wù)器搭起來依賴庫

首先，依賴下我們搭建Server需要用到的庫：

compile 'com.koushikdutta.async:androidasync:2.+'

編寫簡易html

然后我們在assets下編寫一個(gè)html文件用于瀏覽器訪問，index.html

最簡單的即可：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>

<body>

嘿嘿嘿，連通了...

</body>

</html>

啟動服務(wù)，監(jiān)聽端口

public class MainActivity extends AppCompatActivity {
  private AsyncHttpServer server = new AsyncHttpServer();
  private AsyncServer mAsyncServer = new AsyncServer();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    server.get("/", new HttpServerRequestCallback() {
      @Override
      public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
        try {
          response.send(getIndexContent());
        } catch (IOException e) {
          e.printStackTrace();
          response.code(500).end();
        }
      }
    });

    server.listen(mAsyncServer, 54321);

  }

  @Override
  protected void onDestroy() {
    super.onDestroy();

    if (server != null) {
      server.stop();
    }
    if (mAsyncServer != null) {
      mAsyncServer.stop();
    }
  }

  private String getIndexContent() throws IOException {
    BufferedInputStream bInputStream = null;
    try {
      bInputStream = new BufferedInputStream(getAssets().open("index.html"));
      ByteArrayOutputStream baos = new ByteArrayOutputStream();
      int len = 0;
      byte[] tmp = new byte[10240];
      while ((len = 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 != null) {
        try {
          bInputStream.close();
        } catch (IOException e) {
          e.printStackTrace();
        }
      }
    }
  }
}

可以看到很簡單，創(chuàng)建AsyncHttpServer對象，我們在onCreate中調(diào)用get，對外設(shè)置一個(gè)get型的url監(jiān)聽，監(jiān)聽的url是/即根目錄。

然后調(diào)用listen，傳入端口號54321，開啟對該端口的監(jiān)聽。

onDestroy的時(shí)候停止服務(wù)器。

當(dāng)捕獲到對”/”的訪問時(shí)，讀取assets下的index.html返回給瀏覽器。

記得添加網(wǎng)絡(luò)權(quán)限。

好了，運(yùn)行demo，測試一下。

輸入地址，你的手機(jī)的IP:端口號。

注意電腦和手機(jī)在同一個(gè)網(wǎng)段！

然后你應(yīng)該看到如下效果圖：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

如果沒看到，那不用往下了，先找問題吧~

完善Demo

接下來，我們將手機(jī)上的mp4返回讓其在瀏覽器上顯示。

很簡單，既然我們可以監(jiān)聽/，返回一個(gè)index.html，我們就能監(jiān)聽另一個(gè)url，返回文件目錄。

server.get("/files", new HttpServerRequestCallback() {
  @Override
  public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
    JSONArray array = new JSONArray();
    File dir = new File(Environment.getExternalStorageDirectory().getPath());
    String[] fileNames = dir.list();
    if (fileNames != null) {
      for (String fileName : fileNames) {
        File file = new File(dir, fileName);
        if (file.exists() && file.isFile() && file.getName().endsWith(".mp4")) {
          try {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("name", fileName);
            jsonObject.put("path", file.getAbsolutePath());
            array.put(jsonObject);
          } catch (JSONException e) {
            e.printStackTrace();
          }
        }
      }
    }
    response.send(array.toString());
  }
});

我們監(jiān)聽/files這個(gè)Url，然后返回Sdcard根目錄的視頻文件，拼接成JSON返回。

這里如果你重新啟動，在瀏覽器上輸入：

http://192.168.1.100:54321/files

會看到一堆JSON數(shù)據(jù)：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

但是我們需要在剛才的html上顯示，所以這個(gè)請求應(yīng)該是剛才的Html頁面發(fā)起：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <title>文檔的標(biāo)題</title>
  <script type="text/javascript">
    $(function() {
      var now = new Date();
      var url = 'files' + '?' + now.getTime();
      // 請求JSON數(shù)據(jù)
      $.getJSON(url, function(data) {
        // 編輯JSON數(shù)組
        for (var i = 0; i < data.length; i++) {
          // 為每個(gè)對象生成一個(gè)li標(biāo)簽，添加到頁面的ul中
          var $li = $('<li>' + data[i].name + '</li>');
          $li.attr("path", data[i].path);
          $("#filelist").append($li);

        }
      });
    });
  </script>
</head>
<body>
  <ul id="filelist" ></ul>
</body>
</html>

可能很多朋友沒了解過js，不過應(yīng)該能看明白，$.getJSON獲取返回的JSON數(shù)組，然后遍歷為每個(gè)Json對象生成一個(gè)li標(biāo)簽，添加到頁面上。

這里用了jquery,對于js的也需要也請求處理，這里省略了，很簡單，看源碼即可。

此時(shí)訪問，已經(jīng)可以顯示出視頻目錄了：

如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析

接下來就是點(diǎn)擊播放了，在html里面有個(gè)標(biāo)簽叫video用于播放視頻的，他有個(gè)src屬性用于設(shè)置播放的視頻路徑。

所以我們要做的僅為：

點(diǎn)擊名字，拿到該視頻對應(yīng)的url，然后設(shè)置給video的src屬性即可。

那么視頻的url是什么？

剛才我們返回了視頻的路徑，所以我們只要再監(jiān)聽一個(gè)url，將根據(jù)傳入的視頻路徑，將視頻文件流返回即可。

server.get("/files/.*", new HttpServerRequestCallback() {
  @Override
  public void onRequest(AsyncHttpServerRequest request, AsyncHttpServerResponse response) {
    String path = request.getPath().replace("/files/", "");
    try {
      path = URLDecoder.decode(path, "utf-8");
    } catch (UnsupportedEncodingException e) {
      e.printStackTrace();
    }
    File file = new File(path);
    if (file.exists() && file.isFile()) {
      try {
        FileInputStream fis = new FileInputStream(file);
        response.sendStream(fis, fis.available());
      } catch (Exception e) {
        e.printStackTrace();
      } 
      return;
    }
    response.code(404).send("Not found!");
  }
});

我們又監(jiān)聽了一個(gè)url為files/xxx.*，捕獲到之后，拿到文件名，去SDCard找到該文件，返回文件流即可。

html端的代碼為：

<script type="text/javascript">
  $(function() {
    var now = new Date();
    // 拿到video對象
    var $video = $("#videoplayer");
    var url = 'files' + '?' + now.getTime();
    $.getJSON(url, function(data) {
      for (var i = 0; i < data.length; i++) {
        var $li = $('<li>' + data[i].name + '</li>');
        $li.attr("path", data[i].path);
        $("#filelist").append($li);

        // 點(diǎn)擊的時(shí)候，獲取路徑，設(shè)置給video的src屬性
        $li.click(function() {
          var p = "/files/" + $(this).attr("path");
          $video.attr("src", "/files/" + $(this).attr("path"));
          $video[0].play();
        });
      }
    });
  });
</script>

當(dāng)然頁面上body標(biāo)簽內(nèi)部也多了一個(gè)video標(biāo)簽。

 <video id="videoplayer" controls="controls">
 </video>

關(guān)于“如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

本文題目：如何搭建Android上的服務(wù)器實(shí)現(xiàn)隔空取物的示例分析-創(chuàng)新互聯(lián)
鏈接分享：http://muchs.cn/article26/djhscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、云服務(wù)器、域名注冊、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容