socket IO

전 시간까지 만들었던 것을 다 지우고 socketIO를 설치하여 다시 만들어 보려고한다.

 

front-end와 back-end 둘다 socket IO를 설치해주어야한다.

먼저 backend에서는

npm i socket.io

이렇게 해주면 되고. 

이렇게 서버를 똑같이 실행시키고 localhost:3000/socket.io/socket.io.js에 들어가면 이러한 것이 딸려나오는 것이 확인된다.

home.pug에도 다음과같이 추가해주자

전에 webSocket API는 브라우저에 설치되어 있었지만 socketIO는 아니기때문이다. 저 순서도 중요하다.

pug에 설치를 해주어야 아래 script에서 설치된 기능을 사용할 수 있다.

즉 순서가 바뀌어버리면 설치가 안된 상태이기 때문에 app.js는 socketio의 기능을 사용할 수 없게 된다. 

socketIO를 pug에서 설치하면 io라는것을 사용할 수 있다. io는 자동적으로 back-end socket.io와

연결해주는 function이다.

이렇게만 해주면 끝이다. 전에 webSocket을 사용할 때는port번호와 localhost까지 적어주었는데 io function은 알아서

socket.io를 실행하고 있는 서버를 찾는다.

socketIO는 websocket하고 매우 비슷하다. 

 

server.js

전에는 webSocket이었지만 지금은 socket이 잘 출력되는 것을 확인할 수 있다.

예를들어 sockets를 우리가 직접 push해주었는데 지금은 알아서 연결된 socket들을 처리해주고 있다.

socketIO에는 ROOM 기능이 있다. 채팅방이라고 생각하자.

만약 원하는 방이 이미 존재한다면 그 방에 들어가게 되고 만약 방이 존재하지 않는다면 방을 만들게 된다.

 

첫째 특정한 event를 emit(send 아님)해 줄 수 있다. 어떤 이름이든 상관없다. 

단, socket.emit과 socket.on에는 같은 이름ㅇ르 사용해야 한다.

 

둘째 object를 전송할 수 있다. 전처럼 string만 전송할 필요가 없다. 갯수에도 제한이 없다 이젠 socketIO가 모두 처리해 줄 것이다.

셋째 마지막 인자에 콜백함수를 보낼 수 있는데 이 함수는 서버에서 호출할 수 있다.

서버에서 호출하면 서버에서 실행이 되는 것이 아니라 front end에서 실행이 된다. 

backend에서 function을 호출하지만 funtion은 frontend에서 실행이 된 것이다. 이걸 통해서

backend에 있는 자료를 frontend에 전송할 수 있다. ( 매개변수에 넣어서 )

 

app.js

server.js

form이 전송이 되면 room이라는 이벤트가 서버로 전송이 되는데 그때 2번째 인자에 있는 obj와 3번째 인자에 있는 함수도 같이 날라간다.

 

backend에서 room이라는 이벤트가 전송이되면 2번째 인자에 있던 obj를 msg로 받고(string안시켜도 알아서 해줌)

cb로 3번째에있던 함수를 받아올 수 있다. 콘솔창에 msg를 띄우고 cb를 실행시키면 msg의 내용은 backend에나오지만

cb의 내용은 웹 console에 나타나게된다.

 

event는 원하는 대로 만들어 넣어주면 된다. 아무 단어나 상관없다. 단지 app.js에서 보냈을 때와 같은 event명으로만 주고 받아오면 된다. 그리고 여러개의 인자를 넣어줄 수 있다  전에는 text만 보낼 수 있었지만 상관없이 'hi', 1, true, {gg:'gg'} 이런식으로 보낼 수 있고 받아올 때는 갯수만큼 변수를 만들어 주면 된다. 그리고 서버와 연결이 끊어지면 socketIO는 계속 재연결을 시도하고 다시 서버를키면 재연결 시도를 멈춘다