【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果
生活随笔
收集整理的這篇文章主要介紹了
【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在現(xiàn)代 Web 開發(fā)中，實(shí)現(xiàn)動(dòng)態(tài)文本渲染的需求日益增多。無(wú)論是聊天應(yīng)用、實(shí)時(shí)通知，還是交互式界面，打字機(jī)風(fēng)格的文本渲染都能顯著提升用戶體驗(yàn)。最近新寫了一個(gè)開源的 NPM 包——Typewriter-SSE，它通過(guò) Server-Sent Events (SSE) 技術(shù)實(shí)現(xiàn)了流式文本傳輸和打字機(jī)效果渲染。項(xiàng)目代碼已開源，可在 GitHub 查看。效果見：
一、SSE 技術(shù)簡(jiǎn)介
Server-Sent Events (SSE) 是一種允許服務(wù)器向?yàn)g覽器單向推送數(shù)據(jù)的技術(shù)。與傳統(tǒng)的輪詢或 WebSocket 不同，SSE 基于 HTTP 協(xié)議，僅支持文本數(shù)據(jù)傳輸，且服務(wù)器到客戶端的連接保持開啟狀態(tài)，直到服務(wù)器關(guān)閉連接。SSE 的主要特點(diǎn)包括：
- 單向通信：僅支持服務(wù)器向客戶端推送數(shù)據(jù)，適合不需要雙向通信的場(chǎng)景。
- 輕量級(jí)：基于 HTTP 協(xié)議，無(wú)需額外的 WebSocket 協(xié)議支持。
- 自動(dòng)重連：瀏覽器會(huì)自動(dòng)處理連接中斷后的重連邏輯。
- 簡(jiǎn)單易用：通過(guò)
EventSource接口即可在客戶端實(shí)現(xiàn) SSE 的接收。
SSE 的典型應(yīng)用場(chǎng)景包括實(shí)時(shí)通知、動(dòng)態(tài)數(shù)據(jù)更新等，尤其適合需要服務(wù)器主動(dòng)推送數(shù)據(jù)的場(chǎng)景。
Typewriter-SSE 的實(shí)現(xiàn)原理
Typewriter-SSE 結(jié)合了 SSE 技術(shù)和前端動(dòng)畫，實(shí)現(xiàn)了流式文本的打字機(jī)效果渲染。其核心邏輯包括：
- SSE 數(shù)據(jù)接收：通過(guò)
EventSource接口連接到服務(wù)器端的 SSE 端點(diǎn)，接收服務(wù)器推送的文本數(shù)據(jù)。 - 逐字渲染：將接收到的文本數(shù)據(jù)逐字渲染到指定的容器中，通過(guò)定時(shí)器控制每個(gè)字符的渲染速度，模擬打字機(jī)效果。
- 光標(biāo)動(dòng)畫：通過(guò) CSS 動(dòng)畫實(shí)現(xiàn)光標(biāo)的閃爍效果，增強(qiáng)視覺體驗(yàn)。
- 交互控制：提供暫停、恢復(fù)、跳過(guò)和清空等控制方法，允許用戶在渲染過(guò)程中進(jìn)行操作
二、如何安裝和使用 Typewriter-SSE？
安裝 Typewriter-SSE 非常簡(jiǎn)單，只需要通過(guò) npm 命令即可完成：
npm install typewriter-sse
在項(xiàng)目中使用
import TypewriterSSE from 'typewriter-sse';
const writer = new TypewriterSSE({
container: '#output', // 指定文本渲染的容器
endpoint: '/sse?q=hello world', // SSE 服務(wù)端的 URL
cursor: {
blink: true, // 是否讓光標(biāo)閃爍
color: '#0f0', // 光標(biāo)顏色
char: '|' // 光標(biāo)字符
},
onComplete: () => console.log('Finished typing!') // 文本渲染完成后的回調(diào)函數(shù)
});
writer.start();
三、主要功能和配置選項(xiàng)
1. 打字機(jī)效果
Typewriter-SSE 的核心功能是將文本逐字渲染到指定的容器中，模擬打字機(jī)的效果。你可以通過(guò)
typingSpeed 選項(xiàng)來(lái)控制每個(gè)字符的延遲時(shí)間，從而調(diào)整打字的速度。2. SSE 支持
通過(guò) SSE 技術(shù)，Typewriter-SSE 能夠動(dòng)態(tài)接收來(lái)自服務(wù)器的文本數(shù)據(jù)。這意味著你可以將文本分段發(fā)送到客戶端，而客戶端會(huì)逐字渲染這些文本。這種技術(shù)特別適合實(shí)現(xiàn)聊天機(jī)器人、實(shí)時(shí)通知等場(chǎng)景。
3. 光標(biāo)自定義
你可以通過(guò)
cursor 選項(xiàng)來(lái)自定義光標(biāo)的樣式，包括是否閃爍、顏色和字符。這讓你可以根據(jù)項(xiàng)目的整體風(fēng)格來(lái)調(diào)整光標(biāo)的視覺效果。4. 事件回調(diào)
Typewriter-SSE 提供了多種事件回調(diào)函數(shù)，例如
onChar（每個(gè)字符渲染時(shí)觸發(fā)）和 onComplete（文本渲染完成時(shí)觸發(fā)）。這些回調(diào)函數(shù)可以幫助你更好地控制文本渲染過(guò)程，并在合適的時(shí)候執(zhí)行其他邏輯。5. 暫停、恢復(fù)、跳過(guò)和清空
Typewriter-SSE 提供了暫停、恢復(fù)、跳過(guò)和清空文本的控制方法。你可以通過(guò)這些方法來(lái)實(shí)現(xiàn)更復(fù)雜的交互邏輯，例如讓用戶暫停文本渲染、跳過(guò)未渲染的文本或清空已渲染的文本。
四、一個(gè)完整的示例
為了讓大家更好地理解 Typewriter-SSE 的使用方法，我將展示一個(gè)完整的示例。這個(gè)示例包括一個(gè)簡(jiǎn)單的服務(wù)器端代碼和一個(gè)客戶端頁(yè)面，用于演示 Typewriter-SSE 的效果。
1. 服務(wù)器端代碼
這是一個(gè)基于 Node.js 的簡(jiǎn)單服務(wù)器代碼，它通過(guò) 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}」`,
`這是段模擬的第一個(gè)回復(fù) `,
`接下來(lái)是第二段回復(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. 客戶端頁(yè)面
這是一個(gè)簡(jiǎn)單的 HTML 頁(yè)面，它使用 Typewriter-SSE 來(lái)渲染來(lái)自服務(wù)器的文本數(shù)據(jù)。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>打字機(jī) + 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>打字機(jī)效果演示</h2>
<input type="text" id="prompt" placeholder="請(qǐng)輸入..." />
<div class="controls">
<button id="send">發(fā)送</button>
<button id="pause">暫停</button>
<button id="resume">繼續(xù)</button>
<button id="skip">跳過(guò)</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('請(qǐng)輸入內(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 是一個(gè)基于 SSE 技術(shù)實(shí)現(xiàn)的流式文本渲染庫(kù)，能夠?yàn)?Web 應(yīng)用帶來(lái)動(dòng)態(tài)的打字機(jī)效果。它不僅支持流式文本傳輸，還提供了豐富的交互控制功能。如果你對(duì) Typewriter-SSE 感興趣，或者希望了解更多實(shí)現(xiàn)細(xì)節(jié)，歡迎訪問(wèn) GitHub 倉(cāng)庫(kù)。
總結(jié)
以上是生活随笔為你收集整理的【大前端攻城狮之路】用 Typewriter-SSE 实现打字机效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JuiceFS v1.3-beta1：新
- 下一篇： Special Binary Strin