用 Express + nodemon 建一個乾淨的 nodeJS 樣板

最近因為工作關係,開始學用 nodeJS 了,我使用的是非常知名的 Express framework,他也有提供 APP 產生器快速建構一個基本的 nodeJS 網站,為了避免每次都要重新查資料,所以就記錄在自己的 BLOG 裡囉!

安裝 Express 產生器

第一次使用要先安裝他的產生器:

Shell

安裝完後可以執行 express -h 看到產生器的選項:

Shell

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

Shell

補充

--css=sass,使用的是 sass 語法,沒有大括號跟分號。
--css=compass,使用的是 scss 語法,有大括號跟分號。

接著請輸入以下指令:

Shell
Shell
Shell

預設的 port 是 3000,所以啟動後請在網址輸入 http://localhost:3000,如果安裝正常會看到 Express 的歡迎畫面:

Express 歡迎畫面

用 compass 出現錯誤 ENOENT

假設你跟我一樣使用 compass,啟動之後卻在終端機出現錯誤訊息,大致長這樣:
GET / 304 23.164 ms - -
events.js:174
throw er; // Unhandled 'error' event
Error: spawn compass ENOENT


那有很大的原因是沒有安裝 compass,因此請輸入以下指令安裝 compass 後,再重新啟動應該就沒問題囉!
$ gem update --system
$ gem install compass

使用 nodemon 自動重啟伺服器

這個就跟前端的 livereload 類似。

nodemon 可以讓我們更改 server 的程式碼之後,不用重新關閉伺服器再打開,直接到網頁重新整理即可。

安裝 nodemon

你可以選擇全域安裝(推薦全域安裝,因為他真的很好用XD):

Shell

也可以選擇只安裝在特定的資料夾:

Shell

正常情況下,安裝完之後輸入以下指令,就可以正常使用了:

Shell

搭配 Express,自動重啟伺服器

但如果我們有使用 Express 的話,他的啟動方式是 npm start,所以我們需要做一點小修改,才可以使用 nodemon 這個好用的服務!

請打開你的首頁(預設會是 app.js),將最後一行註釋起來

JS

然後加入以下程式碼:

JS

接著再啟動 nodemon:

Shell

這樣每次改完程式碼存檔之後,就能直接到網頁重新整理看結果囉!


下載 Express-Clean-APP

最後我也將這份 Express Clean 的專案資料夾放到 Github 上面,有需要的朋友可以自行 Clone 或是 Fork 唷。

Express Clean repo:https://github.com/mukiwu/clean-express

jQuery Ajax API 實作以及 Template 介紹

前陣子在上前端基礎課,有教大家怎麼利用 jQuery AJAX 實現簡單的 CRUD 效果,後來覺得這對初學者來說,應該是個需要反覆思考才能融會貫通的小門檻,剛好最近也有學生對此表示不懂😱,所以就借這篇文章簡單跟大家介紹囉!

我會用在課堂上的教材跟大家拆解語法,但為了避免大家練習時灌爆我的 API,所以我不會透露 API 網址,一律用變數 ajax_url 代替。

什麼是 API

用程式介面(英語:Application Programming Interface,簡稱:API),又稱為應用編程介面,就是軟體系統不同組成部分銜接的約定。

維基百科

對網站開發人員而言,API 就是前後端溝通的一個接口。後端可以透過各種方法操作資料庫裡的資料;但對前端來說,我們該怎麼操作資料呢?我們可以利用後端人員提供的 API(通常是一串網址)去操作資料,只要有了 API,我們就可以用 JavaScript 搭配 AJAX 實現 CRUD 。

如果還是霧煞煞也沒關係,接下來會用程式碼讓大家加深印象,原理神馬的,可以透過實作去了解 😊。

什麼是 CRUD

CRUD 是四個單字的簡稱,就像我們在學 CSS 時一定要會使用選擇器(selector),而後端在學操作資料庫時,一定要先會 CRUD。
這四個單字分別意思為:

  • C:Create (新建資料)
  • R:Read (讀取資料)
  • U:Update (更新資料)
  • D:Delete (刪除資料)

實作留言板的 CRUD

接下來要跟大家分享的是,如何透過前端實作一個留言板,這個留言板要有 CRUD 的功能,就是我們常說的:新增、刪除、修改 留言。

