如果要跟伺服器做雙向溝通,就需要使用到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)四月二十日過期(頁數增加到六十頁)。
這樣...只好把伺服器部份放到明天了。