我的程式筆記本: 2016

2016年11月3日星期四

Amazon Marketplace service api workflow

Submit RequestReport
Submit GetReportRequestList
If report is ready, you should receive a report id in the GeneratedReportId tag
Submit a GetReport using GeneratedReportId
A csv report is returned.

2016年10月29日星期六

Handle async functions in loop

How to loop over arrays/objects with async calls

https://stackoverflow.com/questions/4288759/asynchronous-for-cycle-in-javascript/4288992#4288992

2016年8月14日星期日

PHP7 spaceship operator (組合比較符)

Spaceship operator <=> (組合比較符)

spaceship operator 是用來比較兩個值$a是大於, 等於或小於$b. 當

$a 大於 $b -> 回傳 1
$a 等於 $b -> 回傳 0
$a 小於 $b -> 回傳 -1

可用於整數, 浮點數, 字母.

2016年8月11日星期四

Null 合併運算符

PHP7 新增加了一個更簡化的三元運算符.

在PHP5.X 當我們要判斷變數丘是否為空值時會這樣寫

 $a = isset($_GET['foo']) && trim($_GET['foo']) != '' ? $_GET['foo'] : null;

PHP7現在只需要這樣

 $a = $_GET['foo'] ?? null;

我們也可以連續做判斷

 $a = $_GET['foo'] ?? $_GET['bar'] ?? null;

Php Aes encrypt 筆記

公司剛好有需求, 要Server端加密資料跟手機交換資料.也就是

Server端能解密手機端加密出來的資料
手機端要能解密Server端加密出來的資料
規格是以ECB 128bits 的方式來加密

接下來就是開始試著先能把自己加密出來的再解回去

encrypt.php

 <?php  
      //產生加完時要用到的KEY  
      $rand_key = random_bits(16);   
      $string = '1234567890,A,b,c';  
      echo 'string to encrypted '.$string;  
      echo "<br>";  
      $encrypted_str = aes_encrypt($string);  
      echo 'encrypted string : '.$encrypted_str;  
      echo "<br>";  
      echo 'decrypted string : '.aes_decrypt($encrypted_str);  
      function aes_encrypt($str){  
           global $rand_key;  
           $key = $rand_key;  
           $encrypted = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $str, MCRYPT_MODE_ECB);  
           //也可以用base64_encode來編碼, 只要注意你用什麼編就要用什麼反編  
           return bin2hex($encrypted);                                      
      }  
      function aes_decrypt($str){  
           global $rand_key;  
           $key = $rand_key;  
           //先前用16進制編碼的就用16進制反編回去  
           $str = hex2bin($str);   
           $str = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $str, MCRYPT_MODE_ECB);  
           return $str;  
      }  
      function random_bits($l = 8) {  
           return substr(md5(uniqid(mt_rand(), true)), 0, $l);  
      }  
 ?>

實際狀況可能會有需要自己補0, 所以當加/解密的結果不同時, 可能要注意一下是不是補0的問題

2016年8月10日星期三

什麼是Server-Sent Event?

因為有個功能更強大的Websocket Api的存在, 很多人應該都沒聽過Server-Sent Event. 其實它跟 Long polling 是很類似的. 主要的差別在於 Server-Sent Event 的事件是由browser處理的, client 端只需要listen for messages.

Server-Sent Event 比較 Websocket

Websocket雖然功能強大, 但有些情況, 用Server-Sent Event會比較符合效益.例如:

像是資訊交換是非雙向, 單純只是client端在接收資料, 而client不需要回傳資料.
資源不足. 例如: Server 是虛擬主機, 沒有root的權限或是不能執行特定程式來架起Websocket server.

Server-Sent Event 屬性/方法

屬性/方法	說明
url	EventSource 中指定的 URL
readystate	EventSource 的狀態
CONNECTING	0 : 代表試著與SERVER連線
OPEN	1 : 連線成功
CLOSE	2 : 關閉連線
onopen	連線成功時會呼叫的事件
onmessage	接收到資料的時候會呼叫的事件
error	發生錯誤時會呼叫的事件, 發生錯誤後不會重試連線
close()	中斷與SERVER的連線, 中斷後不會再重試連線

