前后端消息推送汇总（WebSocket）
WebSocket
参考视频：
为什么需要 WebSocket
WebSocket 是⼀种基于 TCP 连接上 全双⼯ 通信的协议，相对于 HTTP 这种⾮持久协议来说，WebSocket 是 持久化⽹络通信协议
服务器可以 主动推送消息给客户端
客户端和服务器 只需要⼀次握⼿
HTTP 是 半双⼯ 通信协议（同⼀时刻信息流向只能是单向）
通信只能由客户端发起，服务器才能响应，服务器不能主动向客户端发送数据
客户端与服务器需要 进⾏三次握⼿
HTTP 是 ⽆状态，每⼀次请求都会认为是唯⼀和独⽴的，服务器不需要保存有关会话信息，从⽽不需要存储数据。会通过 Cookie、Session 等⽅式进⾏校验当前会话信息，所以每个请求都会发送冗余信息
为了能及时获取服务器变化，在 WebSocket 之前的尝试：
短轮询（short polling）： 每隔⼀段时间，就发出⼀个请求，了解服务器有没有新信息，即使没有新信息服务器也要返回信息。有不精准、有延时的问题
长轮询（long polling）： 客户端想服务器请信息，在设定时间内会保持连接，直到服务器有新消息响应或连接超时。⼜称 挂起 GET 或 搁置 POST 。长轮询⾮常占⽤服务器资源
流化技术： 客户端发送⼀个请求，服务器发送并维护⼀个持续更新和保持打开的开放响应（连接⼀直建⽴）。每当服务器有需要交付给客户端的信息时，就更新响应，所以每⼀次都是⼀个长久连接⾮常耗费资源（它是建⽴在 HTTP 基础上）。代理和防⽕墙可能会缓存响应，导致信息有偏差、不稳定
这⼏种⽅涉及 HTTP 请求和响应⾸标，包含了许多附加和不必要的⾸标数据与延迟。此外，在每⼀种情况下，客户端都必须等待请求返回，才能发出后续的请求，⽽这显著地增加了延退。同时也极⼤地增加了服务器的压
什么是 WebSocket
WebSocket 是⼀种⾃然的 全双⼯、双向、单套接字连接，解决了 HTTP 协议中不适合于实时通信的问题
特点：
建⽴在 TCP 协议之上，服务端的实现⽐较容易
与 HTTP 协议有着良好的兼容性，默认端⼝也是 80 和 443，并且握⼿阶段采⽤ HTTP 协议，因此握⼿时不容易屏蔽，能通过各种HTTP 代理服务器
数据格式⽐较轻量，性能开销⼩，通信⾼效
可以发送⽂本，也可以发送⼆进制数据
没有同源限制，客户端可以与任意服务器通信
通信原理
WebSocket 在握⼿阶段采⽤的是 HTTP 协议，WebSocket 借⽤了 HTTP 的⼀部分协议来完成⼀次握⼿
HTTP 请求头与响应头
WebSocket 请求头与响应头
请求头就是能不能作为 WebSocket 的依据
Connection: keep-alive, Upgrade 代表到底要不要升级Upgrade: websocket 代表要升级成的协议
WebSocket 服务端与客户端实现WebSocket-Node
安装：
npm install websocket
服务端：
const Websocket =require('websocket').server
const http =require('http')
// 创建HTTP服务，作为第⼀次握⼿链接使⽤
const httpServer = ateServer().listen(3000,function(){  console.log('127.0.0.1:3000')
websocket和socket
})
// 创建webSocket服务
const wsServer =new Websocket({
httpServer: httpServer,
autoAcceptConnections:false,
})
// 连接池（可以放在Redis）
const conArr =[]
// 监听webSocket请求事件
<('request',function(request){
const connection = request.accept()
conArr.push(connection)
<('message',function(msg){
// 循环连接池，推送⼴播消息⾄客户端
for(let i =0; i < conArr.length; i++){
conArr[i].send(msg.utf8Data)
}
})
})
客户端：
参数：ws/wss(加密):ip:port
<div id="msg"></div>
<input type="text"id="text"/>
<input type="button"value="发送"onclick="send()"/>
<script>
var websocket =new WebSocket('ws://127.0.0.1:3000')
/* readyState属性：
0 链接正在建⽴
1 链接建⽴成功
2 链接正在关闭
3 链接已经关闭
*/
// onopen监听连接打开
console.adyState)
}
// onmessage 监听服务器数据推送
console.log(back.data)
}
function send(){
const text = ElementById('text').value
// 向服务器发送数据
websocket.send(text)
}
</script>
⾄此，⼀个完整的 webSocket 通信已经建⽴完成并能够进⾏双向通信了Socket.IO
安装：
npm install socket.io
服务端：
const{ createServer }=require('http')
const{ Server }=require('socket.io')
const httpServer =createServer()
const io =new Server(httpServer,{
cors:{
origin:'*',
methods:['GET','POST'],
},
})
<('connection', socket =>{
/
/ ⾃定义事件需要跟前端对应上
<('sendMsg', data =>{
// 如果是谁连接就给谁返回⽤socket；如果想⼴播出去就⽤io
})
})
httpServer.listen(3000,function(){
console.log('127.0.0.1:3000')
})
客户端：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。