nodejs sse로 구축된 채팅-프런트엔드 Q&A-php.cn

nodejs sse로 구축된 채팅

WBOY

풀어 주다： 2023-05-23 19:07:36

원래의

683명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!