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,大家有興趣不妨跟身旁的親朋好友一起玩樂比賽吧 😀