[Node.js] 채팅방 만들기 (sequelize, socket.io, express-session, nunjucks) (2023.07.11~13)

app.js

 

//모듈사용
const express = require('express') //express
const session = require('express-session') //session
const fileStore = require('session-file-store')(session) //session 저장
const {sequelize} = require('./models') //sequelize (ORM)
const webSocket = require('./socket') //socket
const nunjucks = require('nunjucks') //nunjucks - 템플릿엔진
const bodyParser = require('body-parser') //json타입 body 파싱

//router
const indexRouter = require('./routes') //./routes/index
const memberRouter = require('./routes/member')
const chatRouter = require('./routes/chat')

const app = express()

//sequelize DB 연결
//force : false -> 기존 테이블은 건들지 않음
sequelize.sync({force:false}) 
.then(()=>{console.log('DB 연결 성공!');})
.catch((err)=>{console.log(err);})

//nunjucks 설정
//view는 indexRouter에서 사용하므로 위쪽에서 작성해야 함 
app.set('views', __dirname+'/views')
app.set('view engine', 'html')
nunjucks.configure('views', {
    express : app,
    watch : true
})

//세션 설정 
app.use(
    session({
        httpOnly: true,
        secret: "secretkey",
        resave: false,
        cookie:{
            httpOnly: true,
        },
        store: new fileStore(),
    })
);

app.use(express.urlencoded({extended:true})) //post요청 - req.body 파싱
app.use(bodyParser.json()) //json형식의 body 파싱

//router 연결
app.use('/', indexRouter)
app.use('/member', memberRouter)
app.use('/chat', chatRouter)

//정적파일 경로 설정
app.use(express.static(__dirname+'/public'))

//서버 연결
app.set('port', process.env.PORT||8888)
const server = app.listen(app.get('port'), ()=>{
    console.log(app.get('port'), '번 포트에서 서버 연결 대기중...');
})

//소켓 연결
//소켓을 외부에서 사용할 수 있도록 app을 함께 전달
//app에 변수 저장하면 어디서나 사용할 수 있음
webSocket(server, app)

 

models (sequelize => 데이터베이스 접근)

 

index : 기본 설정 

const Sequelize = require('sequelize')
const Member = require('./member')
const Room = require('../models/room')
const Chat = require('../models/chat')

const env = process.env.NODE_ENV || 'development'
//[env] : development만 사용하기 위해 key값 지정
const config = require('../config/config.json')[env] //개발용 DB 사용 

//Sequelize 객체 생성 
//member init 호출시 사용 
const sequelize = new Sequelize(config.database, config.username, config.password, config)

//sequelize를 어떻게 사용할 것인가 

const db = {} //app (model, sequelize - db 연결정보)

db.sequelize = sequelize
db.Member = Member
db.Room = Room
db.Chat = Chat

//테이블 생성 후 연관관계 설정 가능 >>> init 진행 후 associate
//init, associate 실행
Member.init(sequelize) //테이블 생성 
//associate는 다른 테이블과의 관계 설정해야 하므로 다른 테이블에 대한 정보가 필요함 => db안에 담겨져 있음 => 매개변수로 db
Room.init(sequelize)
Chat.init(sequelize)

Member.associate(db) //테이블 연관관계 설정
Room.associate(db)
Chat.associate(db)

module.exports = db

 

member, chat, room model class 작성 후 index.js 와 연결 

 

 

 

index.js (indexRouter)

1. 기본 경로일 경우 login.html 페이지 렌더링

2. /rooms로 들어오면 Room 클래스로 전체 room 조회 후 rooms.html에 result를 담아서 화면 렌더링

 

const express = require('express')
const Room = require('../models/room')
const router = express.Router()

//첫페이지
router.get('/', (req, res)=>{
    res.render('login') //login.html 렌더링
})

//rooms 보여주는 페이지 (DB에서 채팅방 리스트 불러와야 함!)
router.get('/rooms', async(req, res, next)=>{

    try{
        const result = await Room.findAll()
        // console.log(result);

        //result를 html로 보내줘야 함
        res.render('rooms', {rooms:result})
    }catch(err){
        next(err)
    }
})

module.exports = router

 

member.js

로그인 성공시 session에 데이터 저장 후 /rooms로 이동

const express = require('express')
const Member = require('../models/member')
const router = express.Router()

