웹 프론트엔드 JS 튜토리얼 Socket.io를 사용하여 실시간 채팅 애플리케이션을 구축하는 방법

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) => {
    console.log('A user connected');

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

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

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

로그인 후 복사

설명:

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

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

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

  • 프로젝트 디렉토리에 public이라는 폴더를 만듭니다. 여기에는 프런트엔드 파일이 보관됩니다.
  • public 폴더 안에 index.html 파일을 생성하겠습니다. 이것이 채팅 인터페이스입니다.
<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>실시간 채팅</title>
    <스타일>
        body { 글꼴 계열: Arial, sans-serif; }
        ul { 목록 스타일 유형: 없음; 패딩: 0; }
        리 { 패딩: 8px; 여백: 5px 0; 배경색: #f1f1f1; }
        입력[type="text"] { 너비: 300px; 패딩: 10px; 여백: 10px 0; }
        버튼 { 패딩: 10px; }
    </스타일>
</머리>
<본문>
    <h1>실시간 채팅 애플리케이션</h1>
    
로그인 후 복사

    설명:

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

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

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

    • 서버 시작:

    노드 서버.js

    • 브라우저를 열고 http://localhost:3000으로 이동하세요. 채팅 인터페이스가 표시됩니다.

    • 동일한 URL을 여러 탭이나 다른 브라우저에서 열어 실시간 통신을 테스트해 보세요. 한 탭에서 메시지를 보내면 다른 모든 탭에도 실시간으로 표시되어야 합니다.

    5단계: 결론

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

    다음은 무엇입니까?

    • 사용자가 채팅 전에 로그인할 수 있도록 사용자 인증을 추가하세요.
    • 지속성을 위해 MongoDB와 같은 데이터베이스에 채팅 메시지를 저장하세요.
    • Bootstrap 또는 Tailwind CSS와 같은 CSS 프레임워크로 UI를 향상하세요.

    필요에 맞게 프로젝트를 자유롭게 수정하고 룸 및 네임스페이스와 같은 다른 Socket.io 기능을 살펴보세요!

    즐거운 코딩하세요!

위 내용은 Socket.io를 사용하여 실시간 채팅 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles