안녕하세요!
이번 강좌에서는 지난 포스팅에 이어서
Socket.io를 이용한 실시간 데이터 송/수신을 구현해보도록 하겠습니다!
[목차]
1. 서버 코드 작성
2. HTML 수정
3. 클라이언트 자바스크립트 생성
4. 클라이언트 코드 작성
5. 테스트
먼저 코드의 소스코드를 작성해줍니다.
server.listen 위에다가 위 처럼 작성해주세요!
on()은 소켓에서 해당 이벤트를 받으면 콜백함수가 실행됩니다!
io.sockets.on('connection' function(socket)...)
부분은 connection 이라는 이벤트가 발생할 경우 콜백함수가 실행됩니다.
io.sockets 는 접속되는 모든 소켓들을 의미하구요
접속과 동시에 콜백함수로 전달되는 소켓은 접속된 해당 소켓 입니다.
io.sockets.on('connection' function(socket)...)
콜백함수 안에서 해당 소켓과 통신할 코드를 작성하시면 됩니다!
socket.on('send', function(...))
socket.on('disconnect', function(...))
위의 2기능을 가진 코드가 있는데요
첫 번째는 send 라는 이벤트를 받을경우 호출이 됩니다.
두 번째는 disconnect인데 socket.io 기본 이벤트입니다!
연결되어있던 소켓과 접속이 끊어지면 자동으로 실행이 됩니다.
기본 이벤트(connection, disconnect 등)을 제외하고 여러분들이 원하는 이벤트 명을 지정하여 통신도 가능합니다!
위 코드에서 send 이벤트는 제가 정의한 이벤트입니다.
서버측 코드는 마무리 되었습니다.
index.html을 수정해줍니다.
위와 똑같이 해주세요!
index.html다 마무리 하셨으면 js 폴더에 index.js 파일을 생성해줍니다.
위와 같이 코드를 작성해주세요!
index.js클라이언트에서는 connection 이벤트가 아니라 connect 입니다!
위 코드를 설명드리자면
먼저 서버와 소켓이 연결되었을 때 id가 test인 요소의 값을 '접속 됨' 으로 설정합니다.
아래의 send 함수는 버튼을 클릭했을 때 호출이 되는데요
id가 test인 요소의 값을 서버로 전송하는 코드입니다!
중요한점은 socket.emit('send' ...) 이벤트 명입니다!
on은 수신, emit은 전송이라고 이해하시면 되는데요
send라는 이름의 이벤트를 전송했으면 받는곳에서는 on('send') 가 있어야 받을 수 있습니다.
이벤트명이 동일한것 끼리만 데이터 송/수신이 가능합니다!
만약 전송하는 부분에서는 emit('aa')라고 코드를 작성했는데
수신하는 부분에서 on('abc') 라고 한다면 전달 받을 수 없습니다.
이벤트명은 송/수신측에서 모두 동일해야합니다!
모두 작성을 하셨으면 저장하신 후 서버를 실행시켜봅시다
서버 실행 후 접속해보면 바로 '유저 접속 됨' 문자가 콘솔에 찍히는것을 확인하실 수 있습니다.
그리고 클라이언트도 확인해보시면 아래와같이 바뀌었을겁니다.
원상태는 빈 칸 이지만, 클라이언트 측의 connect 이벤트가 수신되고 id가 test인 요소의 값을 '접속 됨'으로 변경하였기 때문에
위와같이 값이 추가되었습니다.
원래있던 내용을 지우고 전송버튼을 눌러봅시다
(버튼을 누르면 위에서 작성한 send 함수가 호출되고 입력한 데이터가 서버로 전송됩니다)
서버의 콘솔을 확인해보시면 정상적으로 데이터가 전달되는 모습을 보실 수 있습니다!
Socket.io로 실시간으로 데이터를 송/수신하는 예제를 작성해보았습니다!
채팅은 오늘 진행한 내용의 응용이므로 크게 어렵지 않습니다!
오늘 진행한 내용은 아래에 모두 저장되어있습니다.
https://github.com/leegeunhyeok/node-chat/tree/chapter_4
다음 시간에는 UI를 꾸미고 채팅 기능을 구현해보도록 하겠습니다!
감사합니다.