那因為新增留言是我這期學生的期末考題,所以等他們考完試,我會再把新增留言的程式碼放上來,現在我們先來學習刪除、修改,以及顯示留言吧😋

在此先用 Bootstrap 做了一個非常簡單的留言版,你可以在 HTML 裡面看到要放留言的區塊,只有一行 <div class="result"></div> ,其他什麼都沒有。

HTML

在沒有樣板輔助的情況下,我們需要透過 jQuery 語法將 HTML 的字串組出來,因此所有的留言資料、排版,都必須寫在 jQuery 檔案裡。

顯示留言(Read)

顯示留言的邏輯大概是這樣:

  1. 讀取網頁
  2. 透過 jQuery 語法 (AJAX) 得知現在要撈出該 API 裡的資料
  3. 使用 GET 方法撈出資料
  4. 將撈出來的資料,利用 jQuery 改變 DOM 之後,秀在網頁上

轉換成語法則是:

JS

$.ajax是 jQuery 包裝後的函式,因此他的格式都是固定的,我們只要把對應的資料寫進去,如果 url 跟 type(method) 正確,基本上資料都讀得到。

最後再透過 success 偵測資料成功被讀取後,應該要做的事情:
因此留言的資料非常多,所以我們要利用迴圈,將e物件的所有資料顯示出來,並透過append()把資料一筆一筆的接在後面。

組字串時把握兩個原則:

  • 當變數碰到 html 時,需要用+串接
  • 單引號用來包變數與 jQuery 語法,雙引號用來包 HTML 語法

組字串需要耐心跟細心,如果還是看不太懂他們的規則,我會建議先實作再透過開發者工具看 render 出來的 HTML 程式碼,相互對照會更加清楚他們的邏輯。

更新留言(Update)

更新留言的邏輯比較繁瑣一些,如果寫成文字大致如下:

  1. 點擊更新留言的按鈕
  2. 該篇留言會自動變成可編輯的表單,而且表單預設值是原本留言的內容
  3. 輸入完要更新的資料後,按下送出,表單會變回更新後的資料
  4. 如果按下取消,表單會變成原始資料,不會更新

因為有點複雜,所以我錄了一個 GIF 表示整個流程

轉為程式碼,也可以感受到他比 READ 還複雜許多,而且重點是這個程式碼我還沒寫完 哈哈哈 XDDDD

JS

雖然沒有寫完,但是的確可以成功將留言更新,但更新後的樣式如果要用組字串的方式來寫,會太過於繁瑣,所以我後來採用 jQuery Template 實作(後面會再提到如何用 Template 改寫)。

但我們還是要簡單說一下這段程式碼,之後再把樣板加進來會比較好懂。

上述程式碼 highlight 的第 3 ~ 8 行(以下簡稱 A 段),以及 19 ~ 24 行(以下簡稱 B 段),乍看之下其實很類似,但兩個功能大不相同。

A 段代表的是上述邏輯的第二句話:留言會自動變成可編輯的表單,而且表單預設值是原本留言的內容。所以當我點下「更新按鈕」的時候,會利用 A 段將作者、標題、網址 … 等資料存到變數裡,這邊利用的是 DOM 的 text() 方法,接下來在updateTemplate 裡塞入表單元件,可以用 value="" 讓元件預設出現內容,所以在裡面塞入了各個變數。

而 B 段表示的,是當我更新完留言送出之後,會傳至 API 的實際內容。以name變數為例:name = fullMsg.find('.name').val();,將該表單元件的值存了起來,如果要得到元件的值,可以用 val() 方法。

最後再利用 $.ajax 加上 put 這個 type(method),將資料一個一個的傳回去。你可以利用 sucess 印出結果,如果傳送的物件是更新後的結果,表示程式正確。

如果參考我上面寫的文字流程,成功之後應該要讓畫面回到「顯示留言」的樣子,但是如果用這種方法寫,程式碼可能會又臭又長,所以才想用 template 改寫,因此斷尾了 XDDD。但大家有興趣,也可以試著想一下該怎麼把這個功能寫出來唷 🙂

刪除留言(Delete)

相較於更新,刪除真的是簡單許多,我們的 API 設計,是只要得到該留言的 ID 值,就能透過 ID 將留言刪除。

但根據我的 HTML 結構,我是將 ID 寫在最外面,刪除留言則是放在裡面:

HTML

