WebSocket我知道，但是这个WebSocketStream是什么鬼？

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

在现代Web开发中，实时通信变得越来越重要。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，已经成为实现实时Web应用的首选技术。然而，随着技术的发展，WebSocketStream作为一种新的API，提供了与传统WebSocket不同的特性和优势。本文将探讨WebSocketStream与WebSocket的异同，并逐步引导您了解为什么要使用WebSocketStream，以及如何使用它来实现WebSocket功能。

WebSocketStream与WebSocket的异同

WebSocket

WebSocket是一种网络通信协议，提供了在客户端和服务器之间进行全双工通信的能力。它允许服务器主动向客户端发送消息，而不需要客户端不断地轮询服务器。WebSocket API在浏览器和Node.js中都有实现，通常通过new WebSocket(url)来创建一个新的WebSocket连接。

WebSocketStream

WebSocketStream是基于Streams API的WebSocket通信的新方式。它允许更细粒度的控制数据流，并且可以与现有的流处理库（如Node.js中的流）无缝集成。在浏览器中，WebSocketStream可以通过new WebSocketStream(url)来创建。它提供了readable和writable流，使得数据的发送和接收可以以流的形式进行处理。

为什么要使用WebSocketStream

WebSocketStream的主要优势在于其与Streams API的集成，这使得它在处理大量数据或需要精细控制数据流的场景中更加灵活和高效。此外，WebSocketStream也支持流的背压机制，有助于在数据消费速度跟不上生产速度时防止内存溢出。

使用WebSocketStream实现WebSocket功能

接下来，我们将通过一个简单的示例来展示如何使用WebSocketStream实现WebSocket功能。

1. 设置项目和安装依赖

首先，我们需要创建一个Node.js项目，并安装必要的依赖。根据提供的package.json文件，我们可以看到项目依赖于express和ws库。

{
  "name": "ws-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.21.1",
    "ws": "^8.18.0"
  }
}

2. 创建WebSocket服务器

在index.js文件中，我们创建了一个Express应用，并使用ws库创建了一个WebSocket服务器。

const express = require('express');
const { createServer } = require('http');
const { Server } = require('ws');

const app = express();
const server = createServer(app);
const wss = new Server({ server });

app.use(express.static('public'));

3. 处理WebSocket连接和消息

当客户端连接到WebSocket服务器时，我们设置了一个事件监听器来处理接收到的消息，并定期向客户端发送消息。

wss.on('connection', function connection(ws) {
    let id;
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });

    ws.on('close', function incoming(message) {
        console.log(`断开ws`);
        clearInterval(id);
    });

    let i = 0;
    id = setInterval(() => {
        ws.send(`第${++i}次服务端发送数据`);
    }, 1000);
});

4. 启动服务器

服务器监听80端口，当启动时，会在控制台输出监听的端口号。

server.listen(80, function listening() {
    console.log('Listening on %d', server.address().port);
});

5. 创建客户端页面

在public/index.html中，我们创建了一个简单的HTML页面，用于显示WebSocket通信的结果。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebSocketStream Test</title>
  </head>
  <body>
    <h2>WebSocketStream Test</h2>
    <p>Sends a ping every five seconds</p>
    <button id="close" disabled>Close socket connection</button>
    <div id="output"></div>
    <script src="./index.js"></script>
  </body>
</html>

6. 实现WebSocketStream客户端逻辑

在public/index.js中，我们实现了WebSocketStream的客户端逻辑。首先检查浏览器是否支持WebSocketStream，然后创建一个新的WebSocketStream连接，并处理连接、消息发送和接收。

const output = document.querySelector("#output");
const closeBtn = document.querySelector("#close");

function writeToScreen(message) {
    const pElem = document.createElement("p");
    pElem.textContent = message;
    output.appendChild(pElem);
}

if (!("WebSocketStream" in self)) {
    writeToScreen("Your browser does not support WebSocketStream");
} else {
    const wsURL = "ws://127.0.0.1/";
    const wss = new WebSocketStream(wsURL);

    console.log(wss.url);

    async function start() {
        const { readable, writable, extensions, protocol } = await wss.opened;
        writeToScreen("CONNECTED");
        closeBtn.disabled = false;
        const reader = readable.getReader();
        const writer = writable.getWriter();

        writer.write("ping");
        writeToScreen("SENT: ping");

        while (true) {
            const { value, done } = await reader.read();
            writeToScreen(`RECEIVED: ${value}`);
            if (done) {
                break;
            }

            setTimeout(() => {
                writer.write("ping");
                writeToScreen("SENT: ping");
            }, 5000);
        }
    }

    start();

    wss.closed.then((result) => {
        writeToScreen(
            `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
        );
        console.log("Socket closed", result.closeCode, result.reason);
    });

    closeBtn.addEventListener("click", () => {
        wss.close({
            code: 1000,
            reason: "That's all folks",
        });

        closeBtn.disabled = true;
    });
}

结论

通过本文的逐步引导，我们了解了WebSocketStream与WebSocket的异同，并学习了如何使用WebSocketStream来实现WebSocket功能。WebSocketStream以其与Streams API的集成和背压机制，为实时Web通信提供了一个强大而灵活的新选择。希望本文能够帮助您更好地理解和应用WebSocketStream。

最后感谢阅读！欢迎点赞、收藏、关注，一键三连！！！

WebSocket我知道，但是这个WebSocketStream是什么鬼？