WebSocket
-
支持端对端通讯
-
可以由 client 发起，也可以由 server 发起
-
用于：消息通知，直播间讨论，聊天室，协同编辑等
-
实际项目中推荐使用 socket.io，API 更简洁
WebSocket 连接过程
-
先发起一个 HTTP 请求
-
成功之后再升级到 WebSocket 协议，再通讯
WebSocket 案例
// 服务端
const { WebSocketServer } = require("ws");
const wxServer = new WebSocketServer({ port: 3000 });
wxServer.on("connection", (wx) => {
console.log("connected");
// 接收信息
wx.on("message", (msg) => {
console.log("收到了信息：", msg.toString());
setTimeout(() => {
// 服务端向客户端发送信息
wx.send("服务端已经收到了信息！" + msg.toString());
}, 2000);
})
})
<!-- 客户端 -->
<!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>web-socket</title>
</head>
<body>
<button id="btn-send">发送消息</button>
<script>
const ws = new WebSocket("ws:127.0.0.1:3000");
ws.onopen = () => {
console.log("opend");
ws.send("client opend");
}
ws.onmessage = event => {
console.log("客户端收到信息：", event.data);
}
const btnSend = document.getElementById("btn-send");
btnSend.addEventListener("click", () => {
console.log("clicked");
ws.send("当前时间：" + Date.now());
})
</script>
</body>
</html>
WebSocket 和 HTTP 区别
-
WebSocket 协议名是 ws://，可双端发起请求
-
WebSocket 没有跨域限制
-
通过 send 和 onmessage 通讯（http 通过 req 和 res）
WebSocket 和 HTPP 长轮询有什么区别？
-
HTTP 长轮询：客户端发起请求，服务端阻塞，不会立马返回
-
WebSocket：客户端可发起请求，服务端也可发起请求
