thrift api 使用: HTML

作者： -
在這一篇文章中,
我們將介紹如何使用HTML透過PHP讀取hbase,

我們安裝的目錄結構為:
hadoop                     /opt/hadoop
hbase                        /opt/hbase
網頁根目錄             /var/www/
hbase的php目錄      /var/www/hbase
thrift php                  /var/www/hbase/thrift
php存放目錄           /var/www/php

測試程式之前，請先確定hbase , hadoop 都有正常運作中
$ bin/hbase thrift start 尚在執行

以下是我們的範例程式(example.php):

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <head>
    <script>
    function getUser()
    {
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
        if(xmlhttp != null)
        {
            xmlhttp.onreadystatechange = stateChanged;
            xmlhttp.open("Get","php/example.php",true);
            xmlhttp.send();
        }
    }
    else
    {
        alert('does not support XMLHttpRequest');
    }
    }

    function stateChanged()
    {
    if(xmlhttp.readyState == 4)
    {
        if(xmlhttp.status = 200)
        {
            var point  = xmlhttp.responseText;
            Update_User(point);
        }
    }
    }

    function Update_User(point)
    {
    document.write("JSON : <br>" + point + "<br> <br>");

    var cart = JSON.parse(point);
    var key, i = 0;
    for(i=0 ; i<cart.length; i++) {
        document.write("USER: " + i + ", ");
        document.write("MAC: " + cart[i].User + ", ");
        document.write("X: " + cart[i].Xlocation + ", ");
        document.write("Y: " + cart[i].Ylocation + "<br>");
    }
    }

    </script>

    </head>

    <body>
    <script>
    getUser();
    setInterval(function(){getUser()}, 5000);
    </script>
    </body>

    </html>
在example.html這個網頁中,
會定期讀取UserTable的資料, 並且顯示於網頁上,
在網頁的一開始, 我們先宣告第一個javascript function: getUser(),
在這個function中, 我們宣告PHP(example.php)的位置,
並且透過xmlhttp的物件開啟example.php,

function getUser()
{
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
        if(xmlhttp != null)
        {
            xmlhttp.onreadystatechange = stateChanged;
            xmlhttp.open("Get","php/example.php",true);
            xmlhttp.send();
        }
    }
    else
    {
        alert('does not support XMLHttpRequest');
    }
}

在stateChanged()中, 則是利用變數(var point)儲存JSON字串,
並且將所得到的字串放入Update_User()中,

function stateChanged()
{
    if(xmlhttp.readyState == 4)
    {
        if(xmlhttp.status = 200)
        {
            var point  = xmlhttp.responseText;
            Update_User(point);
        }
    }
}
最後, 在Update_User()程式中,
我們將所得到的JSON字串先印出來,
並且根據字串的大小以FOR迴圈印出所讀取的內容,
注意, 由於是HTML的格式, 換行符號是: <br>
而不是我們常用的: '\n'

function Update_User(point)
{
    document.write("JSON : <br>" + point + "<br> <br>");
 
    var cart = JSON.parse(point);
    var key, i = 0;
    for(i=0 ; i<cart.length; i++) {
        document.write("USER: " + i + ", ");
        document.write("MAC: " + cart[i].User + ", ");
        document.write("X: " + cart[i].Xlocation + ", ");
        document.write("Y: " + cart[i].Ylocation + "<br>");
    }
}
在HTML的body中,
我們每隔5秒(5000ms)執行一次getUser()指令,
將所得到的結果顯示於網頁上:

<body>
<script>
getUser();
setInterval(function(){getUser()}, 5000);
</script>
</body>

以下是在網頁上的顯示結果:
JSON :
[{"User":"3C:E0:72:B6:29:B9","Xlocation":"-1.6371960645819712","Ylocation":"-0.6972200627495914"},{"User":"5C:FF:35:77:43:F4","Xlocation":"55.018162315153376","Ylocation":"38.813627069491766"},{"User":"B8:B4:2E:32:54:2D","Xlocation":"4.5085225496644235","Ylocation":"7.778994967910233"},{"User":"C4:43:8F:F3:EB:D6","Xlocation":"52.80050407884881","Ylocation":"23.093696604459726"},{"User":"DC:C7:93:DA:2B:7C","Xlocation":"9.865865062060452","Ylocation":"26.721484611594647"}]

USER: 0, MAC: 3C:E0:72:B6:29:B9, X: -1.6371960645819712, Y: -0.6972200627495914
USER: 1, MAC: 5C:FF:35:77:43:F4, X: 55.018162315153376, Y: 38.813627069491766
USER: 2, MAC: B8:B4:2E:32:54:2D, X: 4.5085225496644235, Y: 7.778994967910233
USER: 3, MAC: C4:43:8F:F3:EB:D6, X: 52.80050407884881, Y: 23.093696604459726
USER: 4, MAC: DC:C7:93:DA:2B:7C, X: 9.865865062060452, Y: 26.721484611594647

參考資料:
http://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
http://www.wibibi.com/info.php?tid=346

留言

張貼留言

熱門文章

LTE筆記: RSRP, RSSI and RSRQ