router.post('/login', async(req, res, next)=>{
    console.log(req.body)
    let {id, pw} = req.body
    try{
        const result = await Member.findOne({
            where : {id : id, pw : pw}
            //id, pw로만 작성해도 들어감
        })

        req.session.member = result
        req.session.save(function(){
            
            if(result){
                res.redirect('/rooms')
            }else{
                res.redirect('/')
            }
    })}catch(err){
        next(err)
    }
})

module.exports = router;

 

chat.js

 

const express = require('express')
const Chat = require('../models/chat')
const router = express.Router()

router.get('/:roomid', async(req, res, next)=>{
    console.log(req.params.roomid);

    //지금까지 진행된 채팅 내용 불러오기 
    try{
        const chats = await Chat.findAll({
            where : {roomid : req.params.roomid}
        })
        // console.log('채팅전체내용',chats);
        //nunjucks에서는 바로 session사용 불가능 -> 같이 보내줘야 함
    res.render('chat', {roomid : req.params.roomid, userid : req.session.member.id, chats : chats})
    }catch(err){
        next(err)
    }
})

router.post('/:roomid/insert', async(req, res, next)=>{
    let roomid = req.params.roomid;
    let chat = req.body.chat;
    let userid = req.session.member.id;

    console.log(roomid, chat, userid);
    try{
        //채팅db에 데이터 삽입 -> 다른 클라이언트 화면에 보이지 않음
        const chats = await Chat.create({
            roomid : roomid,
            chat : chat,
            userid : userid
        })
        
        //socket 사용 -> 이 채팅을 입력한 클라이언트와 같은 룸에 있는 모든 클라이언트에게 데이터 뿌려주기! (실시간)
        //데이터 뿌리기 (다른 클라이언트 화면에 데이터 보이도록)
        req.app.get('io').of('/chat').to(roomid).emit('chat', {userid : userid, chat:chat, roomid:roomid})
        res.send('OK')

    }catch(err){
        next(err)
    }
})


module.exports = router

 

서버측 socket

 

const socketIO = require('socket.io')

//server : app에서 생성한 express server
//app : 어디서든 io 객체 사용할 수 있도록 app 가져왔음
module.exports = (server, app)=>{

    //express server - socket 연결
    //1) 소켓 객체 생성
    const io = socketIO(server, {path : '/socket.io'})
    // 소켓io 객체를 외부(라우터)에서 사용할 수 있도록 만들기  > app에 변수 설정
    // -> app을 가져와서 사용해야 함
    app.set('io', io)

    //2) io 객체를 가지고 접속 성공, 접속 해제, 에러 이벤트 추가
    // 라우팅 (-> 네임스페이스 : 기능 구분, 경로에 따라 다른 곳에서 처리)
    // - 채팅 기능 ->  /chat
    // - 실시간 알림  -> /alarm
    // - 통째로 처리하고 싶을 때 io.on
    // - namespace 설정 : io.of('경로')
    const chat = io.of('/chat') //채팅 관련 네임스페이스
    chat.on('connection', (socket)=>{
        //연결이 되면 클라이언트와 연결하는 소켓이 생성됨(소켓이 클라이언트의 정보 담고 있음)
        console.log('chat 네임스페이스 접속 성공 ');

        //room 설정 (room 기능을 socket.io에서 제공하고 있음)
        // -> 방이름(roomid) 설정 -> 클라이언트의 요청 경로(request)에 포함
        //room에 들어간 클라이언트끼리만 소통할 수 있도록!
        const ref = socket.request.headers.referer //클라이언트가 요청한 주소
        const roomid = ref.split('/')[ref.split('/').length-1];
        console.log(roomid); 

        //roomid에 따라서 룸을 만들어줌 - roomid가 같으면 같은 방으로 들어감!
        socket.join(roomid)

        //클라이언트마다 소켓 생성되므로 socket에 이벤트 부여
        socket.on('disconnect', ()=>{
            console.log('chat 네임스페이스에서 접속 해제');
        })

        //chat 이벤트 : 사용자가 입력한 값(data)을 뿌려줌
        socket.on('chat', (data)=>{
            // console.log('socket.js : ',data);
            socket.to(roomid).emit(data)
        })

    }) //채팅 연결 이벤트
}

 

 

