Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Sembang dibina oleh nodejs sse
Sembang dibina oleh nodejs sse
- WBOYasal
- 2023-05-23 19:07:36750semak imbas
Bilik sembang yang dibina oleh Node.js SSE
Dengan populariti dan perkembangan Internet, bilik sembang telah menjadi platform penting untuk komunikasi dalam talian harian orang ramai. Sebagai bahasa JavaScript sisi pelayan berdasarkan model I/O dipacu peristiwa dan tidak menyekat, Node.js boleh meningkatkan prestasi dan responsif aplikasi dengan banyak, dan oleh itu telah menjadi salah satu teknologi pilihan untuk banyak aplikasi web.
Artikel ini akan memperkenalkan cara menggunakan teknologi Node.js dan SSE (Server-Sent Events) untuk membina ruang sembang ringkas supaya pengguna boleh menerima mesej sembang dalam masa nyata.
- Node.js dan SSE
SSE ialah teknologi yang ditakrifkan dalam HTML5 yang membolehkan pelayan menghantar strim acara kepada pelanggan dan pelanggan boleh lulus API EventSource untuk menerima aliran acara ini. Dalam aliran acara ini, pelayan boleh menghantar mesej kepada klien dalam masa nyata, dan klien juga boleh berinteraksi dengan menghantar data ke pelayan.
Node.js boleh mencipta pelayan web dengan mudah dan ia mempunyai modul HTTP terbina dalam yang boleh digunakan untuk mengendalikan permintaan dan respons HTTP. Melalui modul ini, kita boleh melaksanakan teknologi SSE dengan mudah.
- Bina bilik sembang
2.1 Cipta pelayan
Pertama, kita perlu mencipta projek Node.js. Dalam direktori akar projek, kami mencipta fail server.js dan memperkenalkan modul http.
const http = require('http');Kemudian, kita perlu mencipta pelayan HTTP dan mendengar pada port 8080.
const server = http.createServer((req, res) => {
// 代码稍后补充
});
server.listen(8080);2.2 Pelaksanaan Teknologi SSE
Kami perlu mencipta laluan pada pelayan untuk menghantar aliran acara. Dalam laluan ini, kami akan menggunakan API EventSource untuk menghantar mesej kepada pelanggan.
const SSE_SEND_CONTENT_TYPE = 'text/event-stream; charset=utf-8';
const SSE_SEND_DATA_PREFIX = 'data: ';
const SSE_SEND_EVENT_PREFIX = 'event: ';
const SSE_SEND_ID_PREFIX = 'id: ';
const SSE_SEND_RETRY_PREFIX = 'retry: ';
const headers = {
'Content-Type': SSE_SEND_CONTENT_TYPE,
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
};
server.on('request', (req, res) => {
if (req.method === 'GET' && req.url === '/chat') {
res.writeHead(200, headers);
const clientId = Date.now();
const sseStream = new ServerSentEventsStream(clientId, res);
clients.set(clientId, sseStream);
req.on('close', () => {
clients.delete(clientId);
sseStream.close();
});
} else {
res.writeHead(404);
res.end();
}
});
class ServerSentEventsStream {
constructor(clientId, response) {
this.clientId = clientId;
this.response = response;
this.closed = false;
}
sendEvent(event, data) {
if (!this.closed) {
const message = `${SSE_SEND_EVENT_PREFIX} ${event}
${SSE_SEND_DATA_PREFIX}${JSON.stringify(data)}
`;
this.response.write(message);
}
}
close() {
if (!this.closed) {
this.closed = true;
this.response.end();
}
}
}2.3 Melaksanakan fungsi bilik sembang
Selepas melengkapkan langkah di atas, kami kini boleh melaksanakan teknologi asas SSE pada pelayan. Seterusnya, kita perlu melaksanakan fungsi sembang pada klien.
Kami perlu mencipta halaman HTML pada klien untuk memaparkan maklumat sembang. Dalam halaman ini, kami akan menggunakan JavaScript untuk menghantar mesej sembang dan menerima mesej yang dikembalikan oleh pelayan. Dan, kami juga perlu menggunakan API EventSource untuk mendengar mesej yang dihantar oleh pelayan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatroom</title>
</head>
<body>
<form id="chat-form">
<input type="text" id="msg-input" placeholder="Enter message">
<button type="submit" id="send-button">Send</button>
</form>
<ul id="chat-list"></ul>
<script>
const chatList = document.getElementById('chat-list');
const chatForm = document.getElementById('chat-form');
const msgInput = document.getElementById('msg-input');
const sendButton = document.getElementById('send-button');
const eventSource = new EventSource('/chat');
eventSource.onmessage = function(event) {
const chatMsg = JSON.parse(event.data);
const chatItem = document.createElement('li');
chatItem.innerText = `${chatMsg.sender}: ${chatMsg.msg}`;
chatList.appendChild(chatItem);
}
chatForm.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(chatForm);
fetch('/chat', { method: 'POST', body: formData });
msgInput.value = '';
});
</script>
</body>
</html>Dalam kod di atas, kami mencipta borang yang membolehkan pengguna memasukkan maklumat sembang. Apabila pengguna menyerahkan borang ini, kami akan menggunakan API pengambilan untuk menghantar mesej pengguna ke pelayan.
Pada masa yang sama, kami juga mendengar semua mesej yang dikembalikan daripada pelayan. Apabila pelayan menghantar mesej sembang, kami menambah mesej itu ke senarai sembang yang telah dibuat.
- Ringkasan
Artikel ini memperkenalkan proses penggunaan teknologi Node.js dan SSE untuk mencipta ruang sembang ringkas. Melalui contoh bilik sembang ini, kami juga boleh mempelajari cara menggunakan teknologi SSE, serta kaedah kerjasama dan kelebihan JavaScript dan Node.js, yang menyediakan rujukan yang baik untuk kerja pembangunan web kami yang seterusnya.
Atas ialah kandungan terperinci Sembang dibina oleh nodejs sse. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!