【JS】WebSocket 入门笔记

1. WebSocket 是什么?

WebSocket 是一种网络通信协议 ,可以让浏览器(客户端)和服务器实时双向通信

  • 传统 HTTP :像发短信,每次发消息都要重新建立连接,效率低。
  • WebSocket :像打电话,一次接通后,双方随时可以说话,实时高效。

2. 为什么需要 WebSocket?

HTTP 协议的问题:

  • 单向通信:只能客户端发请求,服务器回响应,不能主动推送。
  • 短连接:每次请求完就断开,频繁连接浪费资源。
  • 实时性差:比如聊天室,HTTP 只能靠"不停刷新"或"轮询"来获取新消息,效率低。

WebSocket 的优势

全双工通信 :服务器和客户端可以同时收发数据。

持久连接 :一次握手,长期保持连接,减少开销。

低延迟:数据实时推送,适合在线聊天、游戏、股票行情等场景。


3. WebSocket 工作原理

(1)握手阶段(HTTP 升级)

WebSocket 一开始会借助 HTTP 协议建立连接:

  1. 客户端发送一个 HTTP 请求,带上特殊头部:
vbnet 复制代码
GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxx
  1. 服务器同意升级协议,返回:
makefile 复制代码
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: yyyy
  1. 握手成功,HTTP 升级为 WebSocket,后续通信不再走 HTTP,而是直接传输数据。

(2)数据传输

  • 连接建立后,客户端和服务器可以随时互发消息(文本或二进制)。
  • 数据以**帧(Frame)**的形式传输,比 HTTP 更轻量。

(3)关闭连接

任意一方可以发送关闭指令,结束通信。


4. WebSocket 应用场景

  • 实时聊天(微信、QQ、钉钉)
  • 在线游戏(王者荣耀、LOL 实时同步)
  • 股票行情(股价实时刷新)
  • 协同编辑(多人同时编辑文档,如腾讯文档)
  • 物联网控制(智能家居设备实时状态更新)

5. WebSocket vs HTTP

对比项 WebSocket HTTP
连接方式 持久化(一次连接,长期保持) 短连接(每次请求完断开)
通信模式 双向通信(服务器可主动推送) 单向通信(只能客户端请求)
实时性 高(数据实时到达) 低(需要轮询或长轮询)
适用场景 聊天、游戏、实时数据 网页浏览、API 请求

6. 简单代码示例(前端 JavaScript)

javascript 复制代码
// 1. 创建 WebSocket 连接(wss 表示加密,类似 HTTPS)
const socket = new WebSocket("wss://example.com/chat");

// 2. 监听连接成功
socket.onopen = () => {
  console.log("连接成功!");
  socket.send("你好,服务器!"); // 发送消息
};

// 3. 接收服务器消息
socket.onmessage = (event) => {
  console.log("收到消息:", event.data);
};

// 4. 监听连接关闭
socket.onclose = () => {
  console.log("连接已关闭");
};

// 5. 发生错误时
socket.onerror = (error) => {
  console.error("连接出错:", error);
};

7. 总结

  • WebSocket 是实时双向通信的协议,比 HTTP 更高效。
  • 适合实时应用,如聊天、游戏、股票行情等。
  • 工作原理:先 HTTP 握手,升级成 WebSocket,然后持久化通信。
  • 前端使用new WebSocket() + 事件监听(onopenonmessage)。
相关推荐
namekong833 分钟前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天1 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄4 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1015 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19435 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧6 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台6 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1006 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc7 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅8 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学