socket.io 글들을 순차적으로 진행하시면 socket.io를 이해하는데 더욱 도움이 됩니다.
1. 닉네임추가
기존에 완성했던 채팅창에는 누구의 글인지 알 수가 없었습니다. 이제는 닉네임을 추가해서 조금더 채팅창 처럼 보이도록 하겠습니다.
2. 클라이언트 socket.io
index.html
<style>
...
#nick { position: absolute; right: 0; top: 0;}
</style>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<input id="nick" placeholder="Enter your name"/>// 닉네임 form 추가
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#nick').val() + ':' +$('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
- 먼저 닉네임을 만들 input 박스를 추가합니다.
- socket.emit() 부분에 닉네임을 포함한 msg 를 만들어 전송합니다
- style 부분에 저희가 만든 input에 absolute 포지션을 추가합니다.
3. 테스트
창을 여러게 열고 이름을 입력해보겠습니다.
이름이 잘 노출되나요??? 위와같이 나왔다면 성공입니다.
저는 클라이언트 사이드에서 임의로 닉네임을 추가했지만 만약 서버에 회원정보가 있다면 서버에서 클라이언트로 아이디를 추가해서 내려주는 구조로 만드는것이 좋을 것 같습니다.
'Front-End > socket.io' 카테고리의 다른 글
| [socket.io] 7. socket.io를 이용한 채팅프로그램 - 타이핑중추가 (0) | 2019.11.28 |
|---|---|
| [socket.io] 5. socket.io를 이용한 채팅프로그램 - 유저접속추가 (0) | 2019.11.26 |
| [socket.io] 4. socket.io를 이용한 채팅프로그램 - 이벤트처리 & 채팅완성 (0) | 2019.11.26 |
| [socket.io] 3. socket.io를 이용한 채팅프로그램 - socket.io 연동 (0) | 2019.11.25 |
| [socket.io] 2. socket.io를 이용한 채팅프로그램 - 프로젝트 설정 (0) | 2019.11.21 |
리딩리드