🔍 WebSocket 的常用实践场景：查看演示 | 演示代码
核心概念
WebSocket 是 HTML5 提供的一种浏览器与服务器间进行全双工通讯的技术，是基于 TCP 的应用层协议，客户端可以主动向服务器发送信息，服务器也可以主动向客户端推送信息。使用此 API，可以向服务器发送消息并接收事件驱动的响应，而不需要像短连接场景下通过轮询服务器获得响应数据。具体 API 可以参考 MDN 文档。
连接过程：
- 通过 TCP 三次握手，建立整个通信的基础连接
- TCP 连接成功后，客户端通过 HTTP 协议发送 WebSocket 版本号等信息，请求 upgrade
1
2
3
4
5
6
7
| GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: localhost:3100
Origin: http://localhost:3000
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
|
- 服务端确认数据正确后，回复响应数据，返回 101 Switching Protocols
1
2
3
4
5
| HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fo7JIALyYQe5TVSylICkasKgHP4=
Sec-WebSocket-Protocol: chat
|
- 连接成功，维持心跳，通过 TCP 通道进行双工通信
连接示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| /**
* ==================== web 客户端连接 ====================
*/
// 创建 websocket 连接
const socket = new WebSocket('ws://localhost:8080')
// 连接成功事件，监听到事件时向服务器发送数据 "PING!!!"
socket.addEventListener('open', (event) => {
socket.send('PING!!!')
})
// 监听收到的数据
socket.addEventListener('message', (event) => {
console.log('PONG: ', event.data)
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /**
* ==================== 服务端，以 Node.js 为例 ====================
* 使用 koa、koa-websocket
*/
const Koa = require('koa')
const router = require('koa-router')()
const websockify = require('koa-websocket')
const app = websockify(new Koa())
router.all('/ws', (ctx) => {
ctx.websocket.send('Hello World')
ctx.websocket.on('message', (msg) => {
console.log('msg: ', msg)
})
})
app.ws.use(router.routes())
app.listen(3100)
|
实践场景
以下实践代码均基于 web 平台，但这里的客户端不只限于浏览器，任何实现了 ws 协议的客户端都可以。
服务端 & 客户端代码仅为示例作用的最简实现方式，实际项目中还需考虑更严谨的实践
滚动日志/小红点：
公共聊天室，类似 gitter：
在线游戏