WebSocket 深入浅出

news2024/11/19 17:26:01

WebSocket 深入浅出

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

1. WebSocket 是什么

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

初步了解：

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

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

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

在这里插入图片描述

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

客户端代码（JavaScript）:

var ws = new WebSocket("ws://example.com/socket");

服务器端代码（Node.js）:

	const WebSocket = require('ws');
	const wss = new WebSocket.Server({ port: 80 });
	 
	wss.on('connection', function connection(ws) {
	  // 处理WebSocket连接
	});

服务器响应这个请求，如果接受升级请求，它会返回一个响应状态码为101的HTTP响应。

服务器端响应（Node.js）:

	wss.on('upgrade', function upgrade(request, socket, head) {
	  ws.handleUpgrade(request, socket, head, function done(ws) {
	    wss.emit('connection', ws);
	  });
	});

一旦连接建立，客户端和服务器端都可以开始双向通信。客户端和服务器端代码可以用来发送和接收消息。
- 客户端发送消息:
```
	ws.send('Hello, Server!');
```
- 服务器端接收消息并处理:
```
	ws.on('message', function incoming(message) {
	  console.log('received: %s', message);
	});
```

3. WebSocket 和http的联系与区别

联系：
WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的
区别：
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开头。