1. 타인의 타이핑 확인
채팅을 하다보면 누군가가 글을 입력하고 있다는 알림을 보신적이 있습니다. 특히 slack을 애용하신다면 자주 보셨을 거라 생각합니다. 이번에는 저희가 만든 채팅프로그램에 누군가 입력중이라는 표시를 추가해보도록 하겠습니다.
2. 클라이언트 socket
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#nick { position: absolute; right: 0; top: 0;}
#typing { position: absolute; right: 0; bottom: 80px; outline: 1px solid green}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<input id="nick" placeholder="Enter your name"/>
<div id="typing"></div>
<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));
});
socket.on('typing', function(msg){
$('#typing').text(msg);
});
$('#m').on('keyup', function(e){
if (e.target.value) {
socket.emit('typing', $('#nick').val());
}
})
});
</script>
</body>
</html>- <div id="typing"></div>: 타이핑중이라는 표시를 해줄 태그를 추가했습니다.
- keyup 이벤트: 기존 인풋 박스에 keyup 이벤트를 생성하여 키보드입력이 있을시 서버소켓으로 타이핑중인 nickname을 날립니다.
- socket.on('typing'): 서버에서 받아온 typing 관련 메시지를 태그에 출력합니다
- #typing: 태그에 스타일을 추가합니다.
3. 서버 socket
index.js
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.broadcast.emit('chat message', 'user connection...');
socket.on('chat message', function(msg){
socket.broadcast.emit('typing', '');
io.emit('chat message', msg);
});
socket.on('disconnect', function(){
socket.broadcast.emit('chat message', 'user disconnection...');
});
socket.on('typing', function(msg){
if(msg !== '') {
socket.broadcast.emit('typing', msg + ' is typing...');
}
});
});
http.listen(3000, function () {
console.log('listening on*: 3000');
});
- socket.on('typing'): 클라이언트에서 오는 typing 메시지를 리슨하고 있습니다. 그리고 broadcast를 통해 저를 제외한 다른 사람들에게 타이핑 중이라는 메시지를 보냅니다.
- 입력을 끝내고 send를 눌렀을때 받는 chat message 이벤트에 typing 메시지값을 '' 로 전송하여 타이핑이 끝났음을 클라이언트에게 표시합니다.
위 화면처럼 잘 나왔다면 성공입니다.
4. 마무리
조금 아쉬운 부분은 socket.io api 문서를 참고하여 더욱 다양한 기능을 앞으로 추가해야될것 같습니다.
'Front-End > socket.io' 카테고리의 다른 글
| [socket.io] 6. socket.io를 이용한 채팅프로그램 - 닉네임추가 (0) | 2019.11.27 |
|---|---|
| [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 |
리딩리드