所以點擊「刪除留言」之後,該如何利用 jQuery 找到這一篇文章的 ID 呢?我使用了closest()方法,以「刪除留言」為中心點,找到離他最近的.full-msg

JS

如果成功刪除留言,必須要有一些簡單的回饋,讓使用者知道留言被刪除了 (就和更新留言是一樣的道理)。
只不過刪除比較簡單,我直接讓這一篇留言 fadeOut(),再秀出「留言已刪除」的字即可。


以上就是簡單的 CRUD 操作,希望對大家有所幫助。雖然語法看上去有點複雜,但其實觀念只有兩個,一是利用$.ajax操作 API,二是利用 jQuery 操作 DOM 讓使用者感受到回饋。

有時間會再更新如何使用樣板。我會以「更新留言」為例子,將他改寫成 template 的樣式,因為我們要的功能非常單純,所以我使用的是 jQuery Template,有興趣的朋友可以先閱讀他的官方文件。

超級初心者適用的 JavaScript 觀念 (暫停更新)

最近除了跳級研究 jQuery 之外,也從基礎開始認識 JavaScript,不得不說,歐萊禮真是個恐怖且強大的出版社阿(膜拜),我最近在看歐萊禮出版的「深入淺出 JavaScript」,其實一開始去書店翻找這本書的時候,還對他的排版嗤之以鼻,想說怎麼搞得那麼亂,還用一堆裝可愛的外國人來作對話式教學。

但,事實證明我錯了,利用這種情境 & 對話式的教學,還有摘要的重點,真的是可以讓初學者快速上手啊!!! 所以歐萊禮,請容我深深地跟你道歉,以及至上我最高的敬意 <(_ _)>

那麼以下分享我看了這本書之後導正 & 瞭解的一些觀念,分享給跟我一樣的超級初心者。希望能讓你們在學習 JavaScript 的路上有所幫助!! (高手別來阿 XD )

閱讀進度 CH1 ~ 2

CH1:互動性網站
CH2:儲存資料

  1. alert()也是函數的一種,他是 JavaScript 的內置函數。每個 JavaScript 函數都會用()包住要傳給函數的訊息。
  2. 事件 = 告訴 JavaScript 當使用者在網頁上「做了某件事情」,才會觸發裡面的程式碼。例如onclick(點擊了某個按鈕)就是一種事件。
  3. 函數 = 可以重複執行的程式碼。
  4. if(userName)表示當userName這個變數有值(可以被取得),就執行以下的動作。 var userName = prompt("What is your name?" , "Enter your name here"); if (typeof(userName) !== 'undefined' ) { alert("welcome, " + userName); } 原本在取得變數的部分我是寫if(userName),不過這樣寫很容易讓程式無法執行(感謝 Kuro 指正),如果userName是空值,或是未定義…等一些特殊狀態,裡面的alert()就不會被執行。
    所以改用if typeof(userName)就可以避免這種狀況,以下是另一種範例參考: //or you can change userName as null, undefined var userName = ''; if (typeof(userName) !== 'undefined') { // if(userName){ alert("OK"); } }
  5. JavaScript 的數據類型有變數(variable)以及常數(constant)兩種。變數呼叫方式 var test,常數呼叫方式 const test。常數的值一旦被定義了,就永遠無法被改變。
  6. 變數、常數的標示符 (identifier) 命名須注意事項:
    • 不能重複,是唯一性。
    • 開頭只能用英文字母、下底線_以及錢號$
    • 第二個字母之後可用數字、下底線_以及錢號$
    • 不能使用空格以及其他特殊符號
  7. 變數、常數的標示符 (identifier) 可用「小寫駝峰」作為命名規則:
    – 當有兩個以上的字母組合為標示符時,為了方便識別,可以用大小寫作為區分。例如用flyNumberDate取代fly_number_date
  8. NaN = Not a Number,所以如果為 true,表示他不是數字;為 false,表示是數字。因為一開始就是否定狀態,所以請用負負得正的觀念。
  9. 另外一種用NaN來檢索值是否為數字的寫法: if (isNaN(document.getElementById("xxxxxid").value)) alert("this is not a number");
  10. alert()函數只能儲存string,不能儲存number型態的數字,所以我們會先將數字轉成string再儲存之。
  11. 常數的宣告範例: //常數名稱為全部大寫,以跟變數區分 const TAX = 9;
  12. toFixed(X)用來四捨五入到小數點後 X 位
  13. getElementById是方法,並非函數。
  14. parseFloat()parseInt()都可以幫忙將字串轉成數字

