关于WebSocket

news2024/12/23 16:18:57

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协议进行通信。
数据传输：一旦连接建立，客户端和服务器可以通过发送消息来进行双向通信。客户端和服务器可以发送文本数据或二进制数据。数据以数据帧的形式传输，帧中包含有效负载和一些控制信息。
关闭连接：当客户端或服务器决定关闭连接时，它们可以发送关闭帧来表示关闭连接。收到关闭帧的一方也会发送一个关闭帧作为确认，并且双方会协商关闭连接的过程。