WebSocket 与传统的 HTTP 协议对比
在实时通信领域，传统的 HTTP 协议存在以下一些问题：
- 频繁的请求和响应 ：每次通信都需要建立和关闭连接，带来额外的开销。
- 高延迟：每次通信都需要经过多个网络层的传输，延迟较高。
- 单向通信：HTTP 是一种单向的请求/响应模式，客户端无法主动向服务器推送数据。
我们将从连接方式、数据传输方式、通信效率、数据格式、服务器推送和适用场景等方面，对比一下websocket与http的区别
| 特点 | WebSocket | HTTP |
|---|---|---|
| 连接方式 | 持久连接，通过握手建立单个连接 | 每次请求/响应建立新的连接 |
| 数据传输方式 | 全双工通信，客户端和服务器可以同时发送和接收数据 | 单向通信，客户端发送请求，服务器返回响应 |
| 通信效率 | 低延迟，实时性强，数据传输效率高 | 高延迟，每次请求都需要重新建立连接，数据传输效率较低 |
| 数据格式 | 支持任意格式的数据，如文本、二进制数据等 | 基于文本的格式，如HTML、JSON等 |
| 服务器推送 | 服务器可以主动向客户端推送消息 | 服务器无法主动向客户端推送消息，需要客户端主动发起请求 |
| 适用场景 | 实时通信、聊天应用、多人协作、实时数据展示等场景 | 请求/响应模式的数据交互、静态内容展示、数据查询等场景 |
实现一个简单的websocket
前端代码
先使用new WebSocket创建一个websocket实例，然后通过onopen事件与websocket服务器建立连接
// 创建WebSocket连接 const socket = new WebSocket('ws://localhost:8080'); // 建立连接事件 socket.onopen = function() { console.log('WebSocket连接已建立'); // 向服务器发送消息 socket.send('Hello, server!'); };
然后通过onmessage,onclose，onerror事件，分别监听服务器发来的消息，连接关闭，错误事件
// 监听接收到服务器消息的事件 socket.onmessage = function(event) {
const message = event.data;
console.log('接收到服务器消息:', message);
};
// 监听连接关闭事件
socket.onclose = function() {
console.log('WebSocket连接已关闭');
}; // 监听连接错误事件 socket.onerror = function(error) {
console.error('WebSocket连接错误:', error);
};
前端API：
| 方法 | 描述 |
|---|---|
new WebSocket(url) |
创建一个 WebSocket 实例，指定要连接的 WebSocket 服务器的 URL。 |
ws.onopen |
当 WebSocket 连接成功建立时触发的事件。 |
ws.onmessage |
当接收到来自 WebSocket 服务器的消息时触发的事件。 |
ws.onerror |
当 WebSocket 发生错误时触发的事件。 |
ws.onclose |
当 WebSocket 连接关闭时触发的事件。 |
ws.send(data) |
向 WebSocket 服务器发送消息，可以是字符串、ArrayBuffer 或 Blob。 |
ws.close() |
关闭 WebSocket 连接。 |
webSocket的使用场景
WebSocket可以提供实时、双向、持久的通信能力，使得 Web 应用能够实现高效、实时的数据传输和即时通信。
它适用于各种需要实时数据交互和即时通信的场景，如实时聊天应用、在线多人游戏、实时数据更新、即时通知和提醒、实时协作和协同编辑等。
简述一下WebSocket的工作原理
- 建立握手：客户端发起WebSocket连接请求，包含一些特定的头部信息，例如Upgrade和Connection字段 。服务器接收到请求后，如果支持WebSocket协议，会返回一个握手响应，其中包含状态码101 Switching Protocols和一些额外的头部信息。
- 建立连接：一旦握手成功，客户端和服务器之间建立了持久连接。这个连接是基于TCP协议的，使用WebSocket协议进行通信。
- 数据传输：一旦连接建立，客户端和服务器可以通过发送消息来进行双向通信。客户端和服务器可以发送文本数据或二进制数据。数据以数据帧的形式传输，帧中包含有效负载和一些控制信息。
- 关闭连接：当客户端或服务器决定关闭连接时，它们可以发送关闭帧来表示关闭连接。收到关闭帧的一方也会发送一个关闭帧作为确认，并且双方会协商关闭连接的过程。
websocket的兼容性情况
通过can i use网址我们可以知道，WebSocket 在现代的 Web 浏览器中具有广泛的兼容性，但在一些旧版本的浏览器中可能存在兼容性问题。
WebSocket的安全性
WebSocket 本身并不提供加密功能，它是一种基于 TCP 的协议，数据是以明文形式传输的。因此，如果在使用 WebSocket 时不进行任何加密措施，那么数据在传输过程中可能会被窃听、篡改或伪造。
为了保护 WebSocket 通信的安全性，推荐使用 SSL/TLS 协议对 WebSocket 连接进行加密。通过在建立 WebSocket 连接时使用加密传输，可以确保数据在传输过程中被加密，并防止第三方窃听或篡改数据。