고객센터

호스팅 매뉴얼

Home > 호스팅 > 컨테이너호스팅 > Node.js 사용하기 > 채팅 서버 만들기

Socket.IO 기반의 채팅 사이트 구축 Socket.IO 기반의 채팅 사이트 구축

이 문서에서는 Node.js와 Socket.IO를 이용하여 기본적인 채팅 애플리케이션을 만듭니다. 

그리고 Redis Pub/Sub 메세징 기능을 적용하여 Clustering 모드로 애플리케이션을 확장해 봅니다.

이 프로젝트 Socket.IO 공식 홈페이지의 데모 프로젝트를 기반으로 진행됩니다. 

 

1. Socket.IO Demo Project 받기 

[guser@nodejs ~]$ git clone https://github.com/socketio/socket.io

Socket.IO 공식 데모 프로젝트를 git clone합니다.

 

2. WORK_DIR 변경 (Gabia Node.js 호스팅 아닌 경우 생략) 

[guser@nodejs ~]$ vi .bashrc

• 변경 전 

export WORK_DIR="/web"

• 변경 후

export WORK_DIR="/web/socket.io/examples/chat"

WORK_DIR에 프로젝트 경로를 설정합니다. 

 

3. Project Directory로 이동

[guser@nodejs ~]$ cd socket.io

 

4. NPM 설치 

[guser@nodejs socket.io]$ npm install

/socket.io/package.json에 명시한 dependencies 목록을 설치합니다.

 

5. Chatt 예제 프로젝트로 이동 

[guser@nodejs socket.io]$ cd examples/chat/

 

6. NPM 설치 

[guser@nodejs chat]$ npm install

/socket.io/examples/chat/package.json에 명시한 dependencies 목록을 설치합니다.

 

7. Socket.IO 코드 리뷰 

/socket.io/examples/chat/index.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('../..')(server);

io.on('connection', (socket) =>  {
  socket.on('new message', (data) => {
    socket.broadcast.emit('new message', data);
  });
});

Socket.IO를 사용하는 기본적인 서버 사이드 코드입니다.

• line 1~4: Express 모듈을 통해 HTTP 서버를 생성하고 Socket.IO 서버와 연결합니다. (line 4 의 '../..' 는 'socket.io' 모듈을 로드합니다.)
• line 6: Client의 Connection 이벤트 발생시 Client Socket 파라미터와 함께 Callback을 받습니다.
• line 7: Client로 부터 “new message”라는 이벤트를 수신시 data 파라미터와 함께 Callback을 받습니다.
• line 8: “new message”라는 이벤트로 Broadcasting(자신을 제외한 모든 Client에게 전송)을 합니다.

/socket.io/examples/chat/public/main.js

var socket = io();

const sendMessage = () => {
    var message = $inputMessage.val();
    message = cleanInput(message);
    if (message && connected) {
        $inputMessage.val('');
        addChatMessage({
        username: username,
        message: message
    });
    socket.emit('new message', message);
    }
}

socket.on('new message', (data) => {
    addChatMessage(data);
});

Socket.IO를 사용하는 기본적인 클라이언트 사이드 코드입니다. View에 관련된 코드는 다루지 않습니다.

• line: 1: Socket.IO 서버에 Connection 요청을 하여 Client socket을 생성합니다.
• line: 3: View에서 메세지를 전송시 호출할 함수
• line: 12: Server로 “new message”라는 이벤트를 message 파라미터와 함께 전송합니다.
• line: 16: Server로 부터 “new message”라는 이벤트를 수신시 data 파라미터와 함께 Callback을 받습니다.

 

8. PM2(프로세스 매니저) 설치 

[guser@nodejs chat]$ npm install pm2 -g

• PM2 관리 명령어 

app_name 대신 all 또는 애플리케이션 id로 변경하여 사용 가능합니다.

 

9. npm start 스크립트 변경 

[guser@nodejs chat]$ vi package.json

/socket.io/examples/chat/package.json

• 변경 전 

"scripts": {
  "start": "node index.js"
}

• 변경 후 

"scripts": {
  "start": "pm2 start index.js"
}

