[Project] socket.io를 이용한 채팅 앱 구현 <#1 express 새프로젝트 생성>

구름 EDU에서 수강한 Node.js 강의 내용을 토대로 만든 socket.io를 이용한 채팅 앱 구현 프로젝트입니다.  

 

<구현할 기능>

• 사용자 간의 채팅
• 사용자 접속 혹은 종료 시 알림
• 닉네임 변경과 알림

 

express 프레임워크를 사용하여 새 프로젝트 생성

npm install express-generator

 

express chatting-app

 

생성된 express 프로젝트

 

express-generator로 생성하여 서버 코드는 www로 분리되어 있지만 이번 프로젝트에서는 server.js라는 파일을 생성하여 서버 코드를 작성하고 웹은 HTML이 아닌 pug를 이용해서 제작하겠습니다. 프로젝트 폴더에 server.js파일, views폴더에 chat.pug를 생성합니다.

 

pug를 이용할 것이기 때문에 pug를 install 해줍니다.

npm install pug

 

socket.io도 이용할 예정이기 때문에 socket.io도 install

npm install socket.io

 

 

<chat.pug>

// chat.pug

doctype 5
html
  head
    title= 'Chat'
    link(rel='stylesheet', href='/stylesheets/style.css')
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    h1 hello world!!!

 

<server.js>

// server.js

var express = require('express');
var app = express();
var http = require('http').Server(app);  
var path = require('path');

app.set('views', './views');
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
	// 루트 페이지로 접속시 chat.pug 렌더링
	res.render('chat');
});

http.listen(3000, function(){ 
	console.log('server on..');
});

 

localhost 3000번 포트로 연 서버 페이지 확인

 

 

 

 

참고자료 - https://edu.goorm.io/lecture/557/한-눈에-끝내는-node-js

한 눈에 끝내는 Node.js - 구름EDU