socket.io 이벤트

소켓은 이벤트를 기반으로 작동한다.  

 

서버측 소켓객체의  예약 이벤트 

• connect 
• message
• disconnect
• reconnect
• ping
• join
• leave

클라이언트측 소켓객체의  예약 이벤트 

• connect
• connect_error
• connect_timeout
• reconnect, 등
  
  

---

앞에서 connect와 disconnect는 사용해봤다. 이번에는 message 이벤트를 사용해서 클라이언트에게 메시지를 보내본다. 

앞서 작성한 app.js 파일에서  connect와 disconnect 사이에  다음과 같은 코드를 넣어준다. 

 

app.js

io.on('connection', (socket) => {
  console.log('A user connected');

////////////////////////////////////////////////////////////////////////////////
  setTimeout(function () {
    socket.send('바쁜 벌꿀은 슬퍼할 시간도 없다.');
  }, 3000);
/////////////////////////////////////////////////////////////////////////////////


  socket.on('disconnect', () => {
    console.log('A user disconnected');
  })

})

위의 send를 통해서 클라이언트에 있는 message 이벤트에 도착할 수 있다.  

 

The send function on socket object associates the 'message' event.

( 자습서에 보면 이렇게 나와있는데 뭐  socket 객체의 send 함수가 message와 관련이 있다고 한다. )

 

---

서버쪽에서 메시지를 보낼 수 있게 되었지만  아직 클라이언트 쪽에서 받을 준비가 되지않았다. 

클라이언트 쪽에도 코드를 추가해준다. 

 

views > index.js

     const socket = io();
     socket.on('message', function(data){document.write(data)});

 

여기까지 마치고 브라우저에 들어가서 localhost 3000에 접속하고 3초를 기다리면 위에 우리가 정해줬던 문장이 나온다. 

message는 socket.io 가 제공하는 내장형 이벤트다.  실제 소켓을 사용할 때는 이벤트를 구분할 필요가 있기 때문에  이건, 별로? 쓸 일이 없다..  아마도

 

 

---

사용자 정의 이벤트

 

socket.io 는 사용자 지정 이벤트를 생성할 수 있다.  

socket.emit 을 사용해서 사용자 지정 이벤트를 생성하고 실행할 수 있다. 

socket.on 을 사용해서 이러한 이벤트들을 처리할 수 있다. 

 

 사용자 정의 이벤트를 사용하기위해, 아까 썼던  app.js 의 메시지 부분을 살짝 고쳐준다. 

 

socket.emit(evnet, object) 

event: 사용자 정의 이벤트명

 

test 라는 이벤트를 만들어봤다. 

 

app.js 

io.on('connection', (socket) => {
  console.log('A user connected');

////////////////////////////////////////////////////////////////////////////////
  setTimeout(function () {
    socket.emit('test', {testText:바쁜 벌꿀은 슬퍼할 시간도 없다.});
  }, 3000);
/////////////////////////////////////////////////////////////////////////////////


  socket.on('disconnect', () => {
    console.log('A user disconnected');
  })

})

 

클라이언트측에서 이 test 라는 사용자 정의 이벤트를 처리하려면 test를 받을 수 있는 수신기가 필요하다. 

그게 바로 socket.on()

 

socket.on(event, callback)

 

 

views>index.html

     const socket = io();
     socket.on('test', (data)=>{document.write(data.testText)});

---

 위에서 서버에서 클라이언트로 이벤트를 emit하는 것을 알아봤다.

 마찬가지로 클라이언트측에서도 이벤트를 emit 할 수도 있다. 

 

veiws>index.html

<script>
     const socket = io();
     socket.emit('djKim',{msg:'북은 핵을 개발한 적도 없고, 개발할 능력도 없다.'});
  </script>

브라우저가 접속하면  소켓이 연결되고, djKim 이라는 이벤트를 emit 한다.

 

app.js

io.on('connection', (socket) => {
  // console.log('A user connected');


  // setTimeout(function () {
  //   socket.emit('test', { testText: '바쁜 벌꿀은 슬퍼할 시간도 없다.' });
  // }, 4000);

  socket.on('djKim', (data) => {
    console.log(data.msg + '북이 핵을 개발하면 내가 책임지겠다.');
  })

  // socket.on('disconnect', () => {
  //   console.log('A user disconnected');
  // })

})

 서버에서 djKim 이라는 이벤트를 받으면  아래와 같은 메시지가 콘솔창에 출력된다. 

클라이언트의 메시지를 서버가 잘 받았다^^