애플리케이션을 pm2(프로세스 매니저)로 실행하도록 start 스크립트를 변경합니다.

 

10. 웹 애플리케이션 실행 

[guser@nodejs chat]$ npm start

 

11. 웹 애플리케이션 사이트 접속

가비아 Node.js 호스팅: https://{접속 ID}.gabia.io
로컬: http://localhost:3000/

 

 

  • 컨테이너호스팅 시작하기

    • DNS 설정하기

    • SFTP/SSH 접속하기

    • DB 접속하기

    • phpPgAdmin 접속 설정하기

  • 관리 콘솔

    • 관리 콘솔 알아보기

  • 자원 현황

    • 사용량 현황 보기

    • 트래픽 당겨쓰기

    • 웹 용량 추가하기

    • 트래픽 추가/충전하기

    • 웹 용량 차단 해제하기

    • 용량 초과 알림 설정하기

    • 메모리 용량 추가하기

  • 기본 정보

    • 서비스 시작일/만기일 보기

    • 소유자/관리자 정보 보기

    • 타입 변경하기

    • 주간운영리포트 수신 설정하기

    • 장애 알림 받기

  • 도메인

    • 대표 도메인 변경하기

    • 도메인 연결/해지하기

  • 보안 설정

    • 웹 서버(SFTP/SSH) 접속 설정하기

    • 웹 서버(SFTP/SSH) 비밀번호 변경하기

    • 웹사이트 접근 IP 관리하기

    • SSH/SFTP 접속 차단 IP 해제하기

    • DB 서버 비밀번호 변경하기

    • 웹 서버 접속 허용 IP 등록하기

    • 웹쉘 탐지 관리하기

  • 웹 서버

    • 웹 서버 환경 변경하기

    • 웹 서버 초기화하기

    • 웹 서버 접속 허용 IP 등록하기

    • 웹 서버(SFTP/SSH) 비밀번호 변경하기

    • 웹 로그 보기

  • DB 서버

    • DB 서버 비밀번호 변경하기

    • phpPgAdmin 접속 설정하기

    • DB 접속하기

    • MySQL 서버 접속/백업/복원하기

    • DB 서버 환경 변경하기

    • DB 서버 초기화하기

  • 백업/복원

    • 백업하기

    • 복원하기

  • 모니터링

    • 서버 현황 보기

    • 웹/DB 현황 보기

    • 사이트 웹 로그 분석하기

    • 슬로우 쿼리 확인하기

    • 트래픽 현황 보기

    • 이력 관리하기

  • 메일

    • 메일 관리하기

  • 서비스 계약 관리

    • 결제 알림 설정하기

    • 담당자 정보 변경하기

    • 서비스 해지하기

  • Node.js 사용하기

    • Node.js 환경 확인하기

    • 프로세스 관리 도구 사용하기

    • 기본 웹 애플리케이션 만들기

    • Express로 웹 애플리케이션 만들기

    • NVM으로 버전 관리하기

    • SSL 인증서 설치 후 HTTPS 통신 강제 적용하기

    • 채팅 서버 만들기

    • MySQL 모듈 기본 사용 방법

  • Python 사용하기

    • Python 환경 확인하기

    • 패키지 관리 도구 사용하기

    • Flask로 기본 웹 애플리케이션 만들기

    • Django로 웹 애플리케이션 만들기

    • Gunicorn으로 정적 파일 서비스하기

    • 미디어 파일을 실시간으로 서비스하기 위한 Django 설정법

    • SSL 인증서 설치 후 HTTPS 통신 강제 적용하기

  • Java 사용하기

    • Java 환경 확인하기

    • Spring Boot CLI로 프로젝트 생성하기

    • Spring Boot CLI로 Groovy 웹 프로젝트 실행하기

    • Maven으로 SpringBoot 웹 프로젝트 실행하기

    • Gradle로 SpringBoot 웹 프로젝트 실행하기

    • 빌드한 웹 프로젝트 실행하기

    • SSL 인증서 설치 후 HTTPS 통신 강제 적용하기

  • Redis 사용하기

    • Node.js와 Redis 연동하기