作者： -
圖片
在一般通訊系統中, 我們常用 RSSI (Received Signal Strength Indication) 來表示訊號強度,  其單位為 (dBm), 可以轉換成功率大小 (mW): https://en.wikipedia.org/wiki/DBm [註] dBm 的原意即是: (dB) reference to (m)W, 因此, 1 W = 10*log10(1000mW) = 30dBm. 在 LTE 通訊系統中, 除了 RSSI 之外, 又額外定義了兩個用以標示訊號強度的數值: RSRP 和 RSRQ 以下, 我們將介紹 RSRP, RSRQ 和 RSSI 的不同： Reference Symbol Received Power (RSRP) RSRP 為 UE 量測 Reference Signals (RS) 的平均訊號強度, DRS 為基地台在下行訊號中, 於固定 RB (Resource Block) 上傳送的訊號, 由於這些訊號具有特定的傳送格式, 接收端便可以解出這些控制訊號的強度, 對於不同的相鄰基地台, 甚至是同一基地台不同的天線, 可以透過不同的 RS 配置, 讓使用者得知不同目標的量測數值, 如下圖所示: 紅色為 RS, 不同基地台或天線使用不同的 RS 排列方法, 可分開量測 來自: https://api.semanticscholar.org/CorpusID:22030582 RSRP 的回報由 UE 進行 Measurement Report, 回傳給基地台, 其中, 關於 Measurement Report 的設置定義於 RRC 的規範中, 我們之後有機會再提, RSRP 的量測, 通常在換手 (handover) 時進行量測, 用以指出目標基地台的訊號強度, 其中, UE 所量測的數值, 將藉由下表進行轉換 (訊號強度 (dBm) - (-140)), 並回報給 eNB 作為換手的決策使用: (3GPP Reference: TS 36.133) RSSI (Received Signal Strength Indication)  RSSI 是 UE 接收到的 wide-band 訊號強度, 包含 DRS 以及其他 RB 的訊號強度 (第一張
閱讀完整內容

[WiFi] WiFi 網路的識別: BSS, ESS, SSID, ESSID, BSSID

作者： -
圖片
在 WiFi 網路中, 一個基本的識別方式就是 SSID (Service Set Identifier), 也就是我們口語中的 "WiFi 網路名稱", 然而, 此網路事實上是一個服務集合 (Service Set) 的概念, 而一個服務群集, 也可以對應到一個基本的無線網路, 包含: 一個 WiFi AP 以及多個 WiFi 使用者, 對於剛剛這種簡單的網路架構, 又稱為 BSS (Basic Service Set), 若是多個 BSS 都使用同一個 SSID, 則稱為 ESS (Extend Service Set), 如下圖所示: 來自: https://ppt.cc/fXIvex 對於 ESS 來說, 有兩個假設, 第一, 底下的 BSS 必須是相鄰 (有交疊範圍) 第二, 這些 BSS 有網路連線, (有線或是無線都可以) 這兩個假設是為了完成 ESS 的主要功能, 也就是換手 (handoff), 當裝置在同一個 ESS 下不同 BSS 範圍中移動時, 可不必重新連線就可以繼續傳輸. 這樣的流程事實上是由原本服務的 AP (BSS 1), 把使用者的資料轉傳到換手目標的 AP (BSS 2), 資料流程為: DS -> BSS 1 -> BSS 2 -> Sation, 也因此, 兩個 AP 之間必須連線, 同時切換時間也不能太久 (相鄰條件), 那麼在上述例子中, 如何知道 BSS 1 和 BSS 2 的差別呢? 在 WiFi 網路中, 為了完成這件事情, 所以就有了 ESSID 和 BSSID, ESSID 如上所述, 對應於 ESS 所使用的 SSID, 至於 BSSID (通常是 WiFi AP 的 MAC 位址) 來區分同個 SSID 下的網路. 反過來說, 同一個 WiFi AP 也可以擁有多個 SSID, 此功能稱為 VAP (Virtual AP), 此時, 一個 WiFi AP 會虛擬出多個 BSSID, 通常作法就是從原有的 MAC 位址往上加一, 作為多個不同的 BSSID. 這些 VAP 會對應到 WiFi AP 中的不同 VLAN 中, 因此, 我們可以給他們不同的網路設定, 例如: 流量, 安全性, 頻寬等,
閱讀完整內容

LTE筆記: 波束成型 (beamforming) 和天線陣列

作者： -
圖片
在5G的技術中, 其中一個新被引入的通訊技術就是波束成型 (beamforming), 波束成型技術可以大略的分成兩種: 第一種、藉由量測到的通道係數, 設計傳送參數 (precoder), 最佳化通道 第二種、透過多天線的相位偏移 (phase shifter), 決定電波傳遞強度模 在文章中, 會著重介紹第二種波束成型的架構, 在第二種波束成型的架構中, 所使用的是電磁波干射的物理特性, 簡單來說, 透過電磁波的建設性干涉與破壞性干涉, 我們就可以在某個方向上產生一個較強的訊號, 而在其他方向上減低此訊號的影響. 來自:  https://en.wikipedia.org/wiki/Phased_array 在上圖中, 我們可以發現這種波束成型架構的兩個需求: 1. 必須有多根天線服務同一筆傳輸訊號 2. 每個天線都必須要有一個相位調節器 (phase shifter)
閱讀完整內容