현재 진행 중인 토이 프로젝트에서 실시간 채팅을 구현하고 싶었습니다. 오늘 대부분의 시간을 잡아 먹었던 socket.io가 무엇인지 정리해둡니다😏
기본적으로 브라우저와 서버는 stateless 통신을 함으로 한번의 요청과 응답 후 연결이 끊어집니다. 이런 http 통신의 특성으로 실시간 상호작용는 웹 서비스를 만들기 위해선 웹소켓을 이용해야 합니다. Socket.io는 웹소켓을 쉽게 사용할 수 있게 해주는 모듈입니다. socket.io 공식 홈페이지를 통해 사용법을 익히실 수 있습니다.
npm install --save socket.io
nmp install --save socket.io-client
const app = require("express")();
const http = require("http").createServer(app);
const io = require('socket.io')(http);
let port = 3000;
http.listen(port, () => {
console.log("listening on *:" + port);
});
io.on('connection', function (socket) {
console.log(socket.id, 'Connected');
socket.emit('msg', `${socket.id} 연결 되었습니다.`);
socket.on('msg', function (data) {
console.log(socket.id, data);
socket.emit('msg', `Server : "${data}" 받았습니다.`);
});
});
socket.io 모듈을 사용해서 소켓 객체를 만들어 준 뒤, on 함수에 'connection' 이벤트를 파라미터로 넣어줍니다.
클라이언트 사이드 예시 입니다. 간소화 하기 위해 돔 조작은 제이쿼리
를 사용했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.io Test</title>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
box-sizing: border-box;
}
#chatContent {
border: 1px solid #000;
width: 100%;
height: 200px;
margin-bottom: 10px;
overflow-y: auto;
}
#myChat {
width: 100%;
}
</style>
</head>
<body>
<div id="chatContent">
</div>
<input id="myChat" type="text">
<script>
var socket = io.connect('http://localhost:3000');
socket.on('msg', function (data) {
$("#chatContent").append(`${data}<br>`);
});
$("#myChat").on("keyup", function () {
if (window.event.keyCode == 13) {
$("#chatContent").append(`Client : "${$(this).val()}" 보냅니다.<br>`);
socket.emit('msg', $(this).val());
$(this).val("");
}
});
</script>
</body>
</html>
script를 통해 socket을 불러옵니다.
트리거
되면 cb
가 작동됩니다.데이터
를 클라이언트로 보냅니다.connection
이벤트를 클라이언트 측에서 전해 올 때까지 기다립니다. 이벤트가 전해져 오면 socekt.id를 콘솔창에 출력 한 후, 클라이언트 측으로 ${socket.id} 연결 되었습니다.
를 문자열로 데이터에 담아 msg
이벤트 이름으로 Client에게 전달합니다. msg
이벤트를 트리거 해 $("#chatContent")
에 ${data}<br>
를 붙이는 append() 함수 로직을 실시 합니다.