網頁上的硬碟 SMART 檢測
ArOZ Online 雖然表面看上去是一個 NAS 作業系統,然而它並不是。說它是 NAS 作業系統倒不如說它是一個真正能用的 Web 桌面系統還比較好? 說實話 ArOZ Online 上面有很多不知為甚麼會出現的功能,由踩地雷到小畫家,跟 XP 的距離就只欠一個 3D彈珠台而已。而這次終於到了硬碟 SMART 檢測器了。這個是由 @alanyeung 開發的一個 ArOZ Online 系統組件,這是使用 smartctl 的多平台版本寫出來的,查詢結果在 json 化之後再經過 kernel 傳到 PHP 作顯示,雖然說上去滿簡單的東西,卻讓系統馬上變得更像 NAS 作業系統了。 SMART 檢測界面及硬碟的詳細數據 每一塊硬碟都能夠看到由 smartctl 回報的仔細的數據 這功能可以在 系統設定 > 檔案與儲存器 > 硬碟 SMART 裡面找到 就是這樣,ArOZ Online 又多了幾十 MB 的源碼了,整個系統現在包含著各種各樣的 binary 檔案現在差不多要到 780MB 了。之後在加入 Clustering 相關的代碼之後應該會更大吧?
一切都是 Windows 的錯:為甚麼 ArOZ Online 會出現 UM檔案 及 HEX資料夾 名命法
這甚麼爛東西,為甚麼要把一般的檔名全部編碼起來?那我用 Samba 的時候怎樣知道這個檔案是甚麼檔案?某 Beta 測試用家 沒錯,這一篇文章就是用來介紹到底為甚麼 ArOZ Online 要使用一個這麼麻煩的編碼方法來儲存檔案名稱及資料夾名稱。先由結論說起:這一切都是 Windows 的錯! 在這裡我先解釋一下甚麼是 UMFilename 跟 HexFoldername。這兩個是 ArOZ Online 用來給檔案及資料夾名稱編碼的方法,簡單來說就是把檔案名字使用 "inith" + bin2hex(原檔名) + "." + 原副檔名 和把資料夾使用 bin2hex(原資料夾名稱) 來編碼的一個神奇儲存方法。一般如果你在用 ArOZ Online 的檔案管理員你會看到有一些使用者自行上載的檔案會出現 綠色 或 藍色 底色的,那就是經編碼後的資料名稱。 HexFoldername 在 File Explorer 上顯示為綠色 UMFilename 在 File Explorer 上顯示為 藍色 故事起源: ArOZ Online Alpha ArOZ Online Alpha 是一套使用 PHP 5 編寫的影音串流系統,本來是用於 Windows + WAMP 的網頁伺服器架構上。而開發者我使用的 Windows 7 本身是 Big-5 編碼的,因此對中文的支援是完全 OK 的,但是我除了中文音樂之外也有聽日文的音樂,而問題就出在了這裡: PHP5 在讀取日文檔案名稱的時候出現亂碼。 ArOZ Online Alpha 的音樂播放界面 對於這個問題,基本上一般人想到的就只有這幾個解決方案: 把伺服器重灌,裝個 Unicode 版的 Windows 或者使用 Linux使用 Linux VM 並在 VM 裡面運行系統把檔案名稱全部放到 Database 裡,然後根據檔案路徑找到 Unicode 編碼的檔案名字。 然而,由於這套系統的無 DB 特性,第 3 點就不能用了;第 1, 2 點也太麻煩了完全不附合成本效益,所以最後的解決方法是:上載的時候使用 PHP 把檔名編碼成一個只使用 ASCII 的字串,然後以編碼字串來儲存,要讀取的時候從系統讀取檔名然後解碼出原本的檔名就好了。 可是,另一個問題就出現了。如果檔案名字本身就是以我編碼的方式儲存怎辦?例子: 音樂.mp3 -> abc.mp3 然後又剛好出現一個 abc.mp3?所以就乾脆直接在編碼後的檔案名字前加上 "inith" (Initiate with Hex Value),用以分辨是我方編碼的還是原本已經編碼的檔案,就是這樣,這種 UMFilename 的初型就出現了。 那為甚麼這種編碼方式叫做 UMFilename? 在剛開發 ArOZ Online Beta 的時候,最基礎的模組只有 Audio,Video 跟 Photo。基本上就是用以代替 ArOZ Online Alpha 的基本功能。 然而,這三個模組都需要上載功能,而由於 ArOZ Online Beta 的模組化設計原則,一個新的模塊被設計了出來: Upload Manager。 ArOZ Online Beta Audio 模組裡的 Upload Manager 界面 由於這個 Upload Manager 同樣遇上跟之前 Alpha 版本時的系統編碼問題,於是就直接把 Alpha 版的檔案名編碼方式搬過來了。而本來並沒有特別名稱的這種編碼方式也跟著這個模塊的名字改了起來,變成了 Upload Manager special File Naming Method,簡稱 UMFilename(或有人稱為 inith 命名法 或 inith filename)。 那 Hex Foldername 又是哪裡出來的? 在 ArOZ Online Beta 檔案管理員開發中的時候,一個 Bug 出現了。由於系統內的資料夾全部都是英文,直到桌面模組出現了之後才有機會因使用者新增資料夾的關系出現中文的資料夾名稱。到了中文的部分其實還是不大問題,因為中文還可以透過 PHP 的 mbstring 解決,然而日文的資料夾名稱就無法載入了。就結果而言,資料夾的命名需要另一個特別的編碼方法。 其實到發現這個問題的時候已經是滿後期的了,之前已經發生過不少因檔案名字過長而無法開啟的情況。(因為…
ArOZ Online 檔案選擇器
說到要在 WebApp 上讓使用者選擇檔案你會怎樣設計? 不少開發者都直接在 WebApp 裡面創建一個可以點選的列表就算數,能用但是不完美;所以在 ArOZ Online Base 系統架構裡面,我們在設計 File System 的時候就設計了一個可以輕易讓開發者使用的 檔案選擇器 ( File Selector ) 了。 ArOZ Online 系統下的 File Selector 所以,為啥我要用 FIle Selector?我自己幹一個就好了啊? 對,你也可以自己幹一個檔案選擇器,可是系統內建的 File Selector 有幾點用起來真的滿方便的。 預設支援 UM-FILENAME 及 HEX-FOLDERNAME 由於內建的檔案選擇器內建了 UM-Filename 跟 Hex-Foldername 的轉換程式,所以寫起來不必要特別自行處理這些特別的檔案命名方式。 Hex-foldername 顯示方法 UM-Filename 顯示方法 支援新增文件或資料夾 如果你需要新增一個文件或資料夾的時候,你可能要在 WebApp 裡面多加一個 <form> 元素,之後又需要增加一個處理的 php 甚麼的不是很麻煩嗎?用系統內置的 File Selector 就能直接省略這些問題,使用 Javascript callback 來取得使用者新建的文件名或資料夾名稱及位置。 新建文件的 File Selector 界面 使用方法 一般來說我們會建議使用者使用 Float Window 模式啟用 File Selector。然而,在一般網頁模式下啟動 File Selector 也是可以的,只不過使用體驗上會感覺到有點奇怪。首先,我們先從由 Float Window Mode 啟動 File Selector 的教學開始: 在 Float Window 模式下啟動檔案選擇器 先假設我們有這麼一個 function 來接收使用者選擇的檔案 function addFileFromSelector(fileData){ result = JSON.parse(fileData); for (var i=0; i < result.length; i++){ var filename = result[i].filename; var filepath = result[i].filepath; //DO SOMETHING HERE } } 以下是功能的啟動參數 ao_module_openFileSelector(uid,callBackFunctionName, windowWidth = 1080, windowHeight = 645, allowMultiple = false, selectMode = "file", newfname = "newfile.txt", umf = true) allowMultiple : 充許選擇多個檔案selectMode : (file / folder / mix / new),其意思為:只選擇檔案 / 只選擇資料夾 / 可選擇資料夾或檔案 / 新增文件或資料夾newfname : 新增檔案的預設名字(只在 selectMode = new 時有效)umf : 使用 UM-Filename 編碼檔案名字(只在 selectMode = new 時有效) //最基本的例子 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",undefined,undefined,true); //自定義選擇器大小 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",720,480,true); 你也可以透過 File Selector 為建立新的檔案名命,例子如下: var uid…
ArOZ Online 的 WebSocket 伺服器與 JWT 登入方法
ArOZ Online 一向也被人吐槽說沒有 Database 只能用 PHP 怎樣做即時通訊的 Web APP 呢?對,這真是一個好問題。 現在處理即時資料的方法 現在的 Web Desktop 模式即時更新方式 沒錯,這可能比你想像中的還要簡單,現在在 ArOZ Online 上處理即時資料的方法就是每隔一段時間做一次 AJAX Request 問伺服器的 php script 要一次資料。簡單來說就是每一個需要即時資料的模塊裡都會出現一段類似這樣的代碼: setInterval(function(){ $.ajax({url: url, success: function(data){ doSomething(data); }}); },1000); 這有甚麼不好嗎? 不好,這十分不好。首先, ArOZ Online 系統並沒有標準的 Database,所以 SQL 甚麼的都不能用。而且大部分模組開發者也不會這麼有空把 SQLite 塞進去,不少模塊也是直接拿 JSON 或 CSV 檔來儲存資料,就結果而言這種存取方法只會讓系統被 IO 速度卡住,想快也快不了。 所以 AOBWS 就出現了 甚麼是 aobws? aobws 就是 ArOZ Online 基礎系統的 WebSocket 伺服器。這系統有以下幾個特點: 支援 ArOZ Cluster 的 JWT 登入模式類 Minecraft 式指令模式以 Channel 分隔的 Broadcast 模式支援單用家多視窗登入 要用它的話跟一般 WebSocket 的使用方法很接近,簡單來說就是使用 ao_module 的 ws 模塊進行 init() 即可。以下是一個簡單的例子 aobws 網頁端啟動 function 例子 完整例子: https://github.com/aroz-online/aobws_demo/blob/master/index.php 那作為開發者 JWT 的部分我要怎樣處理? 這系統的好處就是你可以不用處理,只要填入 token = "" 即可自動彈出視窗讓使用者輸入 JWT token 值,是不是滿方便呢? JWT 請求授權界面 就是這樣,你的模組就能很方便的使用 aobws 作即時通訊了。 備注:如果我想用 aobws 作其他用途怎辦? 可以喔,你也可以在同一個 aob 主系統下使用多個 aobws 作其他用途。你可以在 SystemAOB/system/aobws 下找到啟動檔然後自行更改啟動設定。(主要是更改啟動的 port 跟 登入授權檢查的 URL)。以下為 aobws 的啟動參數: Usage of aobws.exe: -cert string Certification for TLS encription (default "server.crt") -endpt string ShadowJWT Validation Endpoint (default "http://localhost/AOB/SystemAOB/system/jwt/validate.php") -key string Server key for TLS encription (default "server.key") -port string HTTP service address (default "8000") -tls Enable TLS support on websocket (aka wss:// instead of ws://). Reqire -cert and -key