Server-Sent Even 範例

client.html

 <!DOCTYPE html>  
 <html lang="zh-TW">  
      <head>  
           <meta charset="utf-8">  
           <meta http-equiv="X-UA-Compatible" content="IE=edge">  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <!--[if lt IE 9]>  
                <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  
                <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  
           <![endif]-->  
      </head>  
      <body>  
      <div class="body">  
           <div class="container">  
                <header>  
                     <button onclick="stop();">stop</button>  
                </header>  
                <main>  
                     <div id="result"></div>  
                     <div id="ce"></div>  
                </main>  
           </div>  
      </div>  
           <script>  
                var source = new EventSource("serverside.php");  
                source.onmessage = function(event) {  
                     console.log('new message, msg type', typeof(event.data));  
                     document.getElementById("result").innerHTML = event.data + "<br>";  
                };  
                function stop(){  
                     source.close();  
                }  
           </script>  
      </body>  
 </html>

serverside.php

 <?php  
 header('Content-Type: text/event-stream');  
 header('Cache-Control: no-cache');  
 $time = date('r');  
 echo "data: The server time is: {$time}\n\n";  
 ?>

格式說明:

serverside 一定要把header定義為 Content-Type: text/event-stream
要推送的資料前面一定要加 data:
結尾一定要多斷一行

自定義事件

Server-Sent Event可以同時推送不同的資料. 假設, 同一個頁面要更新的資料有好友線上狀態跟新通知, 我們可以在serverside 定義出兩個事件

 <?php  
 header('Content-Type: text/event-stream');  
 header('Cache-Control: no-cache');  
 echo "event: myEvent_1\n";  
 echo "data: my Custom event msg {$time}\n";  
 echo 'data:' . json_encode(array("username"=> "John123", "status"=> "online")) . "\n\n";  
 echo "event: myEvent_2\n";  
 echo "data: my Custom event msg {$time}\n";  
 echo 'data:' . json_encode(array("title"=> "notification", "msg"=> "You've got mail")) . "\n\n";  
 ?>

然後在client.html用addlistener來監聽這兩個事件

 <script>  
 source.addEventListener('myEvent_1', function(event){  
                     var obj = JSON.parse(event.data.split('\n')[1]);  
                     document.getElementById("ev1").innerHTML += obj.username+" : "+obj.status+"<br>";  
                }, false)  
                source.addEventListener('myEvent_2', function(event){  
                     var obj = JSON.parse(event.data.split('\n')[1]);  
                     document.getElementById("ev2").innerHTML += obj.title +" : "+obj.msg+"<br>";  
                }, false)  
 </script>

範例可以在這裡下載

2016年6月6日星期一

Postgresql 很棒的 NOTIFY 功能

Postgresql 有個在做即時互動很好用的功能叫Notify.

根據Documentation表示, Notify 可以在table 有insert/update/delete 的時候推出一個通知.
那麼來做個小測試吧~
首先, 我們用 pgadmin 的 query 視窗先建立一個測試用的table

CREATE TABLE test_table

(

id serial NOT NULL,

test_col_1 character varying

)

然後, 建立一個 trigger 觸發後要執行的 function

最後, 建立一個 trigger 來觸發事件

DB 的部分處理好了之後, 我們來寫一段小程式試試看

然後就在該目錄下cmd 執行 php notify.php, 在還沒有新增任何資料的時候只會看到

然後我們來新增一筆資料吧!

insert into test_table (test_col_1) values ('row1')

這時, 如果有成功的話應該會看到通知被推送出來

Notify 不止可以推送通知, 還可以在通知裡把有變動的資料以JSON格式一起推送. 只不過, 沒記錯的話POSTGRESQL, 要9.1版之後才有內建的JSON函式可以用

2016年6月5日星期日

