WebSocket 深入浅出

WebSocket 深入浅出

  • [1. WebSocket 是什么](#1. WebSocket 是什么)
  • [2. WebSocket 建立连接通信的过程](#2. WebSocket 建立连接通信的过程)
  • [3. WebSocket 和http的联系与区别](#3. WebSocket 和http的联系与区别)
  • [4. WebSocket 的使用场景及限制](#4. WebSocket 的使用场景及限制)

1. WebSocket 是什么

定义:WebSocket 是一种网络通信协议,它允许在单个TCP连接上进行全双工通信 。是HTML5规范提出的,封装在socket协议的上层协议。它是为了解决 客户端发起多个http请求服务器资源 必须要经过长时间轮询的问题而产生的,它能实现多路复用。
初步了解:

  1. WebSocket 协议独立于HTTP,但通常使用HTTP进行初始握手,以建立持久的连接。在握手过程中,客户端发送一个带有特定头部信息的HTTP请求给服务器,服务器在验证请求后,通过响应返回特定的头部信息,表示握手成功。一旦连接建立,服务器和客户端就可以进行实时的双向通信,不需要通过传统的HTTP请求-响应模式。
  2. WebSocket协议允许服务器主动向客户端推送数据,而不仅仅是响应客户端的请求。这种协议特别适用于需要实时数据传输和即时通信的应用,如在线游戏、股票行情等。与HTTP相比,WebSocket在处理二进制内容和实时性方面更为高效,因为它专门针对持久连接和双向通信进行了优化。
  3. WebSocket支持扩展,允许用户自定义协议的一部分,例如通过压缩数据来提高传输效率。总的来说,WebSocket是一种用于创建更高效、实时性更强的Web应用程序的协议。

2. WebSocket 建立连接通信的过程

WebSocket 建立连接的过程通常涉及客户端和服务器之间的一次"握手"过程。包括以下过程:

  1. 客户端发送一个包含Upgrade头的HTTP GET请求到服务器,请求升级到WebSocket协议。

    • 客户端代码(JavaScript):

      javascript 复制代码
      var ws = new WebSocket("ws://example.com/socket");
    • 服务器端代码(Node.js):

      javascript 复制代码
      	const WebSocket = require('ws');
      	const wss = new WebSocket.Server({ port: 80 });
      	 
      	wss.on('connection', function connection(ws) {
      	  // 处理WebSocket连接
      	});
  2. 服务器响应这个请求,如果接受升级请求,它会返回一个响应状态码为101HTTP响应。

    • 服务器端响应(Node.js):

      javascript 复制代码
      	wss.on('upgrade', function upgrade(request, socket, head) {
      	  ws.handleUpgrade(request, socket, head, function done(ws) {
      	    wss.emit('connection', ws);
      	  });
      	});
  3. 一旦连接建立,客户端和服务器端都可以开始双向通信。客户端和服务器端代码可以用来发送和接收消息。

    • 客户端发送消息:

      javascript 复制代码
      	ws.send('Hello, Server!');
    • 服务器端接收消息并处理:

      javascript 复制代码
      	ws.on('message', function incoming(message) {
      	  console.log('received: %s', message);
      	});

3. WebSocket 和http的联系与区别

  1. 联系:
    WebSocket在建立握手时,数据是通过HTTP传输的。但是建立之后,在真正传输时候是不需要HTTP协议的
  2. 区别:
    1. 含义不同
      • websocket:是在单个TCP连接上进行全双工通信的协议。
      • http:超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在TCP之上,是单向的通信协议。
    2. 连接方式不同
      • websocket:需要浏览器和服务器握手进行建立连接的。
      • http:是浏览器发起向服务器的连接,服务器预先并不知道这个连接。
    3. 连接长度不同
      • websocket:是持久连接。
      • http:是短连接(http可以通过Ajax一直发送请求和长轮询保持一段时间内的连接,但本质上还是短连接)。
    4. 连接状态不同
      • websocket:是有状态的双向连接。
      • http:是无状态的单向连接。
    5. 协议开头不同
      • websocket:协议是以 ws/wss 开头。
      • http:协议是 http/https开头。

4. WebSocket 的使用场景及限制

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议,能够实现客户端和服务器之间的持续通信。WebSocket 的用途非常广泛,以下是一些常见的使用场景:

  1. 即时通讯WebSocket 可以实现服务器向客户端推送消息的即时通讯功能,比如即时聊天室、在线客服等。
  2. 实时数据流WebSocket 可以用于需要实时响应数据流的应用,如股票价格监控、体育赛事结果更新等。
  3. 在线游戏WebSocket 可以用于游戏开发中,实现服务器与客户端的实时数据通讯,比如游戏中的实时战斗信息等。
  4. 实时数据更新WebSocket 可以用于实时更新网页内容,无需客户端反复发起 HTTP 请求,减少服务器压力,提升用户体验。
  5. 实时大数据分析WebSocket 可以用于实时数据监控和分析,如实时监控系统监控数据、实时日志监控等。

WebSocket 的一些限制包括

  1. 浏览器兼容性 :不是所有的浏览器都支持 WebSocket,特别是一些老旧的浏览器。
  2. 代理和防火墙支持 :一些网络环境可能不支持或者限制 WebSocket 通信。
  3. 学习曲线WebSocket 需要一定的学习曲线,包括服务器端和客户端的实现。
  4. 数据传输大小限制WebSocket 的数据传输大小受限于单个 HTTP 头部的大小,通常限制在 16KB 左右。
  5. 复杂性WebSocket 比简单的 HTTP 请求要复杂,需要服务器和客户端的配合。
相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试