1. 概述
- 本质:HTML5新增协议
- 目的:在浏览器和服务器间,建立一个不受限的双向通信通道
- 传统HTTP协议:请求 - 响应协议(服务器无法主动发送消息)
- 应用:实时聊天,多人游戏(数据实时同步)
- HTTP轮询(Comet)问题:实时性不够,请求频繁
2. WebSocket 协议
GET ws://localhost:3000/ HTTP/1.1
Host: localhost:3000
Connection: Upgrade
Upgrade: websocket
Origin: file://
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: 1xg0aLGkXudIZLHYyFewUw==
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
- 要点
- 非全新协议
- 创建连接:由浏览器发起的HTTP请求
- 消息类型:文本,二进制数据
- HTTP建立在TCP上,TCP是全双工通信(HTTP请求-应答机制限制,WS不限制)
- https -> wss:通过https先创建安全连接,然后升级为ws
3. 使用
- 服务端支持:nodejs的ws模块
- WebSocket服务端实例
- WebSocket客户端实例
- 双端:ws 模块包含双端(客户端、服务端)
- 同源策略: ws 协议本身不需要同源策略(Same-origin Policy),服务端可做检查(Origin)
- 路径:服务端connection时,未检查路径,可自实现
const WebSocket = require('ws')
const { Server } = WebSocket
const ws = new WebSocket('ws://localhost:3000')
ws.on('open', () => {
ws.send('hello')
})
ws.on('message', msg => console.log(msg))
const wss = new Server({
port: 3000
})
wss.on('connection', ws => {
ws.on('message', msg => {
console.log(msg)
ws.send(`echo ${msg}`)
})
})
参考链接