JS `WebTransport` `Session Management` 与 `Connection Migration` - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们来聊聊WebTransport这玩意儿里的Session Management（会话管理）和 Connection Migration（连接迁移），这俩兄弟听起来高大上，其实搞清楚了，也没那么神秘。咱们争取用最接地气的方式，把它们扒个精光。

WebTransport：HTTP/3 的亲儿子

首先，得稍微回顾一下WebTransport是个啥。简单说，它就是一个基于HTTP/3协议，提供可靠、不可靠双向数据传输能力的API。你可以把它想象成一个管道，既能送快递（可靠传输），也能扔飞盘（不可靠传输），而且还是双向的，能收能发。

Session Management：咱们得认得对方是谁

会话管理，顾名思义，就是管理会话的。在WebTransport里，一个会话就是一个WebTransportSession对象。这个对象代表了客户端和服务器之间的一个连接。

Session 的建立：握个手，认识一下

建立Session的过程，就好比两个人握手。客户端发起连接，服务器接受连接，然后大家就算认识了，可以开始聊天了。

// 客户端代码
async function connect() {
    const transport = new WebTransport('https://example.com:4433/');

    transport.addEventListener('sessionestablished', () => {
        console.log('Session established!');
    });

    try {
        await transport.ready; // 等待连接建立
        console.log('WebTransport is ready!');
    } catch (e) {
        console.error('Failed to connect: ', e);
    }

    // ... 后续操作
}

connect();

// 服务器端代码 (Node.js 示例，需要一个HTTP/3服务器库，例如`@failsafe-dpc/http3`)
const http3 = require('@failsafe-dpc/http3');
const fs = require('fs');

const options = {
    port: 4433,
    key: fs.readFileSync('server.key'), // 你的私钥
    cert: fs.readFileSync('server.crt'), // 你的证书
};

const server = http3.createServer(options);

server.on('session', (session) => {
    console.log('New session!');

    session.addEventListener('close', () => {
        console.log('Session closed.');
    });

    // ... 后续操作
});

server.listen(options.port, () => {
    console.log(`Server listening on port ${options.port}`);
});

这段代码展示了客户端如何通过new WebTransport()创建一个WebTransport实例，并监听sessionestablished事件，这个事件在session建立后触发。服务器端则使用@failsafe-dpc/http3库创建一个HTTP/3服务器，并在session事件中处理新的WebTransport会话。

Session 的状态：你在哪儿？还活着吗？

Session有几个状态：

状态	描述
connecting	正在连接
connected	已连接，可以开始发送数据
closed	已关闭，不能再发送数据
failed	连接失败，通常是因为网络问题或者服务器拒绝连接

你可以通过transport.ready promise来判断连接是否成功建立。

Session 的关闭：再见，下次再聊

Session结束的时候，需要关闭连接。客户端和服务器都可以主动关闭连接。

// 关闭连接
transport.close();

关闭连接的时候，可以传递一个错误码和一个原因短语，告诉对方为什么关闭连接。

// 客户端关闭连接
transport.close({
    closeCode: 1000, // Normal Closure
    reason: 'User initiated close'
});

// 服务器端关闭连接
session.close({
    closeCode: 3000, // Application Error
    reason: 'Something went wrong'
});

Connection Migration：换个姿势继续聊

重点来了！Connection Migration，连接迁移，这可是WebTransport的杀手锏之一。啥意思呢？就是说，如果你的网络环境变了（比如从WiFi切换到移动数据），连接可以自动迁移到新的网络，而不用重新建立连接。这对于移动应用来说，简直是福音啊！

为什么需要连接迁移？

想象一下，你在高铁上用手机视频通话，从一个基站切换到另一个基站，如果没有连接迁移，你就得掉线重连，体验太差了。有了连接迁移，你就可以无缝切换网络，继续畅聊。
连接迁移的原理：换汤不换药

连接迁移的原理，简单来说，就是WebTransport底层使用的QUIC协议，它用连接ID来标识一个连接，而不是像TCP那样用IP地址和端口号。当网络环境改变时，IP地址和端口号可能会变，但是连接ID不变，所以连接可以继续保持。
连接迁移的实现：悄悄地，它就发生了

WebTransport的连接迁移是自动的，你不需要写额外的代码来处理。但是，你需要确保你的服务器和客户端都支持连接迁移。

客户端：

客户端通常不需要做任何额外的配置。只要你的浏览器支持WebTransport，并且服务器也支持连接迁移，那么连接迁移就会自动发生。

服务器端：

