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 请求要复杂,需要服务器和客户端的配合。
相关推荐
gqkmiss23 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃28 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰32 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye39 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm41 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js