ChangHoon's IT Blog
[Node.js] 실시간 채팅 서비스 4 - Socket.io 기초 본문
안녕하세요!
이번 강좌에서는 지난 포스팅에 이어서
Socket.io를 이용한 실시간 데이터 송/수신을 구현해보도록 하겠습니다!
[목차]
1. 서버 코드 작성
2. HTML 수정
3. 클라이언트 자바스크립트 생성
4. 클라이언트 코드 작성
5. 테스트
먼저 코드의 소스코드를 작성해줍니다.
io.sockets.on('connection', function(socket) {
console.log('유저 접속 됨')
socket.on('send', function(data) {
console.log('전달된 메시지:', data.msg)
})
socket.on('disconnect', function() {
console.log('접속 종료')
})
})
/* 서버를 8080 포트로 listen */
server.listen(8080, function() {
console.log('서버 실행 중..')
})
server.listen 위에다가 위 처럼 작성해주세요!
on()은 소켓에서 해당 이벤트를 받으면 콜백함수가 실행됩니다!
io.sockets.on('connection' function(socket)...)
부분은 connection 이라는 이벤트가 발생할 경우 콜백함수가 실행됩니다.
io.sockets 는 접속되는 모든 소켓들을 의미하구요
접속과 동시에 콜백함수로 전달되는 소켓은 접속된 해당 소켓 입니다.
콜백함수 안에서 해당 소켓과 통신할 코드를 작성하시면 됩니다!
socket.on('send', function(...))
socket.on('disconnect', function(...))
위의 2기능을 가진 코드가 있는데요
첫 번째는 send 라는 이벤트를 받을경우 호출이 됩니다.
두 번째는 disconnect인데 socket.io 기본 이벤트입니다!
연결되어있던 소켓과 접속이 끊어지면 자동으로 실행이 됩니다.
서버측 코드는 마무리 되었습니다.
index.html을 수정해줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>채팅</title>
<link rel="stylesheet" href="/css/index.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index.js"></script>
</head>
<body>
<div id="main">
<input type="text" id="test">
<button onclick="send()">전송</button>
</div>
</body>
</html>
다 마무리 하셨으면 js 폴더에 index.js 파일을 생성해줍니다.
var socket = io()
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
var input = document.getElementById('test')
input.value = '접속 됨'
})
/* 전송 함수 */
function send() {
// 입력되어있는 데이터 가져오기
var message = document.getElementById('test').value
// 가져왔으니 데이터 빈칸으로 변경
document.getElementById('test').value = ''
// 서버로 send 이벤트 전달 + 데이터와 함께
socket.emit('send', {msg: message})
}
클라이언트에서는 connection 이벤트가 아니라 connect 입니다!
위 코드를 설명드리자면
먼저 서버와 소켓이 연결되었을 때 id가 test인 요소의 값을 '접속 됨' 으로 설정합니다.
아래의 send 함수는 버튼을 클릭했을 때 호출이 되는데요
id가 test인 요소의 값을 서버로 전송하는 코드입니다!
중요한점은 socket.emit('send' ...) 이벤트 명입니다!
on은 수신, emit은 전송이라고 이해하시면 되는데요
send라는 이름의 이벤트를 전송했으면 받는곳에서는 on('send') 가 있어야 받을 수 있습니다.
이벤트명이 동일한것 끼리만 데이터 송/수신이 가능합니다!
만약 전송하는 부분에서는 emit('aa')라고 코드를 작성했는데
수신하는 부분에서 on('ab') 라고 한다면 전달 받을 수 없습니다.
모두 작성을 마치고 저장한 뒤에 서버를 실행시켜 봅니다.
터미널을 열고 node app.js를 입력하면
'유저 접속됨' 문자가 콘솔에 찍는 것을 확인하실 수 있습니다.
그리고 클라이언트도 확인해보시면 아래와 같이 바뀌었을 겁니다.
원상태는 빈 칸 이지만, 클라이언트 측의 connect 이벤트가 수신되고 id가 test인 요소의 값을 '접속 됨'으로 변경하였기 때문에
위와같이 값이 추가되었습니다.
원래있던 내용을 지우고 전송버튼을 눌러봅시다
서버의 콘솔을 확인해보시면 정상적으로 데이터가 전달되는 모습을 보실 수 있습니다!
Socket.io로 실시간으로 데이터를 송/수신하는 예제를 작성해보았습니다!
다음 시간에는 UI를 꾸미고 채팅 기능을 구현해보도록 하겠습니다!
감사합니다.
'Node.js' 카테고리의 다른 글
| [Node.js] 실시간 채팅 서비스 3 - 정적 파일 (0) | 2019.11.06 |
|---|---|
| [Node.js] 실시간 채팅 서비스 2 - 서버 실행 (0) | 2019.11.06 |
| [Node.js] 실시간 채팅 서비스 1 - 준비단계 (0) | 2019.11.06 |
| [Node.js] Node.js 정의, 설치 및 개발환경 준비 (0) | 2019.11.06 |
