2017年2月26日 星期日

Chrome WebPush - node.js (客製化訊息 - 需加密)

Web Push

之前介紹的Google Chrome Web Push (客製化訊息 - 需加密)是使用Java來傳送加密的客製化訊息,其中有提到Google有提供了一個node.js版本的webpush程式,其中已經把加密的方法封裝好了,可以很容易地幫助我們傳送客製化的Web Push訊息。

在使用之前記得把node.js安裝好,可以去node.js官網下載適合版本安裝。

Google製作的webPush project的github連結在這,web-push
要安裝只要下以下指令即可:
npm install web-push --save

即著在同一個資料夾建立一個webPushTest.js來測試,其中內容如下,需要說明的部份已寫在註解中:

webPushTest.js:
const webpush = require('web-push');  //引入web-push模組

webpush.setGCMAPIKey('XXXXXXXXXXXX');  //打入FireBase Server Key或Google API Key

// This is the same output of calling JSON.stringify on a PushSubscription
const pushSubscription = {
  endpoint: 'XXXXXX',  //webpush註冊後得到的endpoint,前面會跟據Webpush Server而不同,
                       //例如Google可能是https://updates.push.services.mozilla.com/wpush/v1/,
                       //FireFox可能是https://updates.push.services.mozilla.com/wpush/v1/
  keys: {
    auth: 'XXXXX',  //加密金鑰的其中一個,auth
    p256dh: 'XXXXX'  //加密金鑰的其中一個,p256dh
  }
};

webpush.sendNotification(pushSubscription, '{"myText": "Hugo Test", "myIcon": "https://www.vermontteddybear.com/media/wysiwyg/VTB-CMS-Content/featuredcat-KBKF36004-20170119.jpg"}');

2017年2月19日 星期日

java抓取网络图片放到本地

這篇紀錄了如何使用Java獲取網路上的檔案,程式碼很簡單,直接把程式碼寫出

2017/10/11 更新,寫了新的一篇,包含了HTTPS,User-Agent,Content-Type等更詳細的
細節
以Java 由Url下載圖

package readFileFromUrlTest;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.URL;
import java.util.logging.Level;
import java.util.logging.Logger;

public class ReadFileFromUrlTest {

