各位「網路工作者」大家好! Web Worker 是由 W3C 以及 WHATWG 共同制定出來的API,讓 javascript 可以獨立在背景執行而不會影響...
我不是做美術設計的料,但是又希望成品可以美觀一點,這時還是借助一些方法來讓介面好看一點。 自從twitter發佈了bootstrap,看起來真的不少人做過嘗試。...
今天先建立起簡單的視訊會議做驗證。 建立視訊會議的方式,基本上就是昨天描述的過程的實作。連線資訊的傳遞,則透過之前包裝好的ws.io模組。 首先看一下伺服器:...
WebRTC主要的重點是建立瀏覽器之間的即時網路通訊,不過這個規格還很新,基本上能完整支援的瀏覽器目前只有Chrome21以上的版本。不過他能做的應用非常有趣,...
這雖然和前端技術有點像是扯不上關係 但是這和前端的美好未來可能有很多的關係,私心啦!! 你知道判斷一個網站有沒有運用HTML5技術最好的方法嗎? 就是用IE開啊...
依照昨天的構想,把傳送binary資料的功能也實作出來了,就把它用在資源分享上。 分成兩個部分來傳送資料,基本上問題不大,但是要實作,需要在使用方法上制定一些規...
找到問題所在...該來完成ws.io的單元了 這種事情要在腦袋清楚的時候來解決阿...趕稿的時候一定想不出來 由於架構模仿了Socket.IO,問題變得比較複雜...
其實還沒有真的完成,因為這個工作幾乎等於重寫Socket.IO...不過還是來看一下目前進行的狀況 主要的改寫還是在幾個部分,跟昨天的程式比起來,還需要在Man...
先把類似Socket.IO的操作方式加進來,然後開始測試,先從echo開始。 雖然先把namespace、room、broadcast等功能都先加進來,不過目前...
談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。 HTML5 其實還是HTML,只是像軟體有更新一樣,HTML也更新到HTML5而且有更多的功能,具...
既然要用到File API以及URL(或者叫做Blob URL),還是對他做一個簡單的了解。 File API目前主要定義了幾個介面,主要是:Blob、File...
線上會議的應用,除了需要像是視訊、Chat等的機制外,通常也會需要做一些資源分享。先來考慮一下需求,然後看看怎樣實作。 基本上,這裡說的資源共享,主要還是檔案。...
昨天發現了在多人協同繪圖時,會有無法解決的問題。問題主要在於繪圖的動作與WYSIWYG的需求不一致,導致動作的衝突無法解決。要解決這樣的衝突,方法之一就是用兩個...
單人操作白板,或是在瀏覽器間交錯操作,對運作的影響都不太大,但是我們要做的是多人同時操作,這時會發生什麼事呢? 昨天其實只試做出一個透過WebSocket協同運...
之前針對白板塗鴉的需求,做好基本的抽象化。不過要利用從WebSocket傳來的資料繪圖,就需要進一步考慮。 在繪圖上,一個共享白板的技術需求主要有幾個重點:...
今天先思考一下,要把Canvas與WebSocket整合的話,需要怎樣的技術。順便調整一下之前寫好的Chat伺服器程式,以他為base來接上WebSocket。...
之前的程式碼看起來有些凌亂,所以稍微停下腳步,整理一下。 其實本來其實想自己實作AMD(Asynchronous Module Define),不過時間來不及,...
2D Context具備了基本的文字繪製功能,不過想要做成在Canvas可以直接打字的效果,還是需要花一些功夫嘗試。 雖然2D Context具備了文字繪製功能...
只能畫長方形其實有點無趣,至少加上圓形跟橢圓形才能讓圖形更完整。另外,為了顯示一些繪圖工具的狀態,加入了自定事件的機制。 圓形用2D Context的arc方法...
最近筆記分享了好幾篇Audio/Video的Methods(方法)、Properties(屬性)、和Events(事件)。 我今天想要單純針對這些方法、屬性、事...
今天先建立一個可以比較彈性加入繪圖功能的機制,然後先嘗試塗鴉及長方形繪製來驗證這個機制。 主要的方向是,利用一個物件來集中管理2D Context的屬性及繪圖方...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、Pr...
要製作一個簡單的繪圖應用,自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法,主要是lineTo與...
在使用Canvas 2D Context之前,先看看他有哪些能耐。 2D Context有一些全域屬性,這些屬性會與許多繪圖的動作相關,為了方便管理,2D Co...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、Pr...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為<audio> 和<v...
Canvas是HTML5中很熱門的技術,目前已經有非常多的應用。接下來就會以Canvas做主角,逐漸發展出應用。先來簡單了解一下Canvas是什麼。 其實Fir...
其實Socket.IO的文件並不完整,雖然不需要完整的說明就可以使用,但是要清楚他的功能跟架構的話,大概要直接追蹤原始碼。 打開socket.io目錄中的pac...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為<audio> 和<v...
管理連線、利用Storage來存放變數其實也是Socket.IO內建的功能。另外,也稍微追蹤一下原始碼,看看要怎麼做出更複雜的功能。 管理連線主要有兩個部分。S...