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 请求要复杂,需要服务器和客户端的配合。
相关推荐
迷雾漫步者11 分钟前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-38 分钟前
验证码机制
前端·后端
燃先生._.2 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖3 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235243 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240254 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar4 小时前
纯前端实现更新检测
开发语言·前端·javascript
njnu@liyong4 小时前
图解HTTP-HTTP报文
网络协议·计算机网络·http
寻找沙漠的人4 小时前
前端知识补充—CSS
前端·css