STF簡單修改實現安卓多機同屏控制

jielite發表於2016-11-16
安卓
背景：
STF是一個非常優秀的安卓真機管理平臺，近期團隊同學在看安卓真機適配方面的事情，想到如果採用STF來進行多機同屏控制那將是一件非常nice的事情。

動手：
初步看了一下STF的程式碼，前端主要是採用WebSocket與後端進行通訊，那我們只要找到通訊類，在他原來的send上面加上foreach，那麼就完美了。

簡單嘗試，週末用Ubuntu裝了個開發環境，初步實現了多臺安卓機的同屏控制，但有些細節方面還需要優化，比如不同解析度需要做縮放。

1.  找到前後端通訊模組, stf/control, 將整個資料夾複製一份，生成：stf/batch-control， 其中control-service.js 改名為：batch-control-service.js

2. 開啟stf/batch-control/index.js，修改原來的control為batchControl:

module.exports = angular.module(`stf/batch-control`, [
  require(`stf/socket`).name,
  require(`stf/transaction`).name,
  require(`stf/keycodes`).name
])
  .factory(`BatchControlService`, require(`./batch-control-service`))

 

3. 開啟改名後的：batch-control-service.js, 同樣修改原來的controlService為batchControlService.

4. 定義deviceControlArray,用來存放多機同屏的機器列表，注意這裡為了簡單實現，僅僅用了API獲取了全部機器，實際操作建議按裝置List選擇後存入Array。

  var deviceControlArray = new Array()

  if (deviceControlArray.length == 0)
  {
    var devices = "";
      devices = oboe(`/api/v1/devices`)

      devices.node(`devices[*]`, function(device) {
        if (device.present)  //僅將線上的裝置加入Array
        {
          deviceControlArray.push(device.channel)
        }
      })
  }

 

5. 繼續修改batch-control-service.js，可以看到傳送WS訊息方法為：sendOneWay，就在這裡給他套個foreach

    function sendOneWay(action, data) {
      deviceControlArray.forEach(function(channel)
      {
        socket.emit(action, channel, data)
      })
    }

 要做不同解析度適配的，可以考慮在這裡的data做點手腳。

6.做個多機同屏操作介面吧，同樣把control-panes資料夾複製一份，自行修改為其他名字，然後把其中原來應用stf/control的地方全部修改為我們的 stf/batch-control，這樣在這裡操作的任何指令將群發到所有機器。

7.新增多機螢幕顯示
上面已經實現了指令群發，接下來就可以把其他手機的螢幕嵌入頁面顯示了，最簡單的方法當然是standalone了。這樣我們在頁面上面只要嵌入standalone的iframe就一切都搞定了。
進入standalone模式只要在URL最後加上?standalone 即可
比如原來的單機控制URL是：
http://192.168.1.100:7100/#!/control/06157df6a99bc02e
那麼standalone模式的URL就是：
http://192.168.1.100:7100/#!/control/06157df6a99bc02e?standalone
把這個URL嵌入iframe就好啦。

最後：
實際找了4檯安卓手機，再修改後的程式碼上面進行執行，發現同屏操作幾乎無延遲，改造完成。

相關文章