在XAMPP(WINDOWS)下安裝pthread

安裝前請先用phpinfo檢查3件事:

自己的PHP 版本
Complier 的版本
64 or 32 bits
Thread Safety 是 enabled

如下圖

然後到這裡找相對應的檔案下載回來.

找到相對應的版本下載回來後, 把檔案解壓縮.

把裡面2個檔案

php_pthreads.dll
pthreadVC2.dll

找出來, 然後把 php_pthreads.dll copy 到

/xampp/php/ext 資料夾底下

再來把 pthreadVC2.dll copy 到

/xampp/php
/xampp/apache/bin
windows/system32

這3個資料夾下再重啟xampp就可以了

2016年5月31日星期二

如何解決 Jquery.map() 回傳 'prevObject' 的問題

今天在處理一個table的時候出現一個問題,
我用jquery.map()去loop through 所有已勾選的checkbox並吧該勾選的資料放入一個array做為回傳的資料.

結果在看console時發現array 變成

[x,x,x,x,x, prevObject: jQuery.fn.jQuery.init[7], context: ]

根據我在這裡找到的答案是:

當你用jquery.map()的時候, 它回傳的是一個jquery collection而不只是迴圈內你所形成的array. 所以你需要在後面加一個toArray()來存取你要的array.

例.

$(selector).map(function(i,v){

//Do something....

}).toArray();

就可以只取陣列, 而不取多餘的資料了

2016年3月25日星期五

Node JS + Express JS + Passport JS 做一個登入系統 & 多個帳號綁定的範例

教學出處

安裝所需要的模組

Express
mongoose
passport
passport-facebook
connect-flash
bycrypt-nodejs
morgan
body-parser
cookie-parser
express-session

以上都用npm安裝, 沒接觸過的請自行GOOGLE

建立檔案的結構

- app

------ routes.js //處理路由

-models //所有DB的操作都放在這裡

------ user.js

- config //設定檔都放這

------ auth.js //處理串接社群API的設定(ClientId, Secret, callbackUrl...etc)

------ database.js //設定DB連線的參數

------ passport.js //設定passport的認證策略

- views

------ index.ejs //起始畫面, 選擇登入的方式

------ login.ejs //登入畫面

------ signup.ejs //註冊畫面

------ profile.ejs //登入後顯示個人檔案

- server.js //沒什麼好解釋的, 就是SERVER

Server.js

DB設定 config/database.js

路由 app/routes.js

我們用以下的路由來試範

首頁 : /
登入頁 : /login
註冊頁 : /signup
處理登入 (POST)
處理註冊 (POST)
個人檔案: /profile

User model

Passport.js

2016年3月3日星期四

PHP Ratchet 的第一個範例 Hello World

從上一篇我們已經把 php Ratchet 安裝好了. 現在要來試試教學上的第一個範例 Hello World.

在安裝目錄(以我的例子是D:\xampp\htdocs\ws)底下建立一個 src資料夾, 在src裡再建立一個MyApp資料夾(名字沒限制, 這裡以MyApp示範), 然後在MyApp裡建立一個管理訊息的應用程式的檔案Chat.php, 這個程式會聆聽4個事件:
- onOpen - 有新連線的時候會呼叫這個function
- onMessage - 有新訊息的事件
- onClose - 連線關閉的事件
- onError - 連線有錯誤的事件
再來, 我們要建立一個處理訊息往來的server, 在安裝目錄底下建立一個bin資料夾然後再建立一個chat-server.php的檔案
建好chat-server.php之後, 我們在該目錄下用cmd執行
```
php chat-server.php
```
來啟用"server".
啟用後, 我們來看看是否有成功執行:

我們在根目錄(xampp是htdocs)建立一個test.html然後把底下的code貼上去
然後打開2個瀏覽器各自輸入
```
localhost/test.html
```
```
127.0.0.1/test.html
```
如果沒問題, 輸入訊息後就會看到下面的畫面

