你所知道“不一样的WebSocket”

最新推荐文章于 2022-12-11 20:19:12 发布

全栈切图仔

最新推荐文章于 2022-12-11 20:19:12 发布

阅读量1.4k

点赞数

文章标签： websocket 网络 http

本文链接：https://blog.csdn.net/weixin_42373116/article/details/122823914

版权

从基本用法，以及构成方面详细讲解下，什么是websocket

1. 什么是WebSocket

1.1 定义

WebSocket API规范定义了一个API用以在网页浏览器以及服务端建立一个socket连接。通俗的来讲就是“在客户端以及服务器端保有一个持久的连接，两边可以在任意时间发送数据”
HTML5 开始提供的一种浏览器与服务器进行全双工通信的网络技术
属于应用层协议，它基于TCP传输协议，并复用了http的握手通道

1.2 优势

支持双向通信，实时性更强
更好的二进制支持
较少的控制开销。连接创建后，ws客户端，服务端进行数据交换时，协议控制的数据包大小更小

1.3 概念补充- 全双工/ 半双工/ 单工

本来这样想画图来解释，但是画图也是比较单调的，简单几个解释还是选择用文字来描述
前提：client端 - 客户端 server端 - 服务端

全双工 > 同一时刻client端可以向server端发送请求，server可以向client端发送请求
半双工 > 同一时刻只能是client端向server发送请求，或是server向client端进行发送，不能同时进行
单工 > 永远都是client端向server发送请求，或是server向client端发送请求

2. WebSocket基本用法

本次演示的代码参照简单使用WebSocket
代码中使用了插件express, 以及ws等

2.1 代码演示

// server端代码
const express = require('express')
const WebSocketServer = require('ws').Server

const app = express()

app.use(express.static(__dirname))

app.listen(3000, () => {
  console.log('服务启动成功')
})

const wsServer = new WebSocketServer({ port: 8000 })
wsServer.on('connection', function (socket) {
  socket.on('message', function (message) {
    
    console.log('来自客户端消息：' + message)
    socket.send('我是服务器端')
  })
})

// client端
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client端</title>
</head>
<body>
  <script>
    const socket = new WebSocket('ws://localhost:8000')
    socket.onopen = function() {
      console.log('连接成功')
      socket.send('<客户端> 这是我的消息啊')
    }

    socket.onmessage = function(msg) {
      console.log('收到服务器的响应 ' + msg.data);
    }
  </script>
</body>
</html>

2.2 request 以及response解析

request header部分

{
	"Connection": "Upgrade",
	"Sec-WebSocket-Key": "X9WkmK/eC1+uyNKtFACAVA==",
	"Sec-WebSocket-Version": "13",
	"Upgrade": "websocket"
}

- Connection: Upgrade：表示要升级协议
- Upgrade: websocket：表示要升级到websocket协议
- Sec-WebSocket-Version: 13：表示websocket的版本
- Sec-WebSocket-Key：与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接

response header部分

{
	"Connection": "Upgrade",
	"Sec-WebSocket-Accept": "y7MZ3tGBc/fYXQBCvmivY9hdrCg=",
	"Upgrade": "websocket"
}

- 表示协议切换成功，之后的协议都使用WebSocket协议

2.3 Sec-WebSocket-Accept的计算

const crypto = require('crypto')
const number = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'

const webSocketKey = 'mFDWtEYufMK2nefc+ky6Ag=='

const websocketAccept = crypto
  .createHash('sha1')
  .update(webSocketKey + number)
  .digest('base64')
console.log(websocketAccept) // qAjDFssdc46W7MLS35A8bcfqZp4=

Sec-WebSocket-Accept根据客户端请求首部的Sec-WebSocket-Key计算出来
将Sec-WebSocket-Key跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接
通过SHA1计算出摘要，并转成base64字符串

2.4 Sec-WebSocket-Key/Accept的作用

避免服务端收到非法的websocket连接
确保服务端理解websocket连接
用浏览器里发起ajax请求，设置header时，Sec-WebSocket-Key以及其他相关的header是被禁止的
Sec-WebSocket-Key主要目的并不是确保数据的安全性，因为Sec-WebSocket-Key、Sec-WebSocket-Accept的转换计算公式是公开的，而且非常简单，最主要的作用是预防一些常见的意外情况（非故意的）

2.5 数据帧格式

在这里插入图片描述

单位是比特。比如FIN、RSV1各占据1比特，opcode占据4比特
FIN：1个比特如果是1，表示这是消息（message）的最后一个分片（fragment），如果是0，表示不是是消息（message）的最后一个分片（fragment）
RSV1, RSV2, RSV3：各占1个比特。一般情况下全为0，一般是用来扩展的
Opcode: 4个比特。操作代码，Opcode的值决定了应该如何解析后续的数据载荷（data payload）。
- %x0：表示一个延续帧。当Opcode为0时，表示本次数据传输采用了数据分片，当前收到的数据帧为其中一个数据分片
- %x1：表示这是一个文本帧（frame）
- %x2：表示这是一个二进制帧（frame）
- %x3-7：保留的操作代码，用于后续定义的非控制帧
- %x8：表示连接断开
- %x9：表示这是一个ping操作
- %xA：表示这是一个pong操作
- %xB-F：保留的操作代码，用于后续定义的控制帧
Mask: 1个比特。表示是否要对数据载荷进行掩码操作
- 从客户端向服务端发送数据时，需要对数据进行掩码操作；从服务端向客户端发送数据时，不需要对数据进行掩码操作,如果服务端接收到的数据没有进行过掩码操作，服务端需要断开连接
- 如果Mask是1，那么在Masking-key中会定义一个掩码键（masking key），并用这个掩码键来对数据载荷进行反掩码。所有客户端发送到服务端的数据帧，Mask都是1
Payload length：数据载荷的长度，单位是字节。为7位，或7+16位，或7+64位
Masking-key：0或4字节(32位) 所有从客户端传送到服务端的数据帧，数据载荷都进行了掩码操作，Mask为1，且携带了4字节的Masking-key。如果Mask为0，则没有Masking-key。载荷数据的长度，不包括mask key的长度