재시민

NodeJS 로 채팅 서비스 만들기 디자인

이제 디자인과 추가기능을 만들어보려고한다.

추가할 목록은 다음과 같다.

• 디자인 css
• key event

디자인

디자인 요소는 총 세가지로 구성해보았다.

• me
• other
• connect
• disconnect
• inputbox

#main{
    margin: auto;
    margin-top: 100px;
    padding:3px;
    background-color: lightblue;
    text-align:center;
    width:400px;
}

#main #room_type{
    margin : 10px 10px 20px 20px;
    padding-top : 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    background-color: lightgray;
}
#chat{
    border-radius: 10px;
    margin : 10px;
    padding : 10px;
}

.me{
    background-color: lightgreen;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}
.other{
    background-color: lightcoral;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}

.connect{
    background-color: pink;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}
.disconnect{
    background-color: yellow;
    border-radius: 10px;
    margin : 2px;
    padding : 2px;
}

딱히 다른 건 없지만 카톡처럼 내 채팅은 왼쪽으로 상대 채팅은 오른쪽으로 하고싶은데 아직 방법을 찾지 못했다.

수많은 구글링을 통해 찾아내버렸다.

    overflow: hidden;
    height:auto;
    float:right;
    clear:both;
    word-break:break-all;

여기서 clear, word-break 에 대해 알아보자면

Clear

• clear : left 왼쪽을 취소
• clear : right 오른쪽을 취소
• clear : both 오른쪽 왼쪽을 취소

여기서 clear : both 를 사용한 이유는 float : right 를 하게 되면 추가된 div 가 아래로 내려가지 않고 옆으로 붙기 때문이다.

Word-break

주로 줄 바꿈을 할 때 사용하는 요소이다.

• word- break : normal 중단점 : 공백
• word-break : break-all : 중단점 : 음절

Key Event

카카오톡을 보면 채팅창 값이 비어있으면 전송버튼이 비활성화 된다. 이 기능을 구현해 보려고 한다.

$(function(){
    if($(this).val().trim() == ''){
        $('#send').attr('disabled', true)
    }
    else {
        $('#send').attr('disabled', false)
    }
    $(document).on('keyup', '#test', function(){
        if($(this).val().trim() == ''){
            $('#send').attr('disabled', true)
        }
        else {
            $('#send').attr('disabled', false)
        }
    })
        $('#test').focus(function (e) { 
        e.preventDefault();
        $('#send').css('background-color', 'yellow');
    });
    $('#test').blur(function (e) { 
        e.preventDefault();
        $('#send').css('background-color', 'rgb(214,214,214)');
    });
    $(document).on('keypress', function(e){
        if($('#test').val().trim() != ''){
            if(e.which == 13) {
                send();
                $("#chat").scrollTop($(document).height());
            }
        }
    })
})

음 이렇게 보면 진짜 더러운 코드다..

하지만 더이상 좋은 생각이 나지 않아....

코드를 좀 보자면 key event 가 발생하지 않을 때 초기설정으로 disabled 해주고 그 이후 key event 를 통해 설정을 해주었다. 더 좋은 방법이 있으면 좋겠지만 계속 생각한다면 머리가 다 빠져버릴 것 같아서 이만.

NodeJS 로 채팅 서비스 만들기

시스템 소프트 웨어 강의를 배우면서 리눅스를 이용한 c 코드 C - S 를 만들어보니 재미가 있어 NodeJS 로 구현해 보기로 했다.

위의 링크를 통해 배우고 구현해 보기로 했다.

필요 모듈

const fs = require('fs');
// express module
const express = require('express');
// socket module
const socket = require('socket.io');
// html module
const http = require('http');

NodeJS 기본 모듈을 제외하면 express, socket.io 모듈이 추가로 필요하다.

Socket.io module

Socket.io 에 대한 함수를 알아보자

• socket.on(’event’, Callback func) : 해당 이벤트를 받고 콜백함수를 실행
• socket.emit(’event’, Data) : 이벤트 명을 지정하고 데이터 보냄
  • event 종류
    • connection : client 와 연결시 발생
    • disconnection : client 와 연결해제되었을 때 발생

Socket 은 객체 io 를 생성한다.

const io = socket(server)

생성된 io 를 이용해 데이터를 주고 받는 함수를 만들 수 있다.

main.js 에 만든 이벤트 함수들은 총

• newUser
• message
• disconnect

이며 이를 코드로 표현하면

io.sockets.on('connection', function(socket){

    socket.on('newUser', function(name){
        socket.name = name
        // newUser 이벤트로 가져온 name 을 update 이벤트로 데이터 전송
        io.sockets.emit('update', {type : 'connect', name:'SERVER', message: name + 'was connected'})
    })

    socket.on('message', function(data){
        data.name = socket.name
       // message 이벤트로 가져온 data 를 다른 client 에게 update 할 데이터 전송
        socket.broadcast.emit('update', data)
    })

    socket.on('disconnect', function(){
        socket.broadcast.emit('update', {type : 'disconnect', name:"SERVER", message : socket.name + 'Disconnected'})
    })
})

라고 표현할 수 있다.

홈페이지에 접속하면 사용자의 이름을 받는다.

socket.on('connect', function(){
    var name = prompt('Welcome', '')

    if(!name){
        name = 'Annonymous'
    }
    socket.emit('newUser', name)
})

prompt 를 이용해 이름을 입력받아 emit 하여 newUser를 실행한다.

이어 input 박스에 적은 메시지를 채팅창에 표현해보려고 한다.

HTTP module

var http  = require('http');
//http module 불러오기

var url = require('url');
// url module 불러오기

http.createServer(function(request,response){
    // http module 을 이용하여 서버 생성

    var pathname = url.parse(request.url).pathname;
    //url 뒤에 있는 디렉토리 / 파일 이름 파싱

    if(pathname=="/"{// pathname 이 비어있다면 index를 디폴트로
        pathname="/index.html";    
    }
}

콜백함수를 사용해 response 이벤트가 감지되면 데이터를 데이터에 받아온다.

var callback = function(response){
    var body='';
    response.on('data',function(data){
        body += data;    
    };
}

Mysql module

NodeJS 에서 DB 연동을 해보려고 한다.

const express = require('express')
const app = express();

express 를 불러와 app 에 할당한다.

var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit : 10,
    host :"localhost",
    user : "root",
    password : "0000",
    database : "moviestar"
})

require(’mysql’) 은 mysql 모듈을 사용하겠다라는 뜻.

mysql 을 실행하기 위한 pool 을 생성한다.

app.get('/db',function(req,res){
    pool.getConnection(function(err, connection){

        if(err) throw err;

        connection.query('select * from user', function(error,results, fields){
            res.send(JSON.stringify(results));
            console.log('results', results);
            connection.release();

            if(error) throw error;
        })
    })
})

생성된 pool 을 mysql 과 연결한다.

query 함수를 이용하여 mysql 에 명령을 전달한다.

sql에서 데이터 request 가 온다면 아래와 같이 불러올 수 있다.

request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;

          db.query(`insert into topic (title, description, created, author_id) 
          values (?, ?, NOW(), ?)`,
          [post.title, post.description, 1],
          function(error, result){
            if(error){
              throw error;
            }
            response.writeHead(302, {Location: `/?id=${result.insertId}`});
            response.end();
          });
      });