PS. 如果遇到 "Myapp/Chat not found" 的錯誤訊息, 請先確認composer.json裡的內容是否為

{

 "autoload": {

        "psr-0": {

            "MyApp": "src"

        }

    },

    "require": {

        "cboden/ratchet": "^0.3.5"

    }

}

如果不是, 請依照上面修改, 然後cmd 輸入 composer dumpautoload
重新產生composer.json檔

下一篇要來講講怎麼用Ratchet 做一個push server

在 XAMPP 上安裝 php Ratchet (Windows OS)

這幾天研究了一下用php Ratchet來建立一個websocket server,
發現他的官網給的教學不是很詳細, 在此寫一篇我在安裝流程.

首先, 要安裝COMPOSER. 對沒用過的人會比較陌生, 不過其實不難, 因為它有WINDOWS版的安裝程式, 下載後點兩下執行就可以了.
安裝完後可以開始安裝Ratchet, 用COMPOSER安裝需要幾個步驟:
- 在windows底下, 執行CMD.EXE進入command line模式, 把目錄換到你要安裝的位置(以我的例子是D:\xampp\htdocs\ws)然後輸入
```
php composer.phar require cboden/ratchet 注1, 注2
```
- 執行完後, 就要開始正式安裝了, 一樣在cmd裡輸入
```
php composer.phar install 
```
- 等程式跑完就安裝好了Ratchet, 下一篇我會寫實際使用Ratchet做一個hello world 的範例

注1: 教學上是以LINUX為操作環境, 所以會有 ~/ 的符號.
注2: 請確定你有設定環境變數讓 Windows cmd 命令列可以執行 php 指令,這裡有教學

訂閱：文章 (Atom)

我的程式筆記本

2016年11月3日星期四

Amazon Marketplace service api workflow

2016年10月29日星期六

Handle async functions in loop

2016年8月14日星期日

PHP7 spaceship operator (組合比較符)

Spaceship operator <=> (組合比較符)

2016年8月11日星期四

PHP7 Null 合併運算符

Null 合併運算符

PHP AES encrypt

Php Aes encrypt 筆記

2016年8月10日星期三

HTML5 Server-Sent Event

什麼是Server-Sent Event?

Server-Sent Event 比較 Websocket

Server-Sent Event 屬性/方法

Server-Sent Even 範例

格式說明:

自定義事件

2016年6月6日星期一

Postgresql 很棒的 NOTIFY 功能

2016年6月5日星期日

在XAMPP(WINDOWS)下安裝pthread

2016年5月31日星期二

如何解決 Jquery.map() 回傳 'prevObject' 的問題

2016年3月25日星期五

Node JS + Express JS + Passport JS 做一個登入系統 & 多個帳號綁定的範例

安裝所需要的模組

建立檔案的結構

Server.js

DB設定 config/database.js

路由 app/routes.js

User model

Passport.js

2016年3月3日星期四

PHP Ratchet 的第一個範例 Hello World

在 XAMPP 上安裝 php Ratchet (Windows OS)

2016年11月3日 星期四

2016年10月29日 星期六

2016年8月14日 星期日

Spaceship operator <=> (組合比較符)

2016年8月11日 星期四

Null 合併運算符

Php Aes encrypt 筆記

2016年8月10日 星期三

什麼是Server-Sent Event?

Server-Sent Event 比較 Websocket

Server-Sent Event 屬性/方法

Server-Sent Even 範例

格式說明:

自定義事件

2016年6月6日 星期一

2016年6月5日 星期日

2016年5月31日 星期二

2016年3月25日 星期五

安裝所需要的模組

建立檔案的結構

Server.js

DB設定 config/database.js

路由 app/routes.js

User model

Passport.js

2016年3月3日 星期四

2016年11月3日星期四

2016年10月29日星期六

2016年8月14日星期日

2016年8月11日星期四

2016年8月10日星期三

2016年6月6日星期一

2016年6月5日星期日

2016年5月31日星期二

2016年3月25日星期五

2016年3月3日星期四