【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果

在现代 Web 开发中，实现动态文本渲染的需求日益增多。无论是聊天应用、实时通知，还是交互式界面，打字机风格的文本渲染都能显著提升用户体验。最近新写了一个开源的 NPM 包——Typewriter-SSE，它通过 Server-Sent Events (SSE) 技术实现了流式文本传输和打字机效果渲染。项目代码已开源，可在 GitHub 查看。效果见：

一、SSE 技术简介

Server-Sent Events (SSE) 是一种允许服务器向浏览器单向推送数据的技术。与传统的轮询或 WebSocket 不同，SSE 基于 HTTP 协议，仅支持文本数据传输，且服务器到客户端的连接保持开启状态，直到服务器关闭连接。SSE 的主要特点包括：

单向通信：仅支持服务器向客户端推送数据，适合不需要双向通信的场景。
轻量级：基于 HTTP 协议，无需额外的 WebSocket 协议支持。
自动重连：浏览器会自动处理连接中断后的重连逻辑。
简单易用：通过 EventSource 接口即可在客户端实现 SSE 的接收。

SSE 的典型应用场景包括实时通知、动态数据更新等，尤其适合需要服务器主动推送数据的场景。

Typewriter-SSE 的实现原理

Typewriter-SSE 结合了 SSE 技术和前端动画，实现了流式文本的打字机效果渲染。其核心逻辑包括：

SSE 数据接收：通过 EventSource 接口连接到服务器端的 SSE 端点，接收服务器推送的文本数据。
逐字渲染：将接收到的文本数据逐字渲染到指定的容器中，通过定时器控制每个字符的渲染速度，模拟打字机效果。
光标动画：通过 CSS 动画实现光标的闪烁效果，增强视觉体验。
交互控制：提供暂停、恢复、跳过和清空等控制方法，允许用户在渲染过程中进行操作

二、如何安装和使用 Typewriter-SSE？

安装 Typewriter-SSE 非常简单，只需要通过 npm 命令即可完成：

npm install typewriter-sse

在项目中使用

import TypewriterSSE from 'typewriter-sse';

const writer = new TypewriterSSE({

  container: '#output', // 指定文本渲染的容器

  endpoint: '/sse?q=hello world', // SSE 服务端的 URL

  cursor: {

    blink: true, // 是否让光标闪烁

    color: '#0f0', // 光标颜色

    char: '|' // 光标字符

  },

  onComplete: () => console.log('Finished typing!') // 文本渲染完成后的回调函数

});

writer.start();

三、主要功能和配置选项

1. 打字机效果

Typewriter-SSE 的核心功能是将文本逐字渲染到指定的容器中，模拟打字机的效果。你可以通过 typingSpeed 选项来控制每个字符的延迟时间，从而调整打字的速度。

2. SSE 支持

通过 SSE 技术，Typewriter-SSE 能够动态接收来自服务器的文本数据。这意味着你可以将文本分段发送到客户端，而客户端会逐字渲染这些文本。这种技术特别适合实现聊天机器人、实时通知等场景。

3. 光标自定义

你可以通过 cursor 选项来自定义光标的样式，包括是否闪烁、颜色和字符。这让你可以根据项目的整体风格来调整光标的视觉效果。

4. 事件回调

Typewriter-SSE 提供了多种事件回调函数，例如 onChar（每个字符渲染时触发）和 onComplete（文本渲染完成时触发）。这些回调函数可以帮助你更好地控制文本渲染过程，并在合适的时候执行其他逻辑。

5. 暂停、恢复、跳过和清空

Typewriter-SSE 提供了暂停、恢复、跳过和清空文本的控制方法。你可以通过这些方法来实现更复杂的交互逻辑，例如让用户暂停文本渲染、跳过未渲染的文本或清空已渲染的文本。

四、一个完整的示例

为了让大家更好地理解 Typewriter-SSE 的使用方法，我将展示一个完整的示例。这个示例包括一个简单的服务器端代码和一个客户端页面，用于演示 Typewriter-SSE 的效果。

1. 服务器端代码

这是一个基于 Node.js 的简单服务器代码，它通过 SSE 技术向客户端发送分段的文本数据。

const express = require('express');

const path = require('path');

const app = express();

const PORT = 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/sse', (req, res) => {

    res.setHeader('Content-Type', 'text/event-stream');

    res.setHeader('Cache-Control', 'no-cache');

    res.setHeader('Connection', 'keep-alive');

    const query = req.query.q || "你没有输入任何内容哦～";

    const paragraphs = [

        `你输入的是「${query}」`,

        `这是段模拟的第一个回复 `,

        `接下来是第二段回复 `,

        `最后一段啦，演示完毕 `

    ];

    let pIndex = 0;

    let charIndex = 0;

    const interval = setInterval(() => {

        if (pIndex < paragraphs.length) {

            if (charIndex < paragraphs[pIndex].length) {

                res.write(`data: ${paragraphs[pIndex][charIndex++]}\n\n`);

            } else {

                res.write(`data: \n\n`); // 空行分段

                pIndex++;

                charIndex = 0;

            }

        } else {

            clearInterval(interval);

            res.write('event: done\n');

            res.write('data: end\n\n');

            res.end();

        }

    }, 50);

});

app.listen(PORT, () => {

    console.log(`Server running at http://localhost:${PORT}`);

});

2. 客户端页面

这是一个简单的 HTML 页面，它使用 Typewriter-SSE 来渲染来自服务器的文本数据。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>打字机 + SSE + 控制面板</title>

    <style>

        body {

            background: #111;

            color: #0f0;

            font-family: monospace;

            padding: 20px;

        }

        #output {

            white-space: pre-wrap;

            font-size: 1.2em;

            min-height: 100px;

            margin-top: 1em;

        }

        input[type="text"], button {

            padding: 8px;

            font-size: 1em;

            margin: 5px 5px 5px 0;

            background: #222;

            color: #0f0;

            border: 1px solid #0f0;

        }

        .controls {

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <h2>打字机效果演示</h2>

    <input type="text" id="prompt" placeholder="请输入..." />

    <div class="controls">

        <button id="send">发送</button>

        <button id="pause">暂停</button>

        <button id="resume">继续</button>

        <button id="skip">跳过</button>

        <button id="delete">清空输出</button>

    </div>

    <div id="output"></div>

    <script type="module">

        import TypewriterSSE from './typewriter-sse.js';

        let writer = null;

        document.getElementById('send').addEventListener('click', () => {

            const query = document.getElementById('prompt').value.trim();

            if (!query) return alert('请输入内容');

            if (writer) writer.stop();

            const output = document.getElementById('output');

            output.textContent = "";

            writer = new TypewriterSSE({

                container: output,

                endpoint: '/sse?q=' + encodeURIComponent(query),

                cursor: { blink: true, color: '#0f0', char: '|' },

                onComplete: () => console.log('输入完成')

            });

            writer.start();

        });

        document.getElementById('pause').addEventListener('click', () => {

            if (writer) writer.pause();

        });

        document.getElementById('resume').addEventListener('click', () => {

            if (writer) writer.resume();

        });

        document.getElementById('skip').addEventListener('click', () => {

            if (writer) writer.skip();

        });

        document.getElementById('delete').addEventListener('click', () => {

            if (writer) writer.deleteAll();

        });

    </script>

</body>

</html>

总结

Typewriter-SSE 是一个基于 SSE 技术实现的流式文本渲染库，能够为 Web 应用带来动态的打字机效果。它不仅支持流式文本传输，还提供了丰富的交互控制功能。如果你对 Typewriter-SSE 感兴趣，或者希望了解更多实现细节，欢迎访问 GitHub 仓库。