WebSocket 原理与机制

最新推荐文章于 2025-09-30 09:02:14 发布
原创 最新推荐文章于 2025-09-30 09:02:14 发布 · 1.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#websocket #网络协议 #网络

该文章已生成可运行项目，
1. 核心原理

WebSocket 是 HTML5 定义的全双工通信协议，旨在解决 HTTP 协议的局限性（单向请求 - 响应、短连接），实现客户端与服务器的持久化双向通信。其核心特点包括：

  • 持久连接：通过一次 HTTP 握手建立连接后，保持 TCP 连接不关闭，避免频繁建立连接的开销。
  • 全双工通信：连接建立后，客户端和服务器可随时向对方发送数据，无需等待对方响应。
  • 轻量协议：数据帧格式简洁，比 HTTP 头部开销更小，适合实时场景（如聊天、实时数据监控、游戏等）。
2. 通信机制
（1）握手过程（基于 HTTP/HTTPS）

WebSocket 连接通过 HTTP 协议发起，本质是「协议升级」过程：

  1. 客户端发送 HTTP GET 请求，携带特殊头部表示要升级到 WebSocket 协议
  2. GET /ws HTTP/1.1
Host: example.com
Upgrade: websocket  # 声明要升级的协议
Connection: Upgrade  # 声明连接要升级
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==  # 随机字符串，用于验证
Sec-WebSocket-Version: 13  # 协议版本
  3. 服务器验证请求后，返回 101 Switching Protocols 响应，确认协议升级：
  4. 握手成功后，通信切换到 WebSocket 协议，使用 TCP 连接直接传输数据。
（2）数据帧格式

WebSocket 数据通过「帧」传输，帧结构包含：

  • FIN：1 位，标识是否为消息的最后一帧。
  • Opcode：4 位，标识帧类型（如文本帧 0x1、二进制帧 0x2、ping 帧 0x9、pong 帧 0xA、关闭帧 0x8）。
  • Mask：1 位，客户端发送的帧必须设置为 1（带掩码），服务器发送的帧为 0。
  • Payload Data：实际传输的数据（文本或二进制）。
（3）心跳与重连机制
  • 心跳（Heartbeat）：用于检测连接是否存活。客户端定期发送「ping」帧（或自定义心跳消息），服务器收到后返回「pong」帧。若超时未收到 pong，判定连接断开。
  • 重连（Reconnection）：连接断开后，客户端自动尝试重新连接，通常采用「指数退避」策略（重试间隔逐渐增加，如 1s→2s→4s...），避免频繁重试消耗资源。

完整应用样例（含心跳与重连）

以下实现一个基于 Node.js（服务器）和浏览器（客户端）的 WebSocket 应用，包含消息收发、心跳检测和自动重连功能。

1. 服务器端（Node.js + ws 库）

使用 ws 库（WebSocket 服务器实现），处理连接、消息、心跳和断开事件。

// 安装依赖：npm install ws
const WebSocket = require('ws');

// 创建WebSocket服务器，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket服务器启动，监听端口8080');

// 监听客户端连接
wss.on('connection', (ws) => {
  console.log('新客户端连接');

  // 处理客户端发送的消息
  ws.on('message', (data) => {
    const message = JSON.parse(data.toString());
    console.log('收到消息:', message);

    // 若为心跳消息，回复确认
    if (message.type === 'heartbeat') {
      ws.send(JSON.stringify({
        type: 'heartbeat',
        timestamp: Date.now(),
        message: 'pong'
      }));
    } else {
      // 普通消息，广播给所有客户端
      wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({
            type: 'message',
            content: message.content,
            time: new Date().toLocaleTimeString()
          }));
        }
      });
    }
  });

  // 处理连接关闭
  ws.on('close', () => {
    console.log('客户端断开连接');
  });

  // 处理错误
  ws.on('error', (err) => {
    console.error('连接错误:', err);
  });
});
2. 客户端（HTML + JavaScript）

实现连接管理、消息收发、心跳检测（定时发送心跳）和自动重连（指数退避策略）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>WebSocket 客户端</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    .message-list {
      height: 400px;
      overflow-y: auto;
    }
  </style>
