掘金 后端 ( ) • 2024-06-26 22:56
深入浅出WebSocket：从原理到实践
原理

theme: smartblue

1. 引言

首先，让我们回顾一下传统的HTTP通信是怎么工作的。想象你在一个餐厅点餐。你（客户端）向服务员（服务器）提出请求，服务员给你送来食物，然后就离开了。如果你还想要什么，你得再次招呼服务员。这就是HTTP的工作方式：请求-响应，一来一回。

但是，如果你想要实时了解厨房的烹饪进度呢？难道要每分钟都叫一次服务员吗？这显然不太实际，而且会让服务员（服务器）疲于奔命。

这就是我们需要实时双向通信的原因。我们希望在厨房（服务器）有任何进展时，都能立即通知我们，而不是我们不停地问。这就是WebSocket想要解决的问题！

2. WebSocket协议简介

那么，WebSocket到底是什么呢？简单来说，WebSocket是一种网络通信协议，就像HTTP一样。

想象WebSocket就像是在你和服务器之间架设了一个永久的电话线。一旦连接建立，你们就可以随时互相交谈，不需要每次都重新拨号（建立连接）。

WebSocket的特点主要有：

  1. 全双工通信：这意味着数据可以同时在两个方向上传输，就像电话一样，双方可以同时说话。
  2. 实时性强：因为连接是持久的，所以数据可以实时传输，延迟非常低。
  3. 支持双向通信：服务器可以主动给客户端发送数据，不需要客户端询问。

那WebSocket和HTTP有什么关系呢？其实，WebSocket协议是基于HTTP协议的，它在建立连接时会先通过HTTP握手，然后再升级到WebSocket连接。这就像你先用座机打电话订购了一条专线，然后通过这条专线进行更快速的通信。

总的来说，WebSocket就是为了解决实时通信问题而生的。它让网页不再是一问一答的呆板模式，而是能够进行灵活的实时交互。

3. WebSocket的工作原理

好啦，现在我们要掀开WebSocket的神秘面纱，看看它到底是怎么运作的。我们分三个步骤来看：握手过程、数据帧格式和全双工通信机制。

3.1 握手过程

首先是握手。想象一下，这就像是在社交场合中初次见面时的寒暄。

  1. 客户端（比如你的浏览器）首先发送一个HTTP请求，但这个请求有点特别。它在头部包含了一些特殊的字段，比如：
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

这里的关键是Upgrade: websocket和Connection: Upgrade，它们告诉服务器："嘿，我想升级到WebSocket协议，可以吗？"

  1. 如果服务器支持WebSocket，它会回应一个类似这样的响应：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

这个响应的意思是："没问题，咱们开始用WebSocket吧！"

就这样，握手完成，WebSocket连接建立！

3.2 数据帧格式

建立连接后，双方就开始传输数据了。但是，这些数据并不是随意发送的，而是被包装在一种叫做"帧"的结构中。

想象一下，这些帧就像是一个个小包裹。每个包裹都有一个标签，告诉接收方这个包裹的内容是什么类型的（文本？二进制？），是不是最后一个包裹等信息。

WebSocket的数据帧大概长这样：

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

看起来很复杂？别怕！不需要记住所有细节。重要的是理解，这个结构让数据传输变得有序和高效。

3.3 全双工通信机制

最后，我们来聊聊全双工通信。这个词听起来很厉害，但其实很简单。

想象你和朋友用对讲机聊天。在普通对讲机里，你说话的时候就不能听，听的时候就不能说。但是WebSocket就像是一个超级对讲机，你可以一边说一边听！

这就是全双工通信：数据可以同时在两个方向上传输。客户端可以向服务器发送消息，同时服务器也可以主动向客户端推送消息。这就是为什么WebSocket能够实现真正的实时通信。

总结一下：WebSocket通过特殊的握手建立连接，然后使用简洁的帧格式传输数据，并且支持全双工通信。这三个特点共同造就了WebSocket的高效和实时性。

4. WebSocket的优势

4.1 低延迟

WebSocket建立的是持久连接，一旦连接建立，服务器可以立即将新信息推送给客户端。这就像你和朋友打电话，有什么事情可以立即说出来，而不是写信等对方回复。