socket 클라이언트 측 - chat.html

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <fieldset>
        <legend>채팅 내용</legend>
        <!-- class 지정 : mine -> 나의 채팅 내용 (오른쪽에 출력), other -> 다른 사람의 채팅 내용(왼쪽 출력) -->
        <div id="chat-list">
            {%for chat in chats%}
            {%if chat.userid === userid%}
            <div class="mine">
                <div>{{chat.userid}}</div>
                <div>{{chat.chat}}</div>
            </div>
            {%else%}
            <div class="other">
                <div>{{chat.userid}}</div>
                <div>{{chat.chat}}</div>
            </div>
            {%endif%}
            {%endfor%}
        </div>
    </fieldset>
    <!--비동기 방식
    action : 동기방식 -->
    <form id="chat-form">
        <input type="text" id="chat-input" name="chatinput">
        <input type="submit" value="전송">
    </form>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        //클라이언트 소켓 객체 생성 (소켓 연결)
        const socket = io.connect('http://localhost:8888/chat', { //chat : chat namespace 지정
            path: '/socket.io'
        })

        socket.on('chat', function (data) {
            console.log(data);
            const div = document.createElement('div')
            if (data.userid == '{{userid}}') { //로그인한 클라이언트가 입력한 채팅이라면
                div.classList.add('mine')
            } else { //다른 클라이언트가 입력한 채팅이라면
                div.classList.add('other')
            }

            //Id 출력 div
            const divId = document.createElement('div')
            divId.textContent = data.userid
            div.appendChild(divId) //자식 div로 추가

            //채팅 출력 div
            const divChat = document.createElement('div')
            divChat.textContent = data.chat
            div.appendChild(divChat) //divId 자식으로 추가됨

            //#chat-list에 div 추가
            document.getElementById('chat-list').appendChild(div)
        })

        //submit 버튼을 눌렀을 때 form의 input 내용을 가지고 와야한다!
        document.getElementById('chat-form').addEventListener('submit', function (e) {
            //submit 기본기능 : 동기 방식으로 서버로 요청 >> 막기
            //e(event) > submit event
            e.preventDefault() //서버로 요청하는 submit의 기본 기능을 막기
            // console.log(e.target.chatinput.value); //서버로 보내서 DB로 저장
            console.log(e)
            if (e.target.chatinput.value) {
                //서버로 채팅 내용 전송
                axios.post('/chat/{{roomid}}/insert', {
                    chat: e.target.chatinput.value
                    //json형태로 전송
                })
                    .then((data) => {
                        console.log(data);

                    })
                    .catch((err) => {
                        console.log(err);
                    })
            }
        })
    </script>
</body>

</html>

 

소켓 통신 정리

socket.js 생성 - 서버단

 

1. socket.io 모듈 가져오기

2. exports = (server, app) => {}
 express server와 소켓 연결하기 위해 server 매개변수로 사용, 
 router에서 사용하기 위해 app 매개변수로 받음 => app에서 변수로 저장하면 어디서나 사용할 수 있음

2.1. 소켓 모듈로 소켓 객체 생성. 객체를 생성할 때, server와 path를 매개변수로 저장
 : 여기서 path의 의미란???
 app.set으로 소켓 객체 저장 

2.2 
chat 네임스페이스 설정 - io.of('/chat')
채팅에 연결되면 > 클라이언트마다 소켓 생성 > 소켓에 대하여 룸생성, 접속해제, chat이벤트 지정
chat.on('connection', (socket)=>{} //연결이 되면 클라이언트와 연결하는 소켓 생성됨
생성된 소켓에서 주소 가져와서 roomid를 꺼내...
socket.join(roomid) => 룸 생성
socket.on('disconnect') => 접속 해제 
socket.on('chat' (data)=>{socket.to(roomid).emit(data) => chat 이벤트 : roomid에 

------------------------------------

chat.html - 클라이언트단

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> //axios 통신
    <script src="/socket.io/socket.io.js"></script> //socket 통신

클라이언트 소켓 객체 생성하여 연결 - io.connect(http://localhost:8888/chat) => 여기도 들어오면 소켓 생성
socket.on('chat', function(data)}{

버튼 눌렀을 때 이벤트 
= > axios.post (chat/{{roomid}}/insert)로 chat 내용 전송
}} //chat 이벤트 - 서버단 소켓에서 emit한 데이터 불러와서 사용 

---------------------------------

app.js socket 사용 설정 

const webSocket = require('./socket') //소켓 파일 가져오기

//소켓을 외부에서 사용할 수 있도록 app을 함께 전달
//app에 변수 저장하면 어디서나 사용할 수 있음
webSocket(server, app)