【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果
生活随笔
收集整理的這篇文章主要介紹了
【大前端攻城狮之路】用 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 倉庫。
總結
以上是生活随笔為你收集整理的【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JuiceFS v1.3-beta1：新
- 下一篇： Special Binary Strin