[Project] socket.io를 이용한 채팅 앱 구현 <#3 채팅 입력 시 채팅로그에 표시하기>

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

저번 포스팅에서 채팅창 UI를 제작하였고 이번 포스팅은 채팅창에 텍스트 입력 시 채팅 로그에 채팅 내용을 표시하는 것에 대한 내용입니다.

 

<구현할 기능>

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

 

 

새로고침시 id를 새로 발급받으며 name이 변경됩니다.

localhost:3000으로 접속하면 socket.io에 의해 id가 문자열(영어+숫자)로 자동 생성되며 맨 처음의 접속자의 name을 익명 1로, 그다음 접속자를 익명 2, 익명 3,....으로 지정해줍니다.

새로고침 혹은 다른 기기에서 접속 시 새로운 id를 부여받으며 count 수에 맞게 name이 지정됩니다.
(ex. 익명 1, 익명 2,... 익명 100....)

 

<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")

        // socket.io와 jquery를 사용하기 위한 script src
        script(src='/socket.io/socket.io.js')
        script(src='//code.jquery.com/jquery-1.11.1.js')

        // 부트스트랩을 사용하기 위한 link와 script
        link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous")
        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous")  

    body
        // top
        div 
            button#top.btn.btn-warning(type='button') Chatting-App  
        // textarea
        div
            textarea#chatLog.form-control(readonly='')  
        // name, text, submit
        div
            form#chat
                input#name.form-control(type='text')
                input#message.form-control(type='text')
                button#submit.btn.btn-warning(type='submit') Submit
        
        script.
            var socket = io();

            // 메시지 전송
            $('#chat').on('submit', function(e){
                socket.emit('send message', $('#name').val(), $('#message').val());
                $('#message').val('');
                e.preventDefault();
            });

            // 이름 생성
            socket.on('create name', function(name){
                $('#name').val(name);
            });

            // 메세지 수신
            socket.on('receive message', function(msg){
                $('#chatLog').append(msg+'\n');
                $('#chatLog').scrollTop($('#chatLog')[0].scrollHeight);
            });
            

 

<server.js>

// server.js

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

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');
});

var count = 1; // 참여자 번호 발급

// 채팅방 접속시
io.on('connect', function(socket){
    console.log('user connected: ', socket.id);
    var name = "익명" + count++;
    socket.name = name;
    io.to(socket.id).emit('create name', name);

    // 채팅방에서 나갔을 때
    socket.on('disconnect', function(){
        console.log('user disconnected: ' + socket.id + ' ' + socket.name);
    });

    // 채팅을 보냈을 때
    socket.on('send message', function(name, text){
        var msg = name + ' : ' + text;
        console.log(msg);
        io.emit('receive message', msg);
    });
});


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

 

 

현재 name과 text를 서버로 submit 하면 서버에서 다시 모든 클라이언트로 채팅 내용을 채팅 로그에 표시해주는 것을 구현해봤습니다. 그러나 name을 변경 시 name이 변경되었다는 알림이 없다면 위와 같은 자작극(...?)이 발생할 수 도 있으니 다음 포스팅에서는 접속, 종료, 닉네임 변경 시 알림을 채팅 로그에 표시하는 것을 만들어 보겠습니다.

 

 

 

 

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

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