<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket.io chat</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://localhost:8888/socket.io/socket.io.js"></script>
</head>
<body>
<div id="log">
<span>아이디 : <input tpye = "text" id="userid" /></span>
<span>방이름 : <input type="text" id="roomname" /></span>
<span><input type="button" id="enter" value="입장"/></span>
</div>
<div id="chat" style="display:none;">
<div style = "width:300px; height:300px; border:solid 1px;" id="txtarea">
<dl id = "txtappend">
</dl>
</div>
<br/>
<input type="text" style="width:255px;" id="txt"/><input type="button" value="Enter" id="btn"/>
</div>
<script>
$(document).ready(function(){
var socket = io.connect('http://localhost:8888');
$('#enter').click(function(){
var userid=document.getElementById('userid');
var roomname=document.getElementById('roomname');
socket.emit('join', {'userid':userid.value, 'roomname':roomname.value});
document.getElementById('log').style.display = 'none';
document.getElementById('chat').style.display = 'block';
});
socket.on('join', function(data){
alert(data);
$('#txtappend').append('<dd style="margin:0px;">' + data + '님이 '+roomname.value+'번 방에 접속 하셨습니다.</dd>');
});
$('#btn').click(function(){
var message = $('#txt').val();
socket.emit('message', message);
});
socket.on('message', function(data){
$('#txtappend').append('<dd style="margin:2px;">'+ userid.value +'님의 말<br/>' + data + '</dd>');
$('#txt').val('');
});
});
</script>
</body>
</html>
위 코드로 서버 실행시키고 같은 채팅방으로 입장하면 서로 입력한 문장은 전송이 되는데요.
단순히 문장 전달이 아니라 예를 들어 1과 2가 대화중일 때 2가 채팅을 치면 1에게는 2님의 말: 블라블라
이런식으로 출력이 돼야 하는데 2가 전송을 해도 1에게는 1님의 말 : 블라블라 이런식으로 나오네요.
2한테도 마찬가지구요.
위사진처럼요 ㅠㅠ
일단 첫번째 질문은 위처럼 상대방이 한말은 상대방 아이디로 나한테 출력이 되게하는거구요.
두번째질문은 제가 쓴 글은 채팅창안에서 오른쪽으로 보이고, 상대방이 전송한 말은 왼쪽에 보이게 하고 싶은데
코드를 어떻게 수정하면 좋을까요?(카톡형식처럼요)
저 방 들어가기 전에 아이디와 방 번호를 입력해서 같은 방에 있는 사람끼리만 채팅이 되도록 만들었습니다.
많은 도움 부탁드려요 ! ㅠㅠ
