NodeJS 로 채팅 서비스 만들기 디자인
이제 디자인과 추가기능을 만들어보려고한다.
추가할 목록은 다음과 같다.
디자인
디자인 요소는 총 세가지로 구성해보았다.
- 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 를 통해 설정을 해주었다. 더 좋은 방법이 있으면 좋겠지만 계속 생각한다면 머리가 다 빠져버릴 것 같아서 이만.
