WebSocket学习文档
发布时间 :
阅读 :
一、WebSocket学习
1.1 WebSocket介绍
- 定义：基于TCP的双向通信协议，提供全双工、持久化的单一TCP连接
- 与HTTP 的区别：
- HTTP：短连接，单向请求-响应，需重复建连
- WebSocket：长连接，双向实时通信，一次握手复用连接
- WebSocket事件（自动触发的响应）
- open：连接建立时触发
- message：客户端接收到服务端数据时触发
- error：通信发生错误时触发
- close：连接关闭时触发
- WebSocket方法（主动调用的操作）
- WebSocket状态（readyState）
1.2 WebSocket基本使用（客户端）
<!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>
<div>
<button id="openBtn">连接</button>
<button id="closeBtn">关闭连接</button>
</div>
<input id="inputText" type="text" placeholder="请输入内容">
<button id="sendBtn">传送数据</button>
<ul id="messages"></ul>
</body>
</html>
<script>
const messageList = document.getElementById('messages');
function addMessage(text) {
const li = document.createElement('li');
li.textContent = text;
messageList.appendChild(li);
}
let socket;
document.getElementById('openBtn').addEventListener('click', () => {
// 创建对象
socket = new WebSocket('wss://echo.websocket.org');
// 连接建立
socket.onopen = () => {
addMessage('websocket已连接')
}
// 接收消息
socket.onmessage = (e) => {
console.log(e.data, '服务器数据')
}
// 错误处理
socket.onerror = () => {
addMessage('websocket连接错误')
}
// 断开连接
socket.onclose = () => {
addMessage('websocket连接断开')
}
})
function addMessage(text) {
const li = document.createElement('li');
li.textContent = text;
messageList.appendChild(li);
}
document.getElementById('sendBtn').addEventListener('click', () => {
if(!socket){
return alert('websocket未连接');
}
if(socket.readyState == 3) {
return alert('websocket已断开')
}
// 向服务器发送数据
const input = document.getElementById('inputText')
// 向服务器发送数据
socket.send(input.value);
addMessage(`我：${input.value}`)
input.value = '';
})
document.getElementById('closeBtn').addEventListener('click', () => {
// 断开连接
socket.close();
})
</script>
1.3 使用node开发WebSocket服务
// 初始化项目
npm init -y
1.4 使用websocket实现聊天室
二、Socket.IO学习
2.1 Socket.IO介绍
- 介绍：基于WebSocket的封装库
- 特点：
- 降级兼容（在 WebSocket 不可用时自动降级为 HTTP 轮询）
- 自动重连
- 房间管理
2.2 Socket.IO基本使用
2.3 使用Socket.IO实现聊天室
