一、基本概念
websocket的出现让浏览器具备双向通信的能力。
传统的http请求，特点遵循请求响应模型，客户端发送了请求。服务器响应内容回客户端。
在H5中提供了一种浏览器和服务器可以实现双工通信的技术。这就是websocket，属于应用层协议。
底层还是基于tcp协议来进行通信。继续给优化了我们通信协议。
基于websocket技术可以实现双工通信，服务器可以主动推送消息给客户端
websocket特点：
- H5提出，属于浏览器的标准对象，直接使用
- 支持双工通信，允许服务器主动推送消息给客户端
- 使用起来比较简单，提供丰富的API可以让我们减少对浏览器操作
http约束了我们前端浏览器和后端服务器通信规则。
不管使用什么浏览器，实际上请求标准统一。响应回来数据也是标准统一。
websocket是一个对象，是一种通信技术。采用了ws协议类进行通信。加密wss
二、常见API
搭建后端服务器环境
const {
WebSocketServer
} = require('ws')
//WebSocketServer创建服务端的环境
const wss = new WebSocketServer({
port: 8080
})
//connection监听客户端是否有链接请求
wss.on('connection', (ws, req) => {
console.log('客户端已连接：', req.socket.remoteAddress)
//监听前端是否发送消息
ws.on('message', data => {
console.log('收到客户端发送的消息：', data.toString())
ws.send("服务器接受到你的消息")
})
ws.onclose = function () {
console.log("服务器关闭");
ws.close()
}
})
总结：
- 后端下载webscoketserver对应的包。
- 创建webscoketserver服务器端环境，并开发一个端口，让前端访问这个端口
- 开启连接等待，一旦有客户端发送连接请求，服务器立即监听并得到客户端的信息。
- 等待前端发送消息，
message事件监听数据是否有发送过来。一旦发送立即获取。 - 服务器也可以发送消息给客户端。
- 监听客户端是否断开连接，如果检测有断开，后端也要关闭连接。
前端环境搭建
开启前端和后端连接代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">开启连接</button>
<button id="btn2">发送消息</button>
<button id="btn3">断开连接</button>
<script>
const obtn = document.querySelector("#btn")
const obtn2 = document.querySelector("#btn2")
const obtn3 = document.querySelector("#btn3")
//点击按钮开启连接
obtn.onclick = function(){
//创建WebSocket对象，实际就已经在开启连接
let url = "ws://127.0.0.1:8080"
let socket = new WebSocket(url)
//监听客户端和服务器连接
socket.onopen = function(){
console.log("客户端和服务器连接成功");
}
socket.onclose = function(){
console.log("客户端和服务器关闭连接");
}
socket.onerror = function(){
console.log("客户端连接服务器失败");
}
}
</script>
</body>
</html>
前端发送消息给后端
obtn2.onclick = function(){
if(socket != null){
//发送数据
socket.send("你好！！！")
}else{
alert("请先建立连接")
}
}
前端监听后端发送回来消息
//点击按钮开启连接
obtn.onclick = function(){
//创建WebSocket对象，实际就已经在开启连接
let url = "ws://127.0.0.1:8080"
socket = new WebSocket(url)
//监听客户端和服务器连接
socket.onopen = function(){
console.log("客户端和服务器连接成功");
}
socket.onclose = function(){
console.log("客户端和服务器关闭连接");
}
socket.onerror = function(){
console.log("客户端连接服务器失败");
}
//只要连接成功，前端开启消息监听
socket.onmessage = function(event){
console.log(event);
}
}
关闭连接
obtn3.onclick = function(){
socket.close()
}
关闭连接的时候，会触发我们onclose事件记录日志。
同时后端服务器也能监听到，前端这个连接需要关闭，后端也销毁对应内存资源
