1. HTTP vs WebSocket
🐌 传统 HTTP (写信)
浏览器:在吗?
服务器:在。
浏览器:在吗?
服务器:在...
(每次都要重新建立连接,慢!)
⚡ WebSocket (电话)
浏览器:喂?(建立连接)
服务器:喂!
浏览器:发个包。
服务器:收到。
(连接一直通着,实时双向!)
2. 拨通电话
建立一个 WebSocket 连接非常简单。
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function() {
ws.send("Hello Server!");
};
ws.onmessage = function(event) {
console.log("服务器说: " + event.data);
};
📣
SSE (Server-Sent Events) 插嘴:
"如果只需要服务器广播(比如股票报价),可以用我!我是单向广播,比 WebSocket 更轻量!"
3. 聊天室模拟
这是一个模拟的 WebSocket 聊天室 (实际上是本地模拟)。