【大前端攻城獅之路】用 Typewriter-SSE 實現(xiàn)打字機效果

在現(xiàn)代 Web 開發(fā)中，實現(xiàn)動態(tài)文本渲染的需求日益增多。無論是聊天應(yīng)用、實時通知，還是交互式界面，打字機風(fēng)格的文本渲染都能顯著提升用戶體驗。最近新寫了一個開源的 NPM 包——Typewriter-SSE，它通過 Server-Sent Events (SSE) 技術(shù)實現(xiàn)了流式文本傳輸和打字機效果渲染。項目代碼已開源，可在 GitHub 查看。效果見：

一、SSE 技術(shù)簡介

Server-Sent Events (SSE) 是一種允許服務(wù)器向瀏覽器單向推送數(shù)據(jù)的技術(shù)。與傳統(tǒng)的輪詢或 WebSocket 不同，SSE 基于 HTTP 協(xié)議，僅支持文本數(shù)據(jù)傳輸，且服務(wù)器到客戶端的連接保持開啟狀態(tài)，直到服務(wù)器關(guān)閉連接。SSE 的主要特點包括：

單向通信：僅支持服務(wù)器向客戶端推送數(shù)據(jù)，適合不需要雙向通信的場景。
輕量級：基于 HTTP 協(xié)議，無需額外的 WebSocket 協(xié)議支持。
自動重連：瀏覽器會自動處理連接中斷后的重連邏輯。
簡單易用：通過 EventSource 接口即可在客戶端實現(xiàn) SSE 的接收。

SSE 的典型應(yīng)用場景包括實時通知、動態(tài)數(shù)據(jù)更新等，尤其適合需要服務(wù)器主動推送數(shù)據(jù)的場景。

Typewriter-SSE 的實現(xiàn)原理

Typewriter-SSE 結(jié)合了 SSE 技術(shù)和前端動畫，實現(xiàn)了流式文本的打字機效果渲染。其核心邏輯包括：

SSE 數(shù)據(jù)接收：通過 EventSource 接口連接到服務(wù)器端的 SSE 端點，接收服務(wù)器推送的文本數(shù)據(jù)。
逐字渲染：將接收到的文本數(shù)據(jù)逐字渲染到指定的容器中，通過定時器控制每個字符的渲染速度，模擬打字機效果。
光標動畫：通過 CSS 動畫實現(xiàn)光標的閃爍效果，增強視覺體驗。
交互控制：提供暫停、恢復(fù)、跳過和清空等控制方法，允許用戶在渲染過程中進行操作

二、如何安裝和使用 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 服務(wù)端的 URL
  cursor: {
    blink: true, // 是否讓光標閃爍
    color: '#0f0', // 光標顏色
    char: '|' // 光標字符
  },
  onComplete: () => console.log('Finished typing!') // 文本渲染完成后的回調(diào)函數(shù)
});

writer.start();

三、主要功能和配置選項

1. 打字機效果

Typewriter-SSE 的核心功能是將文本逐字渲染到指定的容器中，模擬打字機的效果。你可以通過 typingSpeed 選項來控制每個字符的延遲時間，從而調(diào)整打字的速度。

2. SSE 支持

通過 SSE 技術(shù)，Typewriter-SSE 能夠動態(tài)接收來自服務(wù)器的文本數(shù)據(jù)。這意味著你可以將文本分段發(fā)送到客戶端，而客戶端會逐字渲染這些文本。這種技術(shù)特別適合實現(xiàn)聊天機器人、實時通知等場景。

3. 光標自定義

你可以通過 cursor 選項來自定義光標的樣式，包括是否閃爍、顏色和字符。這讓你可以根據(jù)項目的整體風(fēng)格來調(diào)整光標的視覺效果。

4. 事件回調(diào)

Typewriter-SSE 提供了多種事件回調(diào)函數(shù)，例如 onChar（每個字符渲染時觸發(fā)）和 onComplete（文本渲染完成時觸發(fā)）。這些回調(diào)函數(shù)可以幫助你更好地控制文本渲染過程，并在合適的時候執(zhí)行其他邏輯。

5. 暫停、恢復(fù)、跳過和清空

Typewriter-SSE 提供了暫停、恢復(fù)、跳過和清空文本的控制方法。你可以通過這些方法來實現(xiàn)更復(fù)雜的交互邏輯，例如讓用戶暫停文本渲染、跳過未渲染的文本或清空已渲染的文本。

四、一個完整的示例

為了讓大家更好地理解 Typewriter-SSE 的使用方法，我將展示一個完整的示例。這個示例包括一個簡單的服務(wù)器端代碼和一個客戶端頁面，用于演示 Typewriter-SSE 的效果。

1. 服務(wù)器端代碼

這是一個基于 Node.js 的簡單服務(wù)器代碼，它通過 SSE 技術(shù)向客戶端發(fā)送分段的文本數(shù)據(jù)。

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 || "你沒有輸入任何內(nèi)容哦～";

    const paragraphs = [
        `你輸入的是「${query}」`,
        `這是段模擬的第一個回復(fù) ??`,
        `接下來是第二段回復(fù) ??`,
        `最后一段啦，演示完畢 ??`
    ];

    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 來渲染來自服務(wù)器的文本數(shù)據(jù)。

<!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">發(fā)送</button>
        <button id="pause">暫停</button>
        <button id="resume">繼續(xù)</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('請輸入內(nèi)容');
            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>

總結(jié)

Typewriter-SSE 是一個基于 SSE 技術(shù)實現(xiàn)的流式文本渲染庫，能夠為 Web 應(yīng)用帶來動態(tài)的打字機效果。它不僅支持流式文本傳輸，還提供了豐富的交互控制功能。如果你對 Typewriter-SSE 感興趣，或者希望了解更多實現(xiàn)細節(jié)，歡迎訪問 GitHub 倉庫。

posted @ 2025-04-29 15:57 TJYoung 閱讀(548) 評論(0) 收藏舉報

刷新頁面返回頂部

TJYoung