</head>
<body class="bg-gray-100 p-4">
  <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-bold mb-4 flex items-center">
      <i class="fa fa-comments text-blue-500 mr-2"></i>WebSocket 实时通信
    </h1>
    
    <!-- 连接状态 -->
    <div id="status" class="mb-4 p-2 bg-yellow-100 text-yellow-800 rounded">
      <i class="fa fa-circle-o-notch fa-spin mr-2"></i>正在连接...
    </div>

    <!-- 消息列表 -->
    <div class="message-list border border-gray-200 rounded-lg p-3 mb-4 bg-gray-50">
      <div id="messages" class="space-y-2"></div>
    </div>

    <!-- 发送消息区域 -->
    <div class="flex gap-2">
      <input 
        type="text" 
        id="messageInput" 
        placeholder="输入消息..." 
        class="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
      <button 
        id="sendBtn" 
        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400"
        disabled
      >
        <i class="fa fa-paper-plane mr-1"></i>发送
      </button>
    </div>
  </div>

  <script>
    // 客户端配置
    const WS_URL = 'ws://localhost:8080';
    const HEARTBEAT_INTERVAL = 30000; // 心跳间隔（30秒）
    const RECONNECT_DELAY_BASE = 1000; // 初始重连延迟（1秒）
    const MAX_RECONNECT_DELAY = 10000; // 最大重连延迟（10秒）

    // 状态变量
    let ws; // WebSocket实例
    let heartbeatTimer; // 心跳定时器
    let lastHeartbeatTime = 0; // 最后一次收到心跳响应的时间
    let reconnectDelay = RECONNECT_DELAY_BASE; // 当前重连延迟
    let isConnecting = false; // 是否正在连接中

    // DOM元素
    const statusEl = document.getElementById('status');
    const messagesEl = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');

    // 初始化连接
    connect();

    // 连接WebSocket服务器
    function connect() {
      if (isConnecting) return;
      isConnecting = true;
      updateStatus('正在连接...', 'yellow');

      // 创建WebSocket实例
      ws = new WebSocket(WS_URL);

      // 连接成功
      ws.onopen = () => {
        console.log('连接成功');
        isConnecting = false;
        reconnectDelay = RECONNECT_DELAY_BASE; // 重置重连延迟
        updateStatus('已连接', 'green');
        sendBtn.disabled = false;

        // 启动心跳检测
        startHeartbeat();
      };

      // 收到消息
      ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        handleMessage(message);
      };

      // 连接关闭
      ws.onclose = (event) => {
        console.log('连接关闭，代码:', event.code, '原因:', event.reason);
        isConnecting = false;
        sendBtn.disabled = true;
        stopHeartbeat();

        // 异常关闭才重连（正常关闭代码1000）
        if (event.code !== 1000) {
          updateStatus(`连接断开，${reconnectDelay/1000}秒后重试...`, 'red');
          setTimeout(connect, reconnectDelay);
          // 重连延迟指数增加（但不超过最大值）
          reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY);
        } else {
          updateStatus('连接已关闭', 'gray');
        }
      };

      // 连接错误
      ws.onerror = (error) => {
        console.error('连接错误:', error);
        updateStatus('连接错误', 'red');
      };
    }

    // 处理收到的消息
    function handleMessage(message) {
      if (message.type === 'heartbeat') {
        // 收到心跳响应，更新时间
        lastHeartbeatTime = Date.now();
        console.log('收到心跳响应:', message);
      } else if (message.type === 'message') {
        // 显示普通消息
        const messageEl = document.createElement('div');
        messageEl.className = 'p-2 bg-blue-50 rounded border-l-4 border-blue-500';
        messageEl.innerHTML = `
          <div class="text-sm text-gray-500">${message.time}</div>
          <div class="mt-1">${message.content}</div>
        `;
        messagesEl.appendChild(messageEl);
        // 滚动到底部
        messagesEl.scrollTop = messagesEl.scrollHeight;
      }
    }

    // 发送消息
    function sendMessage() {
      const content = messageInput.value.trim();
      if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;

      ws.send(JSON.stringify({
        type: 'message',
        content: content
      }));
      messageInput.value = '';
    }

    // 启动心跳检测
    function startHeartbeat() {
      // 定时发送心跳
      heartbeatTimer = setInterval(() => {
        if (ws && ws.readyState === WebSocket.OPEN) {
          // 发送心跳消息
          ws.send(JSON.stringify({
            type: 'heartbeat',
            timestamp: Date.now()
          }));
          console.log('发送心跳');

          // 检查是否超时（10秒内未收到响应）
          const now = Date.now();
          if (lastHeartbeatTime > 0 && now - lastHeartbeatTime > 10000) {
            console.error('心跳超时，断开连接');
            ws.close(1006, '心跳超时'); // 1006表示异常关闭
          }
        }
      }, HEARTBEAT_INTERVAL);
    }

    // 停止心跳检测
    function stopHeartbeat() {
      if (heartbeatTimer) {
        clearInterval(heartbeatTimer);
        heartbeatTimer = null;
      }
    }

    // 更新连接状态显示
    function updateStatus(text, color) {
      const colorClass = {
        green: 'bg-green-100 text-green-800',
        yellow: 'bg-yellow-100 text-yellow-800',
        red: 'bg-red-100 text-red-800',
        gray: 'bg-gray-100 text-gray-800'
      }[color] || 'bg-gray-100 text-gray-800';

      statusEl.className = `mb-4 p-2 rounded ${colorClass}`;
      statusEl.innerHTML = text;
    }

    // 绑定发送按钮事件
    sendBtn.addEventListener('click', sendMessage);
    // 回车发送消息
    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });
  </script>