閱讀進度 CH3 ~ 5

CH3:探索用戶端
CH4:決策 (if / else…)
CH5:迴圈

  1. setTimeout()是單次計時器,setInterval()是會一直重複的間歇計時器。
  2. 使用clearInterval()清除重複計時器,使用方法為clearInterval(timerID)
  3. 可以利用document.body.clentHeight取得用戶端視窗的高度。
  4. cookie 會存在同個地方,並用「;」分隔。
    • readCookie():讀取 Cookie
    • writeCookie():寫入 Cookie
    • eraseCookie():清除 cookie
  5. 如須嚴謹判斷瀏覽器是否支援 cookie,可使用navigator.cookieEnabled
  6. 大括號不需分號結尾,分號只用在單一敘述的結尾
  7. for 迴圈適合計數的任務,像是倒數至零,或是倒數至某個數
  8. 如果不知道計數幾次,可改用 while 迴圈。
  9. 如果要在 for 迴圈設定不同的變數,可以使用陣列 array[i]
  10. 一旦 for 迴圈的條件句為false時,迴圈會立刻跳出結束,不會執行裡面的程式碼。
  11. confirm()函式讓使用者回答是或否,並回傳 true / false 值。
  12. break;是跳出整個迴圈;continue;是跳出當前迴圈,並直接進行下一輪迴圈。
  13. 巢狀的 if 判斷可以用 boolean 運算子合併:if(seats[i] && seats[i + 1] && seats[i + 2])
  14. 可以使用巢狀迴圈處理二維陣列的資料: for (var i = 0; i < seats.length; i++) { for (var j = 0; j < seats[i].length; j++) { //something } }

閱讀進度 CH6 ~ 7

CH6:函式
CH7:表單與驗證

  1. 可以傳入任何資料至function(參數),例如常數(Math, PI),變數(temp),或實數(72)。
  2. 函式遇到return;後將立即結束,因此return可用來結束該函式。
  3. 使用某物!=null來判斷某物是否存在
  4. onblur適合作為觸發資料驗證,onchange相較之下,因為如果欄位沒填資料就不會觸發,所以比較不適合。
  5. 要取得表單資料,除了可以使用getElementById()之外,也能使用 form 的物件,例如:
  6. 正規運算式用於比對文字樣式
  7. 正規式用斜線開始和結束,例:/\d/
  8. 同上,正規式是個有點複雜的東西,如果你也有購買此書,正規式的重點從 P.320 開始
  9. 可以用test()方法檢查字串是否符合正規式,以下是一個簡單的郵遞區號(五碼)檢測: var regex = /^\d{5}$/; if(!regex.test(inputField.value)) //郵遞區號格式不正確

閱讀進度 CH8 ~ 9

CH8:利用 DOM 分割 HTML
CH9:物件

  1. 改變節點文字的三步驟:
    1. removeChild(): 移除所有子節點
    2. createTextNode(): 根據新內容,建立新的文字節點
    3. appendChild(): 把新建立的文字子節點,附加在節點下
  2. 承上,寫成 Javascript 為: var node = document.getElementById("story"); while (node.firstChild) node.removeChild(node.firstChild); node.appendChild(document.createTextNode("Some text..."));
  3. CSS class 和 JS class 是兩個完全不同的東西,前者是樣式,後者則是建立 JS 物件的樣板。
  4. 物件中的特性與方法,等於物件外的變數與函式
  5. // 物件名稱.方法名稱(); invitation.deliver();
  6. 建立物件必須要用建構式new,例如: var invitation = new Invitation( "Somebody", "Something" );
  7. Date物件也要用new運算子建立:new Date("06/16/2016")
  8. array.sort()可以做陣列的排序
  9. 要在陣列中做字串比對,可用indexOf(),會回傳比對到的索引值,再利用array[i].body顯示該字串內容。
  10. 使用Math()物件產生亂數,常見的幾個方法如下:
    • round(): 把浮點數四捨五入為整數
    • floor(): 把浮點數無條件捨去為整數
    • ceil(): 把浮點數無條件進位為整數
    • random(): 產生介於 0 ~ 1 之間的亂數,但不包含 1 (可看作 0 ~ 0.9*N 循環的無窮小數)
    做一個亂數擲骰的程式: var oneToSix = Math.floor(Math.random() * 6) + 1;

使用 CSS:not 與 data-index 即時搜尋頁面

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料,覺得非常的好用,之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細),但是最近發現有朋友不知道這功能,所以轉念想想,還是記錄下來順便推廣一下這好用的功能吧 🙂

我有將這個功能實作在前公司的網站(fanxin.tv),如果你有登入,可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果,或者可以參考以下我用 codepen 做的範例

直接在搜尋框打上要搜尋的人名(可以用J,j搜尋),可以看到頁面即時篩選出正確的名字

這個範例有搭配 JavaScript,原作者使用的是原生的 JavaScript,而我為了稍作區別,將它改成了 jQuery,所以想瞭解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂

這個即時頁面使用了 :not 以及 data-* 完成(不得不說, data-* 真的超好用的 XD),以下簡單介紹如何使用它們達成該功能。

在 html 加入 data-* 屬性

從頁面看,感覺是搜尋類別 name ,但其實我們要在 name 的父層 wrap 加上 data-index ,利用 data-index 做搜尋,而不是用 name

因此可以看到我在每個 wrap 裡加上了 data-index ,值跟 name 一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)