    public static void main(String[] args) {
        ReadFileFromUrlTest readFileFromUrlTest = new ReadFileFromUrlTest();
        String url = "https://www.vermontteddybear.com/media/wysiwyg/VTB-CMS-Content/featuredcat-KBKF36004-20170119.jpg";
        String filePath = "D:\\xxx.jpg";
        try {
            readFileFromUrlTest.readFileFromUrl(new URL(url), new File(filePath));
        } catch (IOException ex) {
            Logger.getLogger(ReadFileFromUrlTest.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public void readFileFromUrl(URL url, File file) throws IOException {
        BufferedInputStream bufferedInputStream = null;
        FileOutputStream fileOutputStream = null;
        try {
            bufferedInputStream = new BufferedInputStream(url.openStream());
            fileOutputStream = new FileOutputStream(file);
            int data;
            //從串流讀取資料寫到檔案中
            while ((data = bufferedInputStream.read()) != -1) {
                fileOutputStream.write(data);
            }
        } catch (IOException ex) {
            throw ex;
        } finally {
            //關閉串流
            try {
                if (file != null) {
                    fileOutputStream.close();
                }
                if (bufferedInputStream != null) {
                    bufferedInputStream.close();
                }
            } catch (IOException ex) {
                throw ex;
            }
        }
    }

}


參考資料:

  1. java抓取网络图片放到本地


2017年2月18日 星期六

WebSocket - Tomcat v8.0+ - 簡單的聊天室

WebSocket可以在伺服器和瀏覽器之間建立雙向通訊,今天要來用
WebSocket來實現一個簡單的聊天室做範例,紀錄一下如何使用WebSocket
伺服器採用Tomcat v8.0+、JDK 1.8,IDE 為 NetBeans

需求:

  1. 網頁上面可以輸入名稱登入聊天室。 登入後聊天室會出現登入訊息。
  2. 登入後可在訊息框中輸入訊息並送出,送出後聊天室會出現訊息。
  3. 聊天室出現訊息指的是,任何已登入聊天室的人都會看到訊息。
  4. 登入後的人只能看到登入後有人打的訊息。


先來看一下檔案結構:


2017年2月17日 星期五

正規表示法 - 幫數字字串的每三個位數標上逗號

碰到一個需求是將數字字串的每三個位數標上逗號,
例如:
1234567 ==> 1,234,456

發現原來正規表示法也可以辦到,特別在這邊做個紀錄。

以Javascript為例,以下的方法numberWithCommas()可以將輸入的整數字串每隔3位數標上逗號

function numberWithCommas(x) {
  return x.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

使用的正規表示法為
\B(?=(\d{3})+(?!\d))

先來看看它的圖型化表示

圖型化表示連結


解釋:
我們要匹配的是從低位數數起,每三個位數的位置(是位置,不是字元),但不包括左邊沒數字的位置
例如123456789,匹配的位置有
3跟4這間、6跟7中間,但1左邊不應該要有。



\B   :   非字元邊界,在此列中即左邊不應該有空白

x(?=y)   :   x接著y才匹配成功,並且y不列入匹配成功的字串中,只匹配出x,如果x沒寫,則 匹配出來的為位置

\d{3}  :   3個數字字元

x(?!y)   :   x後面不跟著y才匹配成功

所以組合出來的就是

  1. 左邊不要空格(即不要左邊界) ==>  \B
  2. 比對後面符合我們要的條件的位置  ==> \B(?=)
  3. 條件之一,1到多個的,3個為一組的數字字元  ==>  \B(?=(\d{3})+)
  4. 條件之二,條件之一的最後面不可是數字字元  ==>  \B(?=(\d{3})+(?!\d))
最後,找到位置以後,把位置替換成逗號就行了。



node.js POST 及 GET的讀取

使用Node.js 架Server時,我們常需要從Client端接收GET或POST方法傳來的參數,
有兩個module可以利用,url及querystring

下面是簡單的範例:
(function(){
   //獲取modules
  var http = require('http');   //架Server用
  var url = require('url');      //解析url,包括GET參數
  var querystring = require('querystring');     //可以用來解析POST的參數語句

  //建立Server
  var server = http.createServer(function(request, response) {
    //得到url資訊
    var urlInfo = url.parse(request.url, true);
    //取得url的path
    var pathname = urlInfo.pathname;
   
    response.writeHead(200, {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "http://XXX"  //如果要當做api給Client利如用Ajax呼叫的
                                                                                   //話,要加跨域的Header
    });
    //判斷是不是要處理的path name
    if (pathname === "/somePathName") {
       var GET_data = urlInfo.query;  // 得到GET的參數資訊
       console.log(GET_data);

       //準備得到POST的參數資訊
       var POST_data = '';     //POST_data 用來存POST資訊
       //POST的資訊息會不斷送進來,不斷送的時候觸發data事件,結束觸發end事件,
       // 綁在request上面以接收POST參數資訊
       request.on("data", function(data){
            POST_data += data
       });  
       request.on("end", function(){
           //可以利用querystring module來將POST參數資訊轉成物件
           var postDataObject = querystring.parse(POST_data );
           console.log(postDataObject);
       });
    } else {
      //
    }
  });

  設置Server的Port
  server.listen(3000);

  console.log('Server跑起來了,現在時間是:' + new Date());
})();

這邊要注意的是,POST的資料不是一次性的得到,而是不斷地傳送進Server,所以我們在request上綁定了"data"及"end"事件來監聽POST資料的傳遞狀態,在"data"事件中不斷地組合POST參數資料,當資料傳送後"end"事件會被觸發,這時才會得到完整的POST參數資料。

參考資料:
  1. Node.jS初學者筆記(1)-用GET傳送資料
  2. Node.jS初學者筆記(2)-用POST傳送資料

2017年2月16日 星期四

Node.js 連接 Sql Server -

這邊紀錄如何使用node.js連接Sql Server的範例,

首先我使用的node.js module是mssql,它有npm網站連結Github連結
只要用node.js 打上
npm install mssql
即可安裝

以下是範例程式碼,
var config = {
    user: 'XXX',
    password: 'XXX',
    server: 'XXX', // You can use 'localhost\\instance' to connect to named instance
    port: 0000,
    database: 'XXX'
    /*
    ,options: {
        encrypt: true // Use this if you're on Windows Azure
    }
    */
}
//獲取連線
var connection = new sql.Connection(config); 
connection.connect(function() {
 // Query 範例   
        //建立Request來進行query,query會回傳Promise,
        //call back function裡的recordset是一個陣例,為物件的集合,
        //物件各Key為Query結果的欄位名稱,Value為值
    new sql.Request(connection).query('SELECT * FROM someTable').then(function(recordset) {
  var i = 0;
  //印出各row的各個欄位
  for (i=0; i < recordset.length; i++){
   console.log(recordset[i].column1);
   console.log(recordset[i].column2);
   console.log(recordset[i].column3);
   connection.close();  //關閉連接
  }
 }).catch(function(err) {
  // ... error checks
  console.log(err);
  connection.close();  //關閉連接
 });
});