WebSocket是一種雙向、單套接字連接，使用WebSocket，那么請求就變成了打開WebSocket連接的單一請求，并且可以重用公客戶端到服務器以及服務器到客戶端的同一連接。 WebSock減少延遲，一旦建立起WebSocket連接，服務器可以在消息可用的時候發送。這是輪詢和WebSocket的比較。 WebSocket連接通過在客戶端和服務端之間第一次握手的時候將http協議升級到WebSocket協議來完成，這個過程在相同的底層TCP連接上進行。 首先調用WebSocket構造函數，創建一個WebSocket連接，構造函數返回的WebSocket對象實例。 使用WebSocket接口，通過指向一個表示所要連接端點的URL，實例化一個WebSocket對象。 WebSocket協議定義了兩種URL：ws和wss。和HTTP、HTTPS類似，表示非加密和加密數據。wss表示使用傳輸層安全性的WebSocket連接。 WebSocket構造函數有一個必填的URL和可選參數protocols，URL是指向連接目標的URL；protocols是為了建立連接，服務器必須在它響應中包含一個或者一組協議名稱，比如： 和所有的Web API事件一樣，使用on+事件名稱來處理屬性監聽這些事件。WebSocket對象調度4個不同的事件： 代碼如下： index.html代碼： 然后執行命令：
WebSocket讓實時通信更加有效，可以節約帶寬、CPU資源并減少延遲。創建WebSocket連接
建立客戶端的WebSocket連接
<script>
let ws = new WebSocket("ws://localhost:3000/",['com.kaazing.echo']);
ws.onopen = () => {
ws.send("hello")
}
ws.onmessage =(ev) => {
console.log("ev", ev)
}
</script>
創建服務端的WebSocket
const express = require("express");
const http = require("http");
const Ws = require("ws").Server;
const App = express();
const server = http.createServer(app);
server.listen(3000);
app.use(express.static('www'));
let wsServer = new Ws({server});
wsServer.on("connection",function(socket){
console.log("連接成功");
socket.on("message",msg=>{
console.log("客戶端信息",msg)
socket.send("客戶端發送的信息："+msg+","+new Date().getTime())
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="mes"></p>
<script>
let pText = document.querySelector("p")
let ws = new WebSocket("ws://localhost:3000/", ['com.kaazing.echo']);
ws.onopen = (e) => {
console.log("WebSocket open", e);
setInterval(() => {
ws.send(new Date().getTime())
}, 2000)
}
ws.onmessage = ({ data }) => {
pText.innerText = data;
}
</script>
</body>
</html>
node ws.js，在瀏覽器打開上面創建的頁面，效果如下：