服务器端需要配置QUIC服务器来支持连接迁移。具体的配置方法取决于你使用的QUIC服务器库。例如，如果你使用@failsafe-dpc/http3库，你需要在创建服务器的时候，启用连接迁移。
```
const http3 = require('@failsafe-dpc/http3');
const fs = require('fs');

const options = {
    port: 4433,
    key: fs.readFileSync('server.key'), // 你的私钥
    cert: fs.readFileSync('server.crt'), // 你的证书
    allow_migration: true // 启用连接迁移
};

const server = http3.createServer(options);

server.on('session', (session) => {
    console.log('New session!');

    session.addEventListener('close', () => {
        console.log('Session closed.');
    });

    // ... 后续操作
});

server.listen(options.port, () => {
    console.log(`Server listening on port ${options.port}`);
});
```
注意allow_migration: true 这个选项，它告诉服务器允许连接迁移。
连接迁移的注意事项：防患于未然
- 服务器需要支持连接迁移： 这是最基本的要求。如果服务器不支持连接迁移，那么客户端即使支持，也无法进行连接迁移。
- 防火墙配置： 有些防火墙可能会阻止连接迁移。你需要确保你的防火墙允许QUIC协议通过。
- NAT穿透： 在某些NAT环境下，连接迁移可能会失败。你需要考虑NAT穿透的问题。

代码示例：一个简单的WebTransport聊天室

为了更好地理解Session Management和Connection Migration，我们来写一个简单的WebTransport聊天室。

服务器端 (Node.js):

const http3 = require('@failsafe-dpc/http3');
const fs = require('fs');

const options = {
    port: 4433,
    key: fs.readFileSync('server.key'),
    cert: fs.readFileSync('server.crt'),
    allow_migration: true
};

const server = http3.createServer(options);

const sessions = new Set(); // 保存所有session

server.on('session', (session) => {
    console.log('New session!');
    sessions.add(session);

    session.addEventListener('close', () => {
        console.log('Session closed.');
        sessions.delete(session);
    });

    // 处理传入的Unidirectional Stream
    session.on('incomingunidirectionstream', async (stream) => {
        console.log("server received a unidirectional stream");
        try {
            const reader = stream.getReader();
            let result;
            while (!(result = await reader.read()).done) {
                const message = new TextDecoder().decode(result.value);
                console.log(`Received: ${message}`);

                // 广播消息给所有session
                for (const s of sessions) {
                    if (s !== session) { // 不发给自己
                        try {
                            const uniStream = await s.createUnidirectionalStream();
                            const writer = uniStream.getWriter();
                            await writer.write(`[${session.id.substring(0, 8)}]: ${message}`);
                            await writer.close();
                        } catch (e) {
                            console.error("Error sending message to session:", s.id, e);
                        }
                    }
                }
            }
        } catch (e) {
            console.error("Error reading from stream:", e);
        }
    });

    // 可以选择使用 Bidirectional Stream
    // session.addEventListener('datagramreceived', (event) => {
    //     const message = new TextDecoder().decode(event.data);
    //     console.log(`Received: ${message}`);
    // });
});

server.listen(options.port, () => {
    console.log(`Server listening on port ${options.port}`);
});

客户端 (HTML + JavaScript):

<!DOCTYPE html>
<html>
<head>
    <title>WebTransport Chat</title>
</head>
<body>
    <h1>WebTransport Chat</h1>
    <input type="text" id="messageInput" placeholder="Enter message">
    <button id="sendButton">Send</button>
    <div id="messages"></div>

    <script>
        async function connect() {
            const transport = new WebTransport('https://localhost:4433/');

            transport.addEventListener('sessionestablished', () => {
                console.log('Session established!');
            });

            try {
                await transport.ready;
                console.log('WebTransport is ready!');

                const sendButton = document.getElementById('sendButton');
                const messageInput = document.getElementById('messageInput');
                const messagesDiv = document.getElementById('messages');

                sendButton.addEventListener('click', async () => {
                    const message = messageInput.value;
                    messageInput.value = '';

                    try {
                        const uniStream = await transport.createUnidirectionalStream();
                        const writer = uniStream.getWriter();
                        await writer.write(message);
                        await writer.close();
                    } catch (e) {
                        console.error("Error sending message:", e);
                    }
                });

                transport.addEventListener('incomingunidirectionstream', async (event) => {
                    console.log("client received a unidirectional stream");
                    const stream = event.stream;
                    try {
                        const reader = stream.getReader();
                        let result;
                        while (!(result = await reader.read()).done) {
                            const message = new TextDecoder().decode(result.value);
                            const messageElement = document.createElement('p');
                            messageElement.textContent = message;
                            messagesDiv.appendChild(messageElement);
                        }
                    } catch (e) {
                        console.error("Error reading from stream:", e);
                    }
                });

            } catch (e) {
                console.error('Failed to connect: ', e);
            }
        }

        connect();
    </script>
</body>
</html>

这个聊天室非常简单，客户端可以输入消息，然后通过Unidirectional Stream发送给服务器。服务器收到消息后，会广播给所有连接的客户端。

总结：WebTransport，未来可期

WebTransport的Session Management和Connection Migration是其核心特性之一。它们使得WebTransport在移动互联网时代具有很大的优势。虽然WebTransport还比较新，但是它的潜力是巨大的。相信在不久的将来，WebTransport会成为Web开发的重要组成部分。

好了，今天的讲座就到这里。希望大家有所收获！有问题欢迎提问，没问题的话，就散会啦！

发表回复 取消回复

发表回复取消回复