[HTML5試試看-21] 溝通 - WebSocket - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 21

HTML5試試看系列第 21 篇

[HTML5試試看-21] 溝通 - WebSocket

javascript html 網頁設計程式設計鐵人賽

fillano

2010-11-01 09:35:18

5953 瀏覽

分享至

如果要跟伺服器做雙向溝通，就需要使用到WebSocket。與EventSource類似，WebSocket在瀏覽器端的使用是非常簡單的。
先來研究一下WebSocket的定義：

 [Constructor(in DOMString url, in optional DOMString protocol)]
 interface WebSocket {
   readonly attribute DOMString URL;
   // ready state
   const unsigned short CONNECTING = 0;
   const unsigned short OPEN = 1;
   const unsigned short CLOSED = 2;
   readonly attribute unsigned short readyState;
   readonly attribute unsigned long bufferedAmount;
   // networking
            attribute Function onopen;
            attribute Function onmessage;
            attribute Function onclose;
   boolean send(in DOMString data);
   void close();
 };
 WebSocket implements EventTarget;

跟EventSource比較起來，constructor多了一個參數來指定protocol，多了一個bufferedAmount屬性，另外還多了一個send()的方法來傳送資料，其他看起來都差不多，世界一片美好。

先來寫個簡單測試網頁：

<html lang="zh-TW">

<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
	div {
		border: solid 2px #336699;
		margin: 10px;
		padding: 5px;
		border-radius: 5px;
		vertical-align: top;
		text-align: center;
		display: inline-block;
	}
	.container {
		background: #88BBFF;
		width: 520px;
	}
	.msg {
		background: #99CCFF;
		border: dotted 1px #4477AA;
		width: 480px;
		margin: 0px;
		text-align: left;
		font-size: 12px;
	}
</style>
<script>
function init() {
	var form = document.getElementById('form1'),
	input = document.getElementById('input'),
	msg1 = document.getElementById('msg1'),
	ws = null;
	try {
		ws = new WebSocket('ws://localhost:8080');
	} catch(e) {
		if(window.console) console.log(e);
	}
	ws.addEventListener('message', function(e) {
		var str = '';
		str += '<li>[' + (new Date()) + ']: ' + e.data + '</li>\n';
		msg1.innerHTML += str;
	}, false);
	form.onsubmit = function() {
		try {
			ws.send(input.value);
			input.value = "";
		} catch(e) {
			if(window.console) console.log(e);
		} finally {
			return false;
		}
	};
}
</script>


<div><div class="container"><form id="form1"><input type="text" size="30" id="input"></form></div><br>
<div class="container">Returned Messages.<div id="msg1" class="msg"></div></div></div>


<script>
init();
</script>

網頁端只要這樣應該就ok了。然後來看看伺服器端...靠

The Websocket Protocol draft 76

這是一個IETF的規格草案，也就是將來會成為RFC...有五十五頁，而且目前的版本在今年(2010)十一月七日過期，下一個版本已經在十月十七日提出，而且會在明年(2011)四月二十日過期（頁數增加到六十頁）。

這樣...只好把伺服器部份放到明天了。

參賽文章