[PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (1) - 설계 및 기획

Socket.io 채팅 애플리케이션 (1) - 설계 및 기획

앞으로 여러 차시를 거쳐서 채팅 애플리케이션을 만들 것 이다.

기본적으로 준비해야 할 것들

1. IDE ( code editor )

2. node.js node.js 설치방법

3. 패키지들

   "dependencies": {
       "express": "^4.16.3", <- (컴포넌트 기반 웹 프레임워크)
       "socketio": "^1.0.0", <- (핵심 패키지)
       "supervisor": "^0.12.0" <- (변경사항이 있으면 서버 자동 재시작)
     }
   

   패키지 설치는 npm i --save [패키지 이름] 을 입력해서 다운받는다.

모든 설치를 마쳤다면 프로젝트 트리가

chat
--node_modules
--public
----css
------style.css <- (chat.html style sheet)
----js
------script.js <- (chat.html script code)
--app.js
--chat.html <- (화면에 보여질 html 파일)
--package.json
--package-lock.json

되도록 파일을 생성해준다.

아마 node_modules나 package.json, package-lock.json는 위에 과정을 마쳤다면 이미 생성되있을 것이다.

 

기능 명세

우리가 만들 애플리케이션은 채팅 애플리케이션이다.

따라서 채팅의 기본적인 기능을 포함하여 개발하겠다.

• 기능

  • user

    회원가입

    로그인

    로그아웃

  • chat

  채팅방 들어가기

  채팅하기

  채팅방에 들어온 user 목록

간단하게 개발할 것이여서 기능은 이정도이다.

그럼 이제 실제로 app.js 파일을 열어서 서버 기본 설정을 해보겠다.

 

서버 설정

# /app.js
var express = require('express'),
    port = process.env.PORT || 3000,
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server), // socket.io 를 사용하기 위한 io 객체 생성
    users = {}, // 기본 회원이 담기는 object
    onlineUsers = {}; // 현재 online인 회원이 담기는 object
    
app.use(express.static('public')); // 정적파일(css, js...)을 사용하기 위한 path 지정

app.get('/', function (req, res) {
    res.redirect('/chat');
}); // '/' 로 들어오는 요쳥을 '/chat'으로 리다이렉팅

app.get('/chat', function (req, res) {
    res.sendfile(__dirname + '/chat.html');
}); // '/chat'으로 들어오는 요청은 chat.html 을 렌더링

server.listen(port, () => {
    console.log(`server open ${port}`);
}); // 3000 포트로 서버 open

 

다음 시간엔

socket.io 를 이용해서 회원 관련 동작을 제어하겠다.