</body>
</html>

运行说明

  1. 启动服务器：

    • 安装依赖：npm install ws
    • 运行：node server.js（控制台显示「WebSocket 服务器启动，监听端口 8080」）

  2. 启动客户端：

    • 用浏览器打开 client.html
    • 客户端会自动连接服务器，状态显示「已连接」
    • 可在输入框输入消息，点击「发送」或按回车，消息会广播给所有连接的客户端

核心功能说明

  1. 消息收发：客户端发送文本消息，服务器广播给所有在线客户端。
  2. 心跳检测：
    • 客户端每 30 秒发送一次心跳消息（type: 'heartbeat'）。
    • 服务器收到后立即回复心跳响应。
    • 若客户端 10 秒内未收到响应，判定连接失效并主动断开。
  3. 自动重连：
    • 连接断开后（非主动关闭），客户端自动重试连接。
    • 重连间隔从 1 秒开始，每次失败后加倍（1s→2s→4s...），最大 10 秒。
    • 重连成功后重置间隔为 1 秒。

通过以上实现，可确保 WebSocket 连接的稳定性和实时性，适合构建各类实时交互应用。

本文章已经生成可运行项目
websocket深入浅出
Leon的博客
12-17 13万+
websocket简介 websocket是什么 答: 它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要websocket? 疑问? 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答: 因为 HTTP 协议有一个缺陷：通信只能由客户端发起 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP...
WebSocket(保姆级教学)
weixin_70563938的博客
10-31 6141
快速了解WebSocket，对WebSocket的介绍堪称保姆级，初学者上手即可使用
深入理解WebSocket协议原理、实现与应用
hello.reader
10-20 2877
WebSocket是一种基于TCP的通信协议，它为客户端和服务器之间提供了全双工通信能力。与传统的HTTP协议不同，WebSocket允许在一个单一的TCP连接上进行双向通信，避免了每次通信都需要重新建立连接的开销。这种协议的设计初衷是为了优化实时性要求高的应用场景，例如在线聊天、实时数据更新、游戏互动等。WebSocket由IETF在RFC 6455中定义，并由W3C标准化，广泛应用于现代的Web开发中。
深度解析WebSocket的工作原理是什么?
前端技术的学习整理
09-30 696
WebSocket是一种基于TCP的全双工通信协议，通过HTTP协议升级机制建立持久连接后，实现客户端与服务器的双向实时通信。其核心优势包括：1）避免频繁创建/关闭连接的开销；2）支持双向主动通信；3）采用轻量级二进制帧结构（最小2字节头部），显著降低传输开销。工作原理分为握手阶段（通过HTTP 101状态码完成协议升级）和数据传输阶段（基于FIN、opcode等字段的二进制帧通信）。相比HTTP的请求-响应模式，WebSocket更适合聊天、实时监控等场景，已成为现代实时应用的标准解决方案。
WebSocket的原理，以及和Http的关系
feixiaohuijava的博客
09-27 940
http://www.cnblogs.com/Herzog3/p/5088130.html
认识WebSocket原理
kun blog
07-12 378
一、HTTP是什么样的协议，具体有什么优点 HTTP的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次HTTP请求就结束了。 在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request = R
Websocket原理概述
Maggie's Blog
08-30 6253
Html5提供了WebSocket来支持浏览器与服务器的全双工通讯。 WebSocket在TCP之上定义了帧协议，从而能够支持双向的通信。由于WebSocket本质上是一个基于TCP的协议，在建立WebSocket连接前，浏览器或者其他客户端需要向服务器发起请求，服务器解析请求后产生应答信息返回给客户端，由此客户端与服务器的WebSocket连接建立成功。客户端和服务器都可以通过这条连接主动传递
Spring WebSocket实现实时通信的详细教程
lucky_fd的博客
01-18 7374
WebSocket 是基于TCP/IP协议，独立于HTTP协议的通信协议。WebSocket 连接允许客户端和服务器之间的全双工通信，以便任何一方都可以通过已建立的连接将数据推送到另一方。我们常用的HTTP是客户端通过「请求-响应」的方式与服务器建立通信的，必须是客户端主动触发的行为，服务端只是做好接口被动等待请求。而在某些场景下的动作，是需要服务端主动触发的，比如向客户端发送消息、实时通讯、远程控制等。
看完让你彻底搞懂Websocket原理
热门推荐
hsany330的专栏
11-13 1万+
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~ 一、websocket与http WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久
WebSocket 原理详解
L4的博客
05-27 2751
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它由 IETF 于 2011 年制定，RFC 6455 标准中定义了 WebSocket 协议。与传统的 HTTP 协议不同，WebSocket 协议允许客户端和服务器之间进行实时、双向的数据传输。WebSocket 作为一种高效、实时的双向通信协议，解决了传统 HTTP 协议在实时性和效率方面的不足。它通过持久连接、低延迟和双向通信的特性，为实时网络应用提供了强大的支持。
一文让你搞懂WebSocket原理
wgypaul的博客
03-19 550
小编最近在工作上碰到了用WebSocket方式连接客户端和服务端的问题，顺便研究了一下WebSocket，现在做一下归纳总结，希望通过此文可以帮助您搞懂WebSocket原理。 一、WebSocket简述 首先，象征性的来说说WebSocket是个啥，标准的定义是： WebSocket是一种在单个TCP连接上进行全双工通信的协议。 说人话就是：WebSocket是一个通信协议，...
基于WebSocket与ACK机制的即时通讯IM系统设计：转转客服聊天消息实时性、可靠性及去重实践
最新发布
11-12
内容概要：本文详细介绍了转转自研客服IM聊天系统在...阅读建议：建议结合文中提到的TCP/IP、WebSocket、MQ等技术原理进行延伸学习，并在实际项目中模拟实现相关机制以加深理解，重点关注ACK机制与心跳策略的设计细节。
深入理解 WebSocket：原理、优势及与 TCP 连接的关系
M3527199296的博客
12-10 1096
WebSocket 是一种基于 TCP 的全双工通信协议，位于 OSI 模型的应用层，可在单个 TCP 连接上进行双向数据传输，使得客户端和服务器之间的数据交换变得更加简单高效.WebSocket 协议的出现为解决传统 HTTP 协议在实时通信方面的不足提供了有效的解决方案。通过三次握手建立可靠的 TCP 连接，再经过 WebSocket 的握手过程建立全双工通信通道，实现了客户端和服务器之间的高效、实时的数据交互。而四次挥手则确保了连接的正常关闭，释放资源。
WebSocket与HTTP
水w的博客
10-05 1268
WebSocket与HTTP
WebSocket 深入解析：从基础原理到前端后端全栈实战
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
02-11 764
WebSocket 是现代 Web 开发的重要技术，掌握它可以让你的应用更加流畅、实时化！在 Vue3 项目中，我们可以封装一个 WebSocket 连接管理器。Spring Boot 也支持 WebSocket，可以用。作为 HTML5 引入的一种全双工通信协议，可以在。，无需像 HTTP 那样每次都要建立新的连接。进行 WebSocket 连接管理。的限制，难以满足高效的双向通信需求。在 React 中，我们可以使用。，实现高效、低延迟的数据传输。在现代 Web 应用中，，并探讨优化与最佳实践。
面试：WebSocket相关
王温暖的博客
12-09 4864
一、WebSocket原理及运行机制与HTTP关系 以下简要介绍一下WebSocket的原理及运行机制。 WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。它与HTTP一样通过已建立的TCP连接来传输数据，但是它和HTTP最大不同是： WebSocket是一种双向通信协议。在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样； WebSocket需要像TCP一样，先建立连接，
WebSocket 是什么原理？为什么可以实现持久连接？
weixin_34248023的博客
08-04 797
作者：腾讯云技术社区 众所周知，Web应用的通信过程通常是客户端通过浏览器发出一个请求，服务器端接收请求后进行处理并返回结果给客户端，客户端浏览器将信息呈现。这种机制对于信息变化不是特别频繁的应用可以良好支撑，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在当前业界移动互联网蓬勃发展的趋势下，高并发与用户实时响应是Web应用经常面临的问题，比如金融证券的...
WebSocket的通信原理和使用
创作不易，请多支持，将为本站提供更多「有价值的文章」。
11-09 2504
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端。因此，在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。现在，很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺
websocket 机制
weixin_43758377的博客
10-08 626
首先要明确的一点是，支持websocket协议的客户端和服务器能够使用websocket协议进行双向通信，也就是客户端可以随时向服务器发送请求，服务器也能够随时向客户端发送请求。 跟http使用轮询实现不一样的是websocket一次连接成功后则可以重复进行请求和响应，更好地节省了服务器的资源与带宽。 websocket与http协议类似的是同样建立于tcp传输协议之上，通过tcp传输层进行数据传输。而客户端与服务器端一般使用的通信协议仍是http，我们要使用websocket协议进行通信则首先要建立起we
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codingMan_09

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值