WebSocket原理与具体应用
什么是WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。浏览器和服务器一次握手,持久连接,并进行双向数据传输。
WebSocket的原理
WebSocket的工作原理基于HTTP协议的升级机制,通过握手过程建立起全双工的通信连接。
当客户端发起WebSocket连接请求时,服务器会进行握手响应,验证请求头信息的正确性,并生成Key和Accept等字段。一旦握手成功,客户端和服务器之间就可以通过该连接进行双向通信,直接发送原始数据帧,无需进行额外的HTTP请求。
对比 AJAX轮询,长轮询和 HTTP
AJAX 轮询
AJAX 轮询是浏览器每隔一段时间对服务器发出HTTP请求,无论服务器是否有新数据,都会返回响应并关闭连接。
缺点:浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小一部分,会浪费很多的带宽等资源。
长轮询
长轮询是对AJAX轮询的一种改进,客户端向服务器发送一个请求后,服务器会保持这个连接打开,直到有新数据可用或超过预设的等待时间。如果服务器在这段时间内有新数据,它会立即返回响应给客户端。
缺点:如果同时存在的长连接数量过多,可能对服务器造成压力。
HTTP
HTTP是浏览器向服务器发出请求。
缺点:服务器只知道本次发请求的是谁,不知道下一次的发请求的是谁,请求和响应是一次性的,而且不能主动发送数据,只有客户端发请求,服务器才会响应,同时每次请求和响应就携带有大量的header头,效率低,浪费资源。
一个简单的例子(实现和自己或别人通信)
前提准备:终端安装ws模块
客户端 custom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//与本地计算机通信
const ws = new WebSocket('ws://localhost:8080')
//与其他计算机通信
//const ws = new WebSocket('ws://服务器地址:端口号')
ws.onopen = function () {
console.log('我们连接成功啦...')
ws.send('我爱学习');
}
ws.onerror = function () {
console.log('连接失败了...')
}
ws.onmessage = function (e) {
console.log('服务端传来数据啦...' + e.data)
}
ws.onclose = function () {
console.log('连接关闭了...')
}
</script>
</body>
</html>
const ws = new WebSocket(URL)
WebSocket URL的格式通常遵循以下结构:
ws://<服务器地址>:<端口>
或
wss://<服务器地址>:<端口>
如何查看服务器地址?
- window+r运行cmd
- 输入ipconfig
3.ipv4地址即服务器地址
服务器端 server.js
const WebSocket = require('ws');
// 创建WebSocket服务器,监听指定端口
const wss = new WebSocket.Server({ port: 8080 });
// 当有新的WebSocket连接时执行
wss.on('connection', function connection(ws) {
console.log('New connection');
// 当收到消息时执行
ws.on('message', function incoming(message) {
console.log('Received message:', message);
// 向客户端发送消息
ws.send('我是服务器,你好啊!');
});
// 当连接关闭时执行
ws.on('close', function close() {
console.log('Connection closed');
});
});
实现通信的步骤
- 开启服务端 node server.js
- 客户端向服务器发送数据
- 服务器收到数据,向客户端发送消息
客户端:
服务器: