WebSocket 學習筆記（一）
阿新 • • 發佈：2019-01-04
關於 WebSocket
http 協議存在一個缺陷：通訊只能由客戶端發起
如果伺服器有連續的狀態變化，客戶端要獲知就需要向伺服器輪詢，由於輪詢的效率低，浪費資源。 WebSocket 因此而發明 。
在不斷地建立HTTP連線，然後等待服務端處理，可以體現HTTP協議的另外一個特點，被動性。
關於 WebSocket 和 Socket 的聯絡和區別
WebSocket 特點
伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。
- 建立在 TCP 協議之上，伺服器端的實現比較容易。
- 與 http 協議有著良好的相容性，握手階段採用 http 協議
- 資料格式比較輕量，效能開銷小，通訊高效。
- 可以傳送文字，也可以傳送二進位制資料。
- 沒有同源限制，客戶端可以與任意伺服器通訊。
- 協議識別符號是ws（如果加密，則為wss），伺服器網址就是 URL。
Node.js 輕鬆實現 WebSocket服務
step1 : 安裝 node.js
step2 : node install –save ws
安裝 websocket 庫 ws
step3 : 建立服務
在剛才安裝 ws 庫的更目錄建立一個 server.js
var WebSocketServer = require('ws').Server;
console step4 : 啟動服務
node server.js
step5 : Client 端
隨意命名 client 端的名字，最終這個靜態網頁是直接開啟的
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebSocket</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
console.log('Connection to server opened');
}
function sendMessage() {
console.log('Client send:' + $('#message').val() );
ws.send($('#message').val());
}
</script>
</head>
<body >
<input class="form-control" type="text" name="message" id="message" placeholder="Type text to echo in here" value="" />
<button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">Send </button>
</body>
</html>
