Socket.io를 사용하여 실시간 채팅 애플리케이션을 구축하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Socket.io를 사용하여 실시간 채팅 애플리케이션을 구축하는 방법

Nov 26, 2024 pm 08:40 PM

How to Build a Real-Time Chat Application Using Socket.io

이 튜토리얼에서는 Node.js 및 Express와 함께 Socket.io를 사용하여 실시간 채팅 애플리케이션을 구축하는 과정을 안내하겠습니다. 이것은 웹 애플리케이션에서 실시간 통신이 어떻게 작동하는지에 대한 실질적인 이해를 제공하는 초보자 친화적인 가이드입니다. Socket.io를 사용하여 서버를 설정하고, 프런트엔드 인터페이스를 생성하고, 클라이언트와 서버 간 통신을 설정하는 방법을 보여드리겠습니다.

학습 내용

Socket.io란 무엇이며 어떻게 작동하나요
기본 Node.js 서버 설정
실시간 커뮤니케이션을 위한 Socket.io 통합
HTML과 JavaScript로 프런트엔드 구축
실시간 메시지 주고받기

전제조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

Node.js: 여기에서 다운로드할 수 있습니다.
npm(노드 패키지 관리자): Node.js와 함께 번들로 제공되므로 Node.js가 설치되어 있으면 이미 npm이 있는 것입니다.
또한 JavaScript, HTML, CSS에 대한 기본적인 이해가 있어야 합니다.

1단계: 프로젝트 설정

새 프로젝트 설정부터 시작해 보겠습니다.

프로젝트를 위한 새 디렉토리를 생성하고 해당 디렉토리로 이동하세요.

mkdir 실시간 채팅
CD실시간채팅

새 Node.js 프로젝트 초기화:

npm init -y

필요한 종속 항목 설치: 서버에는 Express가 필요하고 실시간 통신에는 Socket.io가 필요합니다.

npm Express Socket.io 설치

2단계: 백엔드 설정(Node.js 및 Express)

server.js라는 새 파일을 만들겠습니다. 이 파일에는 백엔드 코드가 포함됩니다.

server.js를 생성하고 다음 코드를 추가하여 Socket.io로 기본 Express 서버를 설정합니다.

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

// Set up the app
const app = express();
const server = http.createServer(app);
const io = socketIo(server);  // Initialize Socket.io

// Serve static files (for front-end)
app.use(express.static('public'));

// Listen for incoming socket connections
io.on('connection', (socket) =&gt; {
    console.log('A user connected');

    // Listen for messages from clients
    socket.on('chat message', (msg) =&gt; {
        // Emit the message to all connected clients
        io.emit('chat message', msg);
    });

    // Handle disconnection
    socket.on('disconnect', () =&gt; {
        console.log('A user disconnected');
    });
});

// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () =&gt; {
    console.log(`Server is running on http://localhost:${PORT}`);
});

로그인 후 복사

설명:

정적 파일(프런트 엔드)을 제공하기 위해 Express를 사용합니다.
Socket.io가 초기화되고 들어오는 연결을 수신합니다.
사용자가 '채팅 메시지'를 통해 메시지를 보내면 io.emit()을 사용하여 연결된 모든 클라이언트에 브로드캐스팅됩니다.
사용자가 연결을 끊으면 서버에 메시지가 기록됩니다.

3단계: 프런트엔드 설정(HTML 및 JavaScript)

이제 사용자가 메시지를 보내고 받을 수 있는 간단한 프런트엔드를 만들어 보겠습니다.

프로젝트 디렉토리에 public이라는 폴더를 만듭니다. 여기에는 프런트엔드 파일이 보관됩니다.
public 폴더 안에 index.html 파일을 생성하겠습니다. 이것이 채팅 인터페이스입니다.

&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;머리&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
    &lt;title&gt;실시간 채팅&lt;/title&gt;
    &lt;스타일&gt;
        body { 글꼴 계열: Arial, sans-serif; }
        ul { 목록 스타일 유형: 없음; 패딩: 0; }
        리 { 패딩: 8px; 여백: 5px 0; 배경색: #f1f1f1; }
        입력[type="text"] { 너비: 300px; 패딩: 10px; 여백: 10px 0; }
        버튼 { 패딩: 10px; }
    &lt;/스타일&gt;
&lt;/머리&gt;
&lt;본문&gt;
    &lt;h1&gt;실시간 채팅 애플리케이션&lt;/h1&gt;

로그인 후 복사

설명:

채팅 인터페이스에는 메시지를 입력할 수 있는 입력 필드와 메시지를 보낼 수 있는 버튼이 포함되어 있습니다.
저는 Socket.io의 클라이언트 라이브러리를 사용하여 서버와 연결합니다.
메시지가 전송되면 채팅 메시지 이벤트를 통해 발송됩니다.
수신 메시지는

4단계: 애플리케이션 실행

이제 모든 설정이 완료되었으니 애플리케이션을 실행해 보겠습니다.

서버 시작:

노드 서버.js

브라우저를 열고 http://localhost:3000으로 이동하세요. 채팅 인터페이스가 표시됩니다.
동일한 URL을 여러 탭이나 다른 브라우저에서 열어 실시간 통신을 테스트해 보세요. 한 탭에서 메시지를 보내면 다른 모든 탭에도 실시간으로 표시되어야 합니다.

5단계: 결론

축하합니다! Socket.io를 사용하여 실시간 채팅 애플리케이션을 성공적으로 구축했습니다. 이 애플리케이션을 사용하면 사용자는 실시간으로 서로 통신할 수 있으며, 이는 많은 최신 웹 애플리케이션의 강력한 기능입니다. 이제 사용자 인증, 비공개 메시지, 채팅방 등 더 많은 기능을 추가하여 이를 구축할 수 있습니다.

다음은 무엇입니까?