当前位置：首页 > article >正文

WebSocket学习记录

article 2025/2/12 1:18:03

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、什么是WebSocket
二、为什么需要WebSocket
三、WebSocket的工作原理
四、如何使用WebSocket
总结

前言

本文旨在深入探讨WebSocket协议的基础知识、工作原理以及在实际开发中的应用场景。通过本文的学习，读者将对WebSocket有一个全面的理解，并能将其应用于自己的项目中。

一、什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。WebSocket API是纯事件驱动，通过监听事件可以处理到来的数据和改变的链接状态。

二、为什么需要WebSocket

传统的HTTP协议无法支持服务器主动发送信息给客户端，这导致了轮询（Polling）和长轮询（Long Polling）等技术的出现，但这些方法效率低下且实时性不高。而WebSocket解决了这些问题，提供了更高效的双向通信机制。

主要优势包括：

带宽优化：相比于HTTP，WebSocket的头部信息更加简洁。
低延迟：WebSocket能够实现更低的延迟，适合实时性要求高的场景。
无状态保持：与HTTP不同，WebSocket可以维持一个持久的连接状态。

三、WebSocket的工作原理

WebSocket的通信始于一次HTTP握手请求，随后升级为WebSocket协议。一旦握手成功，双方即可通过该连接进行数据交互，无需再次发起新的请求。

握手实例如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

服务器端响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

四、如何使用WebSocket

可通过创建一个新的WebSocket实例并监听相关事件来实现。如下即为创建一个WebSocket实例：

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => console.log('Connected to server');
ws.onmessage = (event) => console.log('Message from server ', event.data);
ws.onerror = (error) => console.error('WebSocket Error ', error);
ws.onclose = () => console.log('Disconnected from server');