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"}');

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抓取网络图片放到本地

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

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

需求：

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

先來看一下檔案結構：

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

碰到一個需求是將數字字串的每三個位數標上逗號，
例如：
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傳送資料

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();  //關閉連接
 });
});