發表文章

目前顯示的是有「HTML5」標籤的文章

HTML - WebSocket Sample - with PHP Server

圖片
兩個月前因為工作的關係,開始在網路上找如何實做 WebSocket。 這是關於 WebSocket 的介紹: ◎  http://www.websocket.org/ ◎  http://zh.wikipedia.org/wiki/WebSocket 如果懶得看,讓我們從這張比較圖來了解最快! 簡單說以前網頁大多數的狀況是,使用者端要求新的資料,提供資料的伺服才吐新的資料給你,這樣如果要做到即時更新,變得使用者端要不斷地詢問 Server 有沒有新的資料,而這樣一去一回,浪費時間也浪費資源,也沒想像中的即時。因此 HTML5 多了這條路 WebSocket,WebSocket 概念是一開始使用者端跟 Server "握個手"之後,在沒說要斷線的情況下,任何一方就可以在任何時間主動扔資料給對方,如此是也,不用一去一回,也省去了一些重新建立連線的動作,又快又方便。 以上簡介,那接下來我在網路上搜尋的過程中,發現 Client 端建立 WebSocket 的範例很多,但是 Server 端處理 WebSocket 的範例卻很少,即使找到了,還不能直接 Run ,所以小的才 po 這篇文章,提供一個可以直接運作的版本 (程式有不少部分是網路上找來的,加以改善)。 以 Server 傳時間給 Client 端顯示為範例。 首先是 Client 端,一般來說 Client 端為網頁,透過 javascript 建立連線,建立連線之後可以定義  onopen (連線成功)、onmessage (收到訊息)、onclose (結束連線)、onerror (錯誤時) 四個事件各要對應什麼 function 處理。如下 : File : client.html +  jquery-1.10.1.min.js <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>WebSocket</title> <script type="text/javascript...

HTML5 - SVG

圖片
嘿~ 這陣子都在做網頁程式, 裡面有個東西我覺得超讚的想分享一下, 我用HTML5的SVG透過javascript動態畫出資料C hart圖, 剛剛我利用時間把這東西改成一個分享版本! 對這有興趣的人可以抓去看看!    這壓縮檔裡面有兩個檔, 一個是HTML檔, 一個是jquery檔, 要放在一起, 然後直接用瀏覽器開那個HTML就可以看結果. ^_^  檔案連結: https://docs.google.com/file/d/0B0kC-urN3g_jZHA5RFFhXzQ0elU/edit?usp=sharing 參考教學: http://www.w3schools.com/svg/