websocket协议
前言
http通信只能由客户端发起，所以早期很多网站为了实现推送技术，所用的技术都是轮询；轮询是指由浏览器每隔一段时间（如每秒）向服务器发起http请求，然后服务器返回最新的数据给客户端，为了能更好的节省服务器资源和带宽，并且能够更实时的进行通讯，html5规范中出现了websocket协议
含义：websocket是一种网络通信协议，是html5开始提供的一种在单个tcp连接上进行全双工通讯的协议。rfc6455定义了它的通信标准。
http与websocket
- http协议是一种典型的客户端请求，服务端响应的协议（服务端永远不会直接给客户端消息，除非客户端请求）
- websocket的全双工（full duplex）的通讯传输允许数据在两个方向上同时传输，任何一方都可以主动的发消息给对方。
注意
- websocket连接必须由浏览器发起，因为请求协议是一个标准的http协议
- websocket使用80（ws://）、（wss://）端口，可以绕过大多数防火墙的限制
- websocket需要先建立连接，这就使得websocket成为一种有状态的协议，之后通信时可以省略部分的状态信息
- websocket并不是全新的协议，而是利用了http协议来建立连接（也叫做握手，handshake）
websocket的应用场景：社交订阅、股票基金报价、体育实况更新、多媒体聊天、多玩家游戏等
为什么websocket连接可以实现全双工通信http连接不可以
http协议是建立在tcp协议之上的，tcp协议本身就有全双工通信，但http协议的请求应答机制限制了全双工通信。websocket连接建立以后，其实只是简单的规定了一下通信不使用http协议了，直接互相发数据就可以。
websocket请求格式
对比http协议请求格式异同点
- 请求地址不是类似/path/，而是以ws：//开头的地址
- 请求头connection：upgrade（表示客户端希望连接升级）
- 请求头upgrade：websocket（表示这个连接将被转化为websocket连接）
- sec-websocket-key：客户端随机生成的字符串，其用于标识这个连接，并非用于加密数据
- sec-websocket-version：指定了websocket的版本号
websocket响应格式
客户端sec-websocket-key和服务端sec-websocket-accept的关系
以dghlihnhbxbszsbub25jzq==为例：
服务器收到客户端sec-websocket-key后会进行以下操作
- sec-websocket-key加上一个固定的guid值（258eafa5-e4-47da-95ca-c5ab0dc85b11）——dghlihnhbxbszsbub25jzq==258eafa5-e4-47da-95ca-c5ab0dc85b11
- 将1的结果进行sha-1摘要计算：b37a4f2cc0624f1690f64606cf385945b2bec4ea
- 将2的结果进行hex to base64编码：s3pplmbitxaq9kygzzhzrbk xoo=
- 将3的结果作为sec-websocket-accept响应头1的值，返回给客户端
如此操作，可以尽量避免普通的http请求被误认为websocket协议
注意
- 上面的响应码101表示本次连接的http协议即将被更改，更改后的协议就是upgrade：websocket指定的websocket协议
- 版本号和子协议规定了双方都能理解的数据格式，以及是否支持压缩等等，如果仅用websocket的api则不需要关心这些
- 一个websocket连接就建立成功，浏览器和服务器可以随时的主动发送消息给对方。消息有2种，一种是文本，一种是二进制数据，通常，我们可以发送json格式的文本，这样在浏览器处理起来就十分容易
- 安全的websocket连接机制和https类似。首先，浏览器用wss：//xxx创建websocket连接时，会先通过https创建安全的连接，然后，该https连接升级为websocket连接，底层通信走的依然是安全的ssl/tls协议
- websocket协议对于有一些低版本的浏览器可能不支持
- ws模块
- socket.io模块
npm初始化：npm init
安装ws模块：npm i ws
常用场景：一个服务端服务于多个客户端
服务端
const express=require("express")
const app=express()
app.use(express.static("./public"))
//http响应
app.get("/",(req,res)=>{
res.send({ok:1})
})
app.listen(5000)
//websocket响应
const {websocket}=require("ws")
const wss=new websocket.websocketserver({port:8080})
wss.on('connection',function connection(ws){
ws.on('message',function message(data){
console.log("收到：%s",data);
//转发给其他人
wss.clients.foreach(function each(client){
if(client!==ws&&client.readystate===websocket.open){
client.send(data,{binary:false})
}
})
})
ws.send('欢迎来到聊天室')
//当有客户端断开连接时触发
ws.on("close",()=>{
console.log("帅哥走了");
})
})客户端
//chat.html文件内
注意：静态文件夹为public，里面有chat.html页面
访问：http://localhost:5000/chat.html
npm初始化：npm init
安装socket.io模块：npm i socket.io
服务端
//服务端
const http=require("http")
const fs=require("fs")
const app=http.createserver()
app.on("request",(req,res)=>{
fs.readfile(__dirname "/index.html",function(err,data){
if(err){
res.writehead(500)
return res.end("error loading index.html")
}
res.writehead(200)
res.end(data)
})
})
app.listen(3000,()=>{
console.log("server start");
})
//下面引入代码必须在app监听完端口的后面
const io=require("socket.io")(app)
//监听了用户连接的事件，只要用户连接，便会触发该事件
//socket表示用户的连接，socket.emit表示触发某个事件，socket.on表示监听某个事件
io.on("connection",socket=>{
console.log("新用户连接了");
//socket.emit的方法应该用于给浏览器发送数据
//参数1：事件名字-名字随意写
//服务器发送数据给客户端
socket.emit("get",{name:"cjc"})
//服务器从客户端接收数据
socket.on("send",data=>{
console.log(data);
})
})客户端
引入socket.io.js文件：
访问：http://localhost:3000/
注意：
- socket.io有用到websocket协议，但是对于不支持websocket的浏览器会回退到http的轮询，而且提供自动重连，而ws就没有此支持
- socket.io模块的数据传输对象和字符串都可以，ws模块数据传输只能为字符串