[Node.js] socket.io를 활용하여 채팅구현하기

Node.js 라이브러리 socket.io 채팅

Goal

• node.js 이해하고 개발환경 세팅
• express를 이해하고 활용
• socket.io 라이브러리 활용
• 채팅서버 구현

활용도구

자세한 내용은 추후 포스팅을 통해 다루겠습니다.
아래에서는 채팅 구현과 관련된 내용에 대한 간단한 소개만 합니다.

Node.js

• chrome V8 JavaScripty 엔진으로 빌드 된 JavaScript 런타임
• 다양한 JavaScript app을 실행할 수 있도록 도와주는 프로그램
• 서버에서도 JavaScript 언어를 사용할 수 있도록 도와줍니다.

Express

• Node.js를 사용한 서버를 개발하기 위한 웹 프레임워크입니다.
• http 요청에 대한 핸들러를 만들어줍니다.

Socket.io

• 서버와 클라이언트 사이의 양방향 채널을 구성해줍니다.
• 메시지를 보내면 요청없이 응답을 받아올 수 있습니다.

과정

1. 환경 구축

• node.js 설치

Node.js 설치하러 가기 : 공식 홈페이지 https://nodejs.org/ko/

 

• express 설치

프로젝트를 진행할 디렉토리에서 해당 명령어 실행

$ npm install express

• socket.io 설치

프로젝트를 진행할 디렉토리에서 해당 명령어 실행

$ npm install socket.io

 

채팅서버 구현

• 진행중인 디렉토리 내에서 server.js 생성

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

// 최초 접속시 보여지는 화면 ('/' 경로로 get 요청 시 index.html 반환)
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// 서버 실행 (http 서버 포트 3000에서 수신)
http.listen(3000, () => {
  console.log('server listening on port : 3000');
});

• 입장 시 해당 사용자에게만 nickname 전송

io.to(socket.id).emit('nickname', nickname);

• 다른 유저 입장시 알림메시지 전송

socket.on('join', function(data) {
    console.log('a user connected', data);
    var msg = `${data}님이 입장하셨습니다!`;
    socket.broadcast.emit('new', msg);
})

• 메세지 입력시 전체 유저에게 알림

socket.on('msg', function(nickname, data) {
    var msg = `${nickname} : ${data}`;
    io.emit('msg', msg);
});

 

클라이언트 구현

• 진행중인 디렉토리 내에서 index.html 생성

해당 스크립트 태그를 body 내부에 포함시킵니다.

<script src='/socket.io/socket.io.js'></script>

<!-- getElementById 대신 사용하기 위해 jquery -->
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>

<script>
    $(() => {
        const socket = io(); // 기본적으로 페이지를 제공하는 호스트에 연결을 시도

        // 원하는 행동 정의 ex) socket.on


        });
    });
</script>

• 유저 입장 시 환영 메시지 출력

socket.on('nickname', (nickname) => {
    $('#nickname').val(nickname);
    $('#msgList').append($('<li>').text(`${nickname}님 환영합니다!`));
    socket.emit('join', $('#nickname').val())
});

• 새로운 유저 입장 시 알림 메시지 출력

socket.on('new', (msg) => {
    $('#msgList').append($('<li>').text(msg));
});

• 메시지 제출 시 서버에 알림

$('form').submit(() => {
    socket.emit('msg', $('#nickname').val(), $('#msgInput').val());
    $('#msgInput').val('');
    return false;
});

• 전체 유저에게 메시지 출력

socket.on('msg', (msg) => {
    $('#msgList').append($('<li>').text(msg));
});

결과

 

 

 

Introduction | Socket.IO