金石微開: HTML

顯示具有 HTML 標籤的文章。顯示所有文章

2016年1月2日星期六

[分享]pusher

Pusher 是一個支援非同步推播功能的網路服務，支援Android、iOS、JavaScript

後台的支援亦相當多元，可以參考下圖。

使用Push的架構為

Server(自己架）－－－－> Puser ------>接收推播的裝置。

如果只是想玩玩看的朋友，可以先去申請一個free account ，可以擁有的免費資源

，官網說明如下：

Our free Sandbox plan includes 100 connections, 200,000 messages, and unlimited channels.

也就是說你可以同時擁有最多100個連線數，20萬則的訊息，以及無限制的channel。

channel的定義就有點像群組的味道，例如我要發送給頻道A的朋友，

那麼註冊為頻道B的朋友就不會收到，即使都是同一個Pusher app 。

另一個要知道的名詞叫做event，一個channel下可以有多個event，

它的角色就像在一個channel中，可以引發不同的事件，例如client端

收到time_event時，去做更新時間，收到cost_event時要使用者付款，

這些event都是自己定義的動作，沒有任何的預先規範，event的名字也是

例如範例中用的都是test_channel ，以及my_event。

如果真的要商用，還是建議去買個付費帳號吧，不然100個connections一下子就用

用完了啦。

一進到到pusher主頁面，會看到你的appid 等相關資訊，以及前、後端範例程式

先來測一下JavaScript前端，把範例直接複制下來就可以用了，它己經把

你的app id 等資訊都直接代入範例中，1個Move就會RUN。

<!DOCTYPE html>
<head>
  <title>Pusher Test</title>
  <script src="https://js.pusher.com/3.0/pusher.min.js"></script>
  <script>
    // Enable pusher logging - don't include this in production
    Pusher.log = function(message) {
      if (window.console && window.console.log) {
        window.console.log(message);
      }
    };

    var pusher = new Pusher('my key', {
      encrypted: true
    });
    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
      alert(data.message);
    });
  </script>
</head>

啟動後，我們可以查看一下輸出的Debug訊息。

pusher的範例程式己成功和Puser服務連線成功，比較讓我注目的是這行

Pusher : Connecting : {"transport":"ws","url":"wss://ws.pusherapp.com:443/app/f8b77b790f72b38e8614?protocol=7&client=js&version=3.0.0&flash=false"}

看起來它走的是WebSocket，而不是傳統的Socket ，給它一個讚。

接下來我們來弄一下一個文件介面的後端，我們需要下載一下我們所需要的library

https://pusher.com/docs/libraries

它會告訴你lib是client或是Server用的，我這次要用python做後台，點擊連結後

轉到Github

https://github.com/pusher/pusher-http-python

告訴我應該怎麼安裝這個python lib

安裝過程

接下來我可以開始使用pusher了, 執行一下以下python程式碼

import pusher

  p = pusher.Pusher(
  app_id='my app id',
  key='My Key',
  secret='my secret',
  ssl=True,
  port=443
)
p.trigger('test_channel', 'my_event', {'message': 'hello blogger boywhy'})

網頁就會跳出一個alert

如果只是想要快速測試一下前端的裝置或網頁是否有收到pusher訊息，

pusher網端有提供一個快速的方式，左邊的選單點擊Debug，即可

然候最右邊有一個可以指定Channel以及Event以及Data輸入框。

讓我們來試一下，把channel以及event改成我們所設定的。

最後按下Sent event，剛才的網頁一樣會收到pusher傳過來的推播訊息。

2015年7月28日星期二

[HTML]用JavaScript將色碼轉換成RGB

JavaScript 將色碼 ex: #dddddd 轉成RGB方法

hexToG(h) 是取得Green值，參數h是色碼
hexToB(h) 是取得Blue值，參數h是色碼
hexToR(h) 是取得Red值，參數h是色碼
cutHex(h) 是用來去除色碼的＃字號，取出後面的六個十六進制碼

function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}  
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}  
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}  
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

2015年2月13日星期五

[HTML] 把瀏覽器星號密碼現形

最近看了一篇文章，數位生活】透過瀏覽器就能讓會員登入「星號密碼」現出原形

覺得還挺有趣的，可以救回自己忘記的密碼，假如你使用記憶密碼的話。

看一下以下二步測試影片

1.yahoo

2.google

2015年2月12日星期四

[HTML] 網頁的Favicon.ico

看到朋友轉PO的文- 介紹 Favicon.ico 重點觀念，做個小筆記。

Favicon.ico 就這個東西

上述連結版主題到幾個重點

Favicon.ico 重點觀念釐清

當 IE Browser 第一次連到該網站時，會先去網站的根目錄下找有沒有 favicon.ico 檔案。例如：http://www.miniasp.com/favicon.ico
否則就需要在頁面中指定 <LINK REL="SHORTCUT ICON" HREF="/myicon.ico"> 才可以找到非預設路徑的 Favorite Icon 檔案。
但是，第一次「無論」找的到或找不到該 Icon，都不會再找第二次！！這點非常重要，所以每次更新 Favorite Icon 檔時，如果要馬上能看到更新，最好換檔名！

如果要手動指定網頁的Favicon.ico ，而不使用預設根目錄的 favicon.ico ，則可以在用下列方式指定:

1:  <html>  
2:  <HEAD>   
3:   <LINK REL="SHORTCUT ICON" HREF="http://www.myweb.com/myicon.ico">   
4:   <TITLE>My Title</TITLE>   
5:  </HEAD>  
6:  <body>  
7:    網頁內容  
8:  </body>  
9:  </html>

若是要產生ICON可以到這個網頁

http://www.ifreesite.com/favicon/

點選"選擇檔案"

選擇你要的檔案後點選"開啟" 之後網頁上就會顯示你剛才選的檔案名稱，按下Create ICON

稍候一下，就會出現 Download FavIcon，點一下即可把產生好的檔案下載回來。

接下來我們寫一個HTML，測試一下剛才產生的檔案

 <html>  
 <HEAD>   
  <LINK REL="SHORTCUT ICON" HREF="test.png">   
  <TITLE>Demo favIcon</TITLE>   
 </HEAD>  
 <body>  
 Just a Demo   
 </body>  
 </html>

2016年1月2日 星期六