WebSocket
- 支持端对端通信
- 可由
client发起，也可由sever发起 - 用于消息通知、直播间讨论区、聊天室、协同编辑
WebSocket连接过程
- 先发起一个
HTTP请求 - 成功之后在升级到
WebSocket协议，再通讯
WebSocket和HTTP区别
WebSocket协议名是ws://，可双端发起请求（双端都可以send、onmessage）WebSocket没有跨域限制- 通过
send和onmessage通讯（HTTP通过req、res）
WebSocket和HTTP长轮询的区别
长轮询：一般是由客户端向服务端发出一个设置较长网络超时时间的
HTTP请求，并在Http连接超时前，不主动断开连接；待客户端超时或有数据返回后，再次建立一个同样的HTTP请求，重复以上过程
HTTP长轮询：客户端发起请求，服务端阻塞，不会立即返回HTTP长轮询需要处理timeout，即timeout之后重新发起请求
WebSocket：客户端可发起请求，服务端也可发起请求
ws可升级为wss（像https）
import {createServer} from 'https'
import {readFileSync} from 'fs'
import {WebSocketServer} from 'ws'
const server = createServer({
cert: readFileSync('/path/to/cert.pem'),
key: readFileSync('/path/to/key.pem'),
})
const wss = new WebSocketServer({ server })
实际项目中推荐使用socket.io API更简洁
io.on('connection',sockert=>{
// 发送信息
socket.emit('request', /**/)
// 广播事件到客户端
io.emit('broadcast', /**/)
// 监听事件
socket.on('reply', ()=>{/**/})
})
WebSocket基本使用例子
// server.js
const { WebSocketServer } = require('ws') // npm i ws
const wsServer = new WebSocketServer({ port: 3000 })
wsServer.on('connection', ws => {
console.info('connected')
ws.on('message', msg => {
console.info('收到了信息', msg.toString())
// 服务端向客户端发送信息
setTimeout(() => {
ws.send('服务端已经收到了信息: ' + msg.toString())
}, 2000)
})
})
<!-- websocket main page -->
<button id="btn-send">发送消息</button>
<script>
const ws = new WebSocket('ws://127.0.0.1:3000')
ws.onopen = () => {
console.info('opened')
ws.send('client opened')
}
ws.onmessage = event => {
console.info('收到了信息', event.data)
}
document.getElementById('btn-send').addEventListener('click', () => {
console.info('clicked')
ws.send('当前时间' + Date.now())
})
</script>
