iT邦幫忙

DAY 12
0

練習如何去開發一個通訊軟體 Boo it!系列 第 12

Day12 – WebSocket 新的戰爭已經開始! 不再飛鴿傳書,改用電話!

HTTP,因為是stateless ,屬於不會維持原本狀態的文件。簡單來說,如果需要更新資料就必須透過重新整理才可以使頁面更新,也必須是在重新建立網頁請求,不會保持連線狀態。

因此,HTML5提供了一個可以進行”保持連線”的功能,WebSocket,一個新的雙向溝通技術,透過JacaScript進行與伺服器端溝通的一種連線技術。利用單一socket來與伺服器端請求連線,當完成請求之後,就可以進行雙向溝通了。

想想,AJAX也是透過部分頁面更新(REFRESH),來完成更新這個動作。當我們可以運用WebSocket來進行即時訊息傳遞,我們可以完成很多事情。例如:即時在網頁上溝通並且對於使用者來說只要有瀏覽器即可以進行網路通訊。

簡單來說,傳統http 就像是簡訊,你必須要重新去打開一份訊息(重新整理),但是websocket就像是通話,可以保持連線的,不需要一直重新打開一份訊息。

使用WebSocket的API很簡單,我們只要首先建立一個socket物件即可。

var socket = new WebSocket(“http://欲溝通host”);

接下來就可以進行溝通啦!

首先先了解最基本的四個事件處理。

open : 當socket 連線建立,就會設置好此事件。

message : 當已經建立連線,進行訊息交換事件。 onmessage即表示從server端接收訊息。

error : 當溝通有錯誤,會發生此事件。

close : 當連線關閉時,會發生此事件。

接著就是運用簡單的方法

Send() : 傳遞訊息

<script type="text/javascript">

     // 建立 websocket

     var ws = new WebSocket("ws://boo-it:9998/");

     // 完成建立 websocket

     ws.onopen = function()

     {

        ws.send("欲傳遞的訊息");

     };

     // 接收來自server端的訊息

     ws.onmessage = function (event)

     {

        var message_from_server = event.data;

        alert(message_from_server)

     };

     ws.onclose = function()

     {

        // websocket 關閉

     };

}

</script>









上述是最簡單的方法,對於寫過網路程式的經驗來說,HTML5提供的網路溝通算是相當的簡單以及方便呢! 也相對地容易寫,應用就非常多了,搭配canvas更可以寫出更多很棒功能、遊戲等。

boo-it 也是因為WebSocket強大的特性以及方便性來嘗試做一個通訊的應用。後面章節會介紹伺服器端WebSocket 如何傳送、接收訊息等溝通。


上一篇
Day11 - jQuery – JaveScript 的魔術!
下一篇
Day13 – EM-websocket 電話總機,總是要有人當傳話筒麻!
系列文
練習如何去開發一個通訊軟體 Boo it!30

2 則留言

0
ak02
iT邦研究生 3 級 ‧ 2014-10-06 17:40:10

我用appserv建置
結果本機測試是成功
可是不知由外連內卻是失敗

0
justinsanity
iT邦新手 4 級 ‧ 2014-10-16 23:42:23

你好,很抱歉現在才看到。 不知道你是否有開啟public IP呢?

我要留言

立即登入留言