Event-stream — это модуль Node.js, предоставляющий набор потоковых утилит. Он позволяет создавать, манипулировать и комбинировать потоки различными способами. Например, вы можете использовать поток событий для:
- Разделить поток на более мелкие куски
- Объединение нескольких потоков в один
- Фильтрация или преобразование данных потока
- Направляйте потоки в разные места назначения
- Обработка ошибок потока и конечных событий
Вы можете установить поток событий с помощью npm:
npm install event-stream
Или с помощью пряжи:
yarn add event-stream
Что такое выборка?
Fetch — это современный API JavaScript, который позволяет вам делать сетевые запросы и получать ответы в виде читаемого потока. Это замена объекта XMLHttpRequest (XHR), который является традиционным способом выполнения запросов AJAX. fetch имеет несколько преимуществ перед XHR, например:
- Он использует обещания для обработки асинхронных операций.
- Он поддерживает потоковую передачу ответов и запросов.
- Он имеет более простой и понятный синтаксис.
- По умолчанию он следует той же политике происхождения.
Вы можете использовать выборку для выполнения GET, POST, PUT, DELETE и других HTTP-запросов. Например, вы можете использовать выборку, чтобы получить файл JSON с сервера:
fetch('/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Как создать поток событий, используя поток событий и выборку?
Чтобы создать поток событий с помощью event-stream и fetch, нам нужно выполнить следующие шаги:
- Создайте серверный скрипт, который отправляет события, используя тип MIME text/event-stream. Каждое событие представляет собой блок текста, заканчивающийся парой символов новой строки. Событие может иметь имя, полезные данные и необязательный идентификатор. Например:
// server.js
const http = require('http');
const es = require('event-stream');
// Create a HTTP server
const server = http.createServer((req, res) => {
// Check if the request path is /stream
if (req.url === '/stream') {
// Set the response headers
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// Create a counter variable
let counter = 0;
// Create an interval function that sends an event every second
const interval = setInterval(() => {
// Increment the counter
counter++;
// Create an event object with name, data, and id properties
const event = {
name: 'message',
data: `Hello, this is message number ${counter}`,
id: counter
};
// Convert the event object to a string
const eventString = `event: ${event.name}\ndata: ${event.data}\nid: ${event.id}\n\n`;
// Write the event string to the response stream
res.write(eventString);
// End the response stream after 10 events
if (counter === 10) {
clearInterval(interval);
res.end();
}
}, 1000);
} else {
// Handle other requests
res.writeHead(404);
res.end('Not found');
}
});
// Listen on port 3000
server.listen(3000, () => {
console.log('Server listening on port 3000');
});
- Создайте клиентский сценарий, который использует выборку для получения потока событий с сервера. Затем используйте свойство body ответа, чтобы получить читаемый поток. Затем используйте метод getReader() потока, чтобы получить объект чтения. Затем используйте метод read() средства чтения, чтобы прочитать каждый фрагмент данных из потока. Каждый фрагмент представляет собой объект со свойствами value и done. Значение представляет собой Uint8Array, содержащий байты фрагмента. done — это логическое значение, указывающее, завершен ли поток или нет. Например:
// client.js
// Fetch the event stream from the server
fetch('/stream')
.then(response => {
// Get the readable stream from the response body
const stream = response.body;
// Get the reader from the stream
const reader = stream.getReader();
// Define a function to read each chunk
const readChunk = () => {
// Read a chunk from the reader
reader.read()
.then(({
value,
done
}) => {
// Check if the stream is done
if (done) {
// Log a message
console.log('Stream finished');
// Return from the function
return;
}
// Convert the chunk value to a string
const chunkString = new TextDecoder().decode(value);
// Log the chunk string
console.log(chunkString);
// Read the next chunk
readChunk();
})
.catch(error => {
// Log the error
console.error(error);
});
};
// Start reading the first chunk
readChunk();
})
.catch(error => {
// Log the error
console.error(error);
});
- Запустите серверный и клиентский сценарии и наблюдайте за результатами. В консоли браузера вы должны увидеть что-то вроде этого:
event: message data: Hello, this is message number 1 id: 1 event: message data: Hello, this is message number 2 id: 2 event: message data: Hello, this is message number 3 id: 3 event: message data: Hello, this is message number 4 id: 4 event: message data: Hello, this is message number 5 id: 5 event: message data: Hello, this is message number 6 id: 6 event: message data: Hello, this is message number 7 id: 7 event: message data: Hello, this is message number 8 id: 8 event: message data: Hello, this is message number 9 id: 9 event: message data: Hello, this is message number 10 id: 10 Stream finished
Заключение
В этом сообщении блога мы узнали, как использовать event-stream и fetch для создания потока событий, который может отправлять и получать фрагменты данных по сети. Мы увидели, как использовать event-stream для создания потоков и управления ими на стороне сервера, а также как использовать fetch для использования потоков на стороне клиента. Мы также узнали, как использовать читаемые потоки, программы чтения и фрагменты для обработки потоковых данных в JavaScript.
Надеюсь, вы нашли этот пост полезным и информативным. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, оставьте комментарий ниже. Спасибо за чтение!
