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 以及其他...
閱讀完整內容

[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筆記: 5G NR Measurement Events

作者： -
圖片
在通訊系統中, 量測訊號 (RSRP, RSRQ, SINR) 主要的用途就是用來進行換手, 此功能從 2G 系統就被實作, 並隨著更多通訊技術的發展而增加, 在 TS 3GPP TS 38.331 中定義了 5G 網路中, 以下和換手與量測報告的相關驅動事件: Event A1 (Serving becomes better than threshold) Event A2 (Serving becomes worse than threshold) Event A3 (Neighbor becomes offset better than SpCell) Event A4 (Neighbor becomes better than threshold) Event A5 (SpCell becomes worse than threshold1 and neighbor becomes better than threshold2) Event A6 (Neighbour becomes offset better than SCell) Event B1 (Inter RAT neighbour becomes better than threshold) Event B2 (SpCell becomes worse than threshold1 and inter RAT neighbor becomes better than threshold2) 其中, A 系列的事件對應於相同的 RAT (例如: 4G, 5G, etc), B 系列的事件, 則對應於 RAT 之間 (inter-RAT) 的換手,  在各事件的描述中, 以下為一些簡寫的說明: special cell (SpCell): 主要的服務基地台 secondary cell (SCell): 次要的服務基地台, 提供 CA (Carrier Aggregation) 功能 在各項驅動事件中, threshold 為針對事件的一致性定義, 針對每一事件, 我們都可以定義其對應的數值, offset 則是針對每一個基地台定義, 其數值可以為正或為負, 各項數值的物理意義與定義範圍顯示如下表: 在所有的事件中, 我們可以依照其驅動條件分成兩類: 絕對數值事件: A1, A2...
閱讀完整內容