HTML

唯一不同的是,即使原本的 name 有大小寫,我在data-index一律改成小寫表示,如果要透過後端產生資料,可以從後端作處理,在樣板輸出的時候就先將大寫轉成小寫。

使用 :not 屬性做篩選

接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面):

HTML

我們會利用 jQuery 動態在 style id="m-search" 裡加入 :not 語法,這樣就可以即時在頁面做篩選了。

:not是 CSS 的偽元素,跟 :nth-child 有異曲同工之妙,他可以幫我們做到元素篩選,假設今天我們搜尋「j」,希望出現所有名字有「j」的人,可以利用:not寫成:

CSS

這段意思是:「只要 data-index 的值沒有 J,就隱藏他」。

使用 data-index*= 是因為我們要做模糊比對,只要 data-index 有出現這個字都可以,畢竟我們不希望只搜尋字首或字尾,而是搜尋全部。

利用 jQuery 即時搜尋

最後,就可以利用 jQuery 即時搜尋,只要搜尋框有「改變、鍵盤輸入、貼上」等事件,我們就即時在 style id="m-search" 裡加入 :not 篩選,而他的篩選依據就是我們搜尋框的值:

JS

結語

以上就是整個過程,只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋,但是他只能搜尋這個頁面的東西,畢竟只是單純抓取 HTML DOM,如果要搜尋後端資料,還是要用 ajax 囉。

相關 jQuery 插件應用

3/12 更新:

有朋友將該功能做成 jQuery 插件釋出,有興趣想玩玩看的話,可以直接套用 jQuery 插件喔。

插件安裝與介紹:https://github.com/dca/jquery-msearch

WebSocket 簡單介紹與 jQuery 實作應用

聽說這篇好像 4 月就跟大家預告要寫了,結果現在已經 5 月了(默。

前陣子工作因素挑戰了人生第一次的 WebSocket,很感謝主管的指導,讓我順利的寫出了一個小東西,心裡萬分感動。因此,將這次實作的過程與經驗紀錄下來,提供給有需要的朋友做個參考囉 🙂

什麼是 WebSocket?

實作之前,免不俗的要跟大家分享一下 WebSocket 到底是什麼,以下取自 wiki 百科的解釋:

WebSocket 是 HTML5 開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。WebSocket 通訊協定於 2011 年被 IETF 定為標準 RFC 6455,WebSocketAPI 被 W3C 定為標準。

在 WebSocket API 中,瀏覽器和伺服器只需要要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

@ WebSocket / wikipedia

簡單來說,就是有 Client & Server 兩端透過 WebSocket 互相傳遞與接收資料,並且即時顯示在頁面上。

WebSocket 語法說明

WebSocket 的大架構其實很簡單又直覺,他也有一些既有的事件,我們只要知道確定哪些事件發生時,該做什麼事情?把這些事情塞到對應的事件即可。

WebSocket 官方網站也有提供測試的頁面以及語法結構,以下就使用他提供的 Example 來跟大家說明:

JS

WebSocket 已經建立好許多 function ,我們可以直接用他的 function,當然也不一定要全部 function 都用到,或是可以做點小修改,像我主管給我的範本就跟官網提供的有一點點不一樣(但基本上的呼叫是大同小異的)

  • 第 4 行:老實說我覺得所有語法中最重要的就是第 4 行的 var wsUri = "ws://echo.websocket.org/";,因為如果一開始沒有把傳輸的網址寫正確,之後的效果根本也跑不出來。記得要把 http:// 改成 ws://
  • 第 12 行:websocket.onopen這個事件是用來判斷前面的 wsUri 是否有順利抓到,如果有抓到表示 onopen,可以利用console.log或是alert做個標記:console.log("連線成功");
  • 第 15 行:跟第 12 行的事件對照就很清楚的知道,websocket.onclose是用來表示當連線中斷時,會出現什麼訊息或事件。
  • 第 18 行:wescoket.onmessage是整個 WebSocket 的重頭戲,連線後,我們就可以在onmessage裏面寫上任何想要傳輸的事件內容。
  • 第 21 行:而對應 18 行的wescoket.onmessagewescoket.onerror是用來判斷連線或事件的正確與否,如果有出現了任何錯誤,就會觸發onerror事件,所以我們可以在這邊進行除錯。

WebSocket 主要就是這四個事件,所以其實不難。那要怎麼利用 jQuery 結合 WebSocket 做出想要的功能呢?我們做法通常是將 jQuery 的主要 function 跟 WebSocket 拆開來,簡單架構參考如下:

Plain Text

由此可看出,將主要的功能寫在 effect.js 裏頭, client.js(html) 與 master.js(html) 分別用來表示兩個不同網頁,他們可以有不同的功能,也可以互相傳收資料 。

利用 JSON 傳遞 WebSocket

步驟一

在 effect.js 先將所有要顯示的資料存到變數中:

JS

步驟二

利用 JSON 將資料送給 WebSocket:

JS

步驟三

在 client.js 將收到的資料存到變數中並調用:(請寫在websocket.onmessage事件裡。)

JS

以上簡單幾行,就可以完成 WebSocket 的基本功能囉 🙂

在兩個不同的網頁中 (master.html, client.html) 互傳資料

假使我們希望在 master.html 做了一個動作 (比如說點選特定的分頁時),client.html 就會秀出一個 DIV。那麼要怎麼做出這功能呢?

我們在切換 TAB 的時候,通常網址列後面都會多一個「#+英數字」作為標記,而我們可以利用這個標記來識別現在是切換到第幾個分頁,然後針對指定的分頁,在 client.html 顯示一個 DIV。

步驟一

先在 master.js 設定一個事件,將 #(hash) 給擷取出來:

JS

我有用console.log記錄每一次的 hash 變化,確定他有抓到 hash,然後用websocket.send寫到 JSON

ps. 這個 keyup 事件不一定要寫在websocket.onmessage裡。

步驟二

同樣在 client.js 將資料抓出來,然後做判斷:

JS

利用這樣的概念與方法,就可以簡單地在兩端互傳資料囉 🙂

以上就是簡單的 WebSocket 經驗分享,有任何問題或建議都歡迎讓我知道喔!!

有趣的 WebSocket 實例

恰巧昨天朋友丟了一個由偉大的谷歌之神做的 WebSocket 互動網站,有興趣的朋友可以玩玩看,來體驗 WebSocket 是多麼的有趣 :)

Super Sync Sports 是個利用 WebSocket 做的運動小遊戲,請先用 web 端瀏覽該網站,然後他會要你也用手機開啟這個網站,將 web 跟手機連線之後,就可以利用手機控制 web 介面來跑步、游泳,或是騎腳踏車。

而且還可以多人連線喔,超酷的 XDDD,大家有興趣不妨跟身旁的親朋好友一起玩樂比賽吧 😀

使用 HTML5 和 jQuery 簡易存取資料

HTML5 增加了一個 data-* 的屬性,可以讓大家很方便的存取這些數據,而且完全不會影響你的版面。假使要做網頁互動,或是需要將資料存到後端紀錄,都非常的方便喔!

A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

Embedding custom non-visible data with the data-* attributes

範例 1

HTML5 使用 data-* 非常簡單,以下是參考語法:

HTML

在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記,test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:

JS

按下按鈕後,跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好:

HTML

以及利用 jQuery 取出 data-myid 的值

JS

兩個 DIV 的 data-myid 不一樣,點選區塊之後顯示的結果也會不同。