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. 服务器响应这个请求,如果接受升级请求,它会返回一个响应状态码为101的HTTP响应。

    • 服务器端响应(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 请求要复杂,需要服务器和客户端的配合。
相关推荐
计算机魔术师10 分钟前
没有人告诉他们要这么做——AI 智能体自己学会了"组团"越狱
前端
a努力。21 分钟前
LangChain Agent消息链路全解析
java·前端·javascript
今年下半年24 分钟前
【前端】ant-design-vue 表格「行、列都动态」的处理方案
前端·javascript·vue.js
szarron1 小时前
VNA6 便携式矢量网络分析仪|1MHz‑6.3GHz 手持 VNA 真实应用场景全解析
前端·嵌入式硬件·信息可视化·数据挖掘·数据分析
Reisentyan1 小时前
B站首页,点击视频卡片之后首页自动刷新的问题
前端
默_笙1 小时前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript
Liora_Yvonne2 小时前
同样用 Element Plus,为什么你的后台总有一股“模板味”?
前端
葡萄城技术团队2 小时前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
志尊宝2 小时前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
Caroline5162 小时前
GPT Image 2.5还能这么玩!一套提示词生成IP吉祥物,附完整案例
前端·gpt·tcp/ip