举个例子：假设你在玩一个在线多人游戏。使用HTTP，你可能需要每秒钟问服务器："嘿，有什么新动向吗？"而使用WebSocket，一旦有任何变化，服务器会立即告诉你："小心！右边有人！"

这种即时性大大降低了延迟，提升了用户体验。在需要实时数据的应用中，比如股票交易、在线游戏、即时通讯等，WebSocket的这个优势尤其明显。

4.2 减少服务器负载

想象一下，如果有1000个用户，使用HTTP的话，服务器可能要每秒处理1000个"有更新吗"的请求。而使用WebSocket，这1000个连接建立后就一直保持着，服务器只需在有更新时才发送数据。

这就像是从"每个学生每分钟都举手问老师有没有作业"变成了"老师有作业时直接告诉全班"。显然，后者能让老师（服务器）轻松很多！

这种机制大大减少了服务器的负担，使得服务器能够同时处理更多的连接，提高了系统的扩展性。

4.3 跨域支持

在Web开发中，跨域一直是个头疼的问题。简单来说，浏览器出于安全考虑，通常不允许一个网页去访问或者操作其他网站的资源。

但是WebSocket在这方面就很开放。一旦WebSocket连接建立，你的网页就可以自由地与任何服务器通信，不受跨域限制。

这就像是你原本只能在自己家里打电话，现在突然可以在任何地方给任何人打电话了。这大大增加了Web应用的灵活性。

4.4 协议开销小

最后，我们来聊聊效率问题。HTTP协议在每次通信时都要带上重复的头信息，就像你每次给朋友发短信都要先说"你好，我是张三"一样，有点浪费。

而WebSocket只在建立连接时发送一次头信息，之后就可以直接传输数据了。这就大大减少了数据传输量，尤其在频繁通信的场景下，效果更加明显。

想象一下，你和朋友见面后，不用每说一句话都先介绍自己，是不是感觉交流更顺畅了？这就是WebSocket的效率所在。

总结一下，WebSocket通过低延迟、减少服务器负载、支持跨域和减少协议开销等优势，为Web应用提供了更高效实时的通信方式。使得WebSocket在很多场景下成为比HTTP更优秀的选择。

5. WebSocket的实现

好了，是时候卷起袖子，动手实践一下了！我们将从客户端和服务器端两个角度来看看如何使用WebSocket。

5.1 客户端JavaScript API

在浏览器端，WebSocket的使用非常简单。现代浏览器都内置了WebSocket对象，我们只需要几行代码就可以创建一个WebSocket连接。

// 创建一个WebSocket连接
const socket = new WebSocket('ws://example.com/socketserver');

// 连接建立时的回调
socket.onopen = function(event) {
    console.log('WebSocket连接已建立');
};

// 接收消息的回调
socket.onmessage = function(event) {
    console.log('收到消息：', event.data);
};

// 发送消息
socket.send('你好，服务器！');

// 关闭连接的回调
socket.onclose = function(event) {
    console.log('WebSocket连接已关闭');
};

看，就是这么简单！你可以把这个比作电话操作：拨号、接听、说话、挂断。是不是感觉很直观？

5.2 服务器端实现

服务器端的实现会稍微复杂一些，因为它需要处理多个客户端的连接。这里我们以Node.js为例，使用ws库来实现一个简单的WebSocket服务器。

首先，安装ws库：

npm install ws

然后，创建一个简单的WebSocket服务器：

const WebSocket = require('ws');

// 创建一个WebSocket服务器，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

// 当有新的连接时
wss.on('connection', function connection(ws) {
    console.log('新的连接已建立');

    // 当收到消息时
    ws.on('message', function incoming(message) {
        console.log('收到消息：', message);
        
        // 发送消息给客户端
        ws.send('服务器已收到你的消息：' + message);
    });

    // 发送欢迎消息
    ws.send('欢迎连接到WebSocket服务器！');
});

这个服务器会在有新连接时打印一条消息，在收到客户端消息时回复，并在连接建立时发送一条欢迎消息。

5.3 WebSocket库和框架介绍

但在实际开发中，我们通常会使用一些封装好的库或框架，它们提供更多的功能和兼容性。

  1. Socket.IO：不仅支持WebSocket，还提供了回退机制，在WebSocket不可用时可以使用其他方式进行实时通信。

    // 客户端
const socket = io('http://example.com');
socket.on('connect', () => {
    console.log('连接成功');
    socket.emit('hello', 'world');
});

// 服务器端
const io = require('socket.io')(server);
io.on('connection', (socket) => {
    console.log('新用户连接');
    socket.on('hello', (data) => {
        console.log(data);
    });
});

  2. ws：这是一个轻量级的、专注于WebSocket的Node.js库，我们刚才的服务器端例子就是用它实现的。

  3. SockJS：这是另一个流行的选择，它提供了一个类似WebSocket的浏览器JavaScript客户端，可以在不支持WebSocket的浏览器中模拟WebSocket。

选择哪个库取决于具体需求。如果需要兼容性，可以选择Socket.IO；如果只需要WebSocket并追求轻量，可以选择ws；如果需要在旧浏览器中模拟WebSocket，可以考虑SockJS。

6. WebSocket的安全性

我们已经学会了如何使用WebSocket，但是等等！把它用到生产环境之前，我们需要先聊聊安全问题。

6.1 WebSocket安全威胁

首先，让我们看看WebSocket可能面临哪些安全威胁：

  1. 中间人攻击：就像偷听电话一样，攻击者可能会截获并篡改WebSocket通信。

  2. 跨站脚本攻击（XSS）：如果网站允许用户输入的内容未经过滤就通过WebSocket广播，可能会导致XSS攻击。

  3. 拒绝服务攻击（DoS）：攻击者可能会创建大量的WebSocket连接，耗尽服务器资源。

  4. 未经授权的连接：如果没有proper的认证机制，任何人都可能连接到你的WebSocket服务器。

6.2 加密和认证机制

1. 使用WSS（WebSocket Secure）

首先，永远使用WSS而不是WS。WSS就是运行在TLS之上的WebSocket，就像HTTPS之于HTTP。

// 使用WSS
const socket = new WebSocket('wss://example.com/socketserver');

这可以防止中间人攻击，确保通信的机密性和完整性。

2. 实施强认证

在建立WebSocket连接之前，确保用户已经过认证。你可以使用Cookie、令牌或其他认证机制。

// 服务器端
wss.on('connection', function connection(ws, req) {
    const token = url.parse(req.url, true).query.token;
    if (!isValidToken(token)) {
        ws.close();
        return;
    }
    // 认证通过，继续处理连接
});

3. 验证Origin

检查连接请求的Origin头，只接受来自受信任域的连接。

const wss = new WebSocket.Server({ 
    verifyClient: (info) => {
        return info.origin === 'https://trusted-domain.com';
    }
});

4. 实施速率限制

为了防止DoS攻击，可以限制单个IP地址可以建立的连接数量，或者限制消息发送的频率。

const connections = new Map();

wss.on('connection', function connection(ws, req) {
    const ip = req.socket.remoteAddress;
    if (connections.get(ip) >= MAX_CONNECTIONS_PER_IP) {
        ws.close();
        return;
    }
    connections.set(ip, (connections.get(ip) || 0) + 1);
});

总结

好了，我们的WebSocket之旅到这里就告一段落了。从基本概念到工作原理，从实现方法到安全考虑，我们已经全面了解了WebSocket技术。希望这些知识能够帮助你在实际项目中更好地运用WebSocket，创造出更加实时、互动的Web应用。

记住，技术只是工具，重要的是如何运用它来解决实际问题。所以，勇敢地去尝试吧！
相关内容
一文搞懂 java 线程池：SingleThreadExecutor 和 CachedThreadPool 原理
SpringMVC原理（4）-如何为目标方法找到合适的处理器适配器
PHP 网络通信底层原理分析
一文搞懂 java 线程池：ThreadPoolExecutor 和 FixedThreadPool 原理
SpringMVC原理（3）-跨域处理
AI产品经理必修课：NLP技术原理与应用
boost::asio::io_context 在多线程环境中的行为和原理
SpringMVC原理（2）-目标方法是怎么被找到的
浅尝SpringMVC原理
MySQL 表连接的原理是什么？如何优化表连接？