nodejs sse로 구축된 채팅
- WBOY원래의
- 2023-05-23 19:07:36755검색
Node.js SSE가 만든 채팅방
인터넷의 인기와 발전으로 채팅방은 사람들의 일상적인 온라인 커뮤니케이션을 위한 중요한 플랫폼이 되었습니다. 이벤트 중심 및 비차단 I/O 모델을 기반으로 하는 서버 측 JavaScript 언어인 Node.js는 애플리케이션의 성능과 응답성을 크게 향상시킬 수 있으므로 많은 웹 애플리케이션에서 선호되는 기술 중 하나가 되었습니다.
이 글에서는 Node.js와 SSE(Server-Sent Events) 기술을 활용해 사용자가 실시간으로 채팅 메시지를 받을 수 있는 간단한 채팅방을 구축하는 방법을 소개하겠습니다.
- Node.js 및 SSE
SSE는 서버가 클라이언트에 이벤트 스트림을 보낼 수 있도록 하는 HTML5에 정의된 기술이며, 클라이언트는 EventSource API를 통해 이러한 이벤트 스트림을 수신할 수 있습니다. 이 이벤트 스트림에서는 서버가 클라이언트에 실시간으로 메시지를 보낼 수 있고, 클라이언트도 서버에 데이터를 보내 상호 작용할 수 있습니다.
Node.js는 웹 서버를 쉽게 만들 수 있으며, HTTP 요청 및 응답을 처리하는 데 사용할 수 있는 HTTP 모듈이 내장되어 있습니다. 이 모듈을 통해 SSE 기술을 쉽게 구현할 수 있습니다.
- 채팅방 만들기
2.1 서버 만들기
먼저 Node.js 프로젝트를 만들어야 합니다. 프로젝트의 루트 디렉터리에 server.js 파일을 생성하고 http 모듈을 도입합니다.
const http = require('http');그런 다음 HTTP 서버를 만들고 포트 8080에서 수신 대기해야 합니다.
const server = http.createServer((req, res) => {
// 代码稍后补充
});
server.listen(8080);2.2 SSE 기술 구현
이벤트 스트림을 전송하기 위해 서버에 경로를 만들어야 합니다. 이 경로에서는 EventSource API를 사용하여 클라이언트에 메시지를 보냅니다.
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 채팅방 기능 구현
위 단계를 완료하면 이제 기본 SSE 기술을 서버에 구현할 수 있습니다. 다음으로 클라이언트에서 채팅 기능을 구현해야 합니다.
채팅 정보를 표시하려면 클라이언트에 HTML 페이지를 만들어야 합니다. 이 페이지에서는 JavaScript를 사용하여 채팅 메시지를 보내고 서버에서 반환된 메시지를 받습니다. 또한 EventSource API를 사용하여 서버에서 보낸 메시지를 수신해야 합니다.
<!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>위 코드에서는 사용자가 채팅 정보를 입력할 수 있는 폼을 생성합니다. 사용자가 이 양식을 제출하면 가져오기 API를 사용하여 사용자의 메시지를 서버로 보냅니다.
동시에 서버에서 반환되는 모든 메시지도 들었습니다. 서버가 채팅 메시지를 보내면 이미 생성된 채팅 목록에 해당 메시지를 추가합니다.
- 요약
이 글에서는 Node.js와 SSE 기술을 활용해 간단한 채팅방을 만드는 과정을 소개합니다. 이 대화방의 예를 통해 우리는 SSE 기술을 사용하는 방법은 물론 JavaScript와 Node.js의 협업 방법과 장점도 배울 수 있어 후속 웹 개발 작업에 좋은 참고 자료가 됩니다.
위 내용은 nodejs sse로 구축된 채팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!