WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協定。WebSocket通訊協定於2011年被IETF定為標準RFC 6455，WebSocketAPI被W3C定為標準。
在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。
WebSocket協議定義了WS：//和WSS：//前綴來表示的WebSocket和WebSocket的安全連接。
資料來源－ 維基百科
WebSocket 用起來很簡單，主要只有4個function，這四個function是選擇性的 ，並非全都要用。
onopen()
當與server連線成功後會觸發的事件。
onclose()
當結束連線後會觸發的事件 。
onmessage（）
收到Ｓerver傳送來的訊息時。
onerror（）
發生錯誤時會觸發的事件。
以上四個都是事件觸發型的function ， 不必用while 來輪詢 ，
有事件發生時自然就會執行這些函式。
以下用一個很簡單的例子來做WebSocket的Client端 與WebSocket Echo Server
做一個連線並發送訊息，Echo Server會回傳我們送給它的訊息。
想了解關於Echo Server，請點這裡 , 程式碼來源請點此 ，我加了一些註解幫助記憶。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Echo Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript" type="text/javascript">
//echo server的網址
var wsUri = "ws://echo.websocket.org/";
//定義元件
var outputElement;
//初始化function
function init()
{
outputElement = document.getElementById("output");
testWebSocket();
}
//執行websocket測試
function testWebSocket() {
//連線到echo server
websocket = new WebSocket(wsUri);
//連線成功要執行的function
websocket.onopen = function (evt) {
onOpen(evt)
};
//連結結速要執行的function
websocket.onclose = function (evt) {
onClose(evt)
};
//收到echo server傳來的訊息要做的function
websocket.onmessage = function (evt) {
onMessage(evt)
};
//當發生錯誤時要執行的function
websocket.onerror = function (evt) {
onError(evt)
};
}
//連線成功後，在outputElement顯示 ,並傳送一個測試訊息
function onOpen(evt) {
writeToScreen("連線成功");
doSend("hello blogger");
}
//當中斷連線時輸出訊息在outputElement上
function onClose(evt) {
writeToScreen("中斷連線");
}
//收到訊息時顯示在螢幕上
function onMessage(evt) {
writeToScreen('<span style="color: blue;">接收到: ' + evt.data + '</span>');
websocket.close();
}
//發生錯誤時顯示訊息在outputElement上
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
//發送訊息
function doSend(message) {
writeToScreen("己傳送 " + message);
websocket.send(message);
}
//輸出訊息在outputElement上
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
//加入事件，當載入完成後執行init()
window.addEventListener("load", init, false);
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
執行結果
沒有留言:
張貼留言