재시민

백만년만에 작성하는 근황. 

골드를 달성했다.

앞으로 리액트 공부와 블록체인 공부를 한달만에 할 예정이다.

가즈아

프로젝트를 하는데 로컬 이미지는 절대 안받아온다 ㅎㅎ 

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 박스에 적은 메시지를 채팅창에 표현해보려고 한다.