Socket.io 시작하기

npm install --save socket.io 

먼저 socket.io 모듈을 설치한다.

package.json

 작성해준 package.json이다. socket.io와 더불어 express와 nodemon또한 모듈을 설치해주었다.

index.js / socket.io를 사용하기 위한 기본 설정이다.

io.on('connection',(socket)=>{  }); connection이 발생할 때 메소드 안의 핸들러를 실행한다. 

socket으로 연결된 페이지를 로드하면 connection이 발생하고, 페이지를 닫으면 disconnection이 실행돼 socket이 해제된다.  

실행시켜주면 잘 연결되었다고 console.log로 찍어준 listen:3000이라는 로고가 뜬다! 

이제 localhost:3000 을 열어주면 "연결됨!" 이라고 찍어준 console.log가 뜬다. 

 

일단 아래에서 보인 코드는 채팅에 입장할때 username을 입력하고 입장하게 된다. 

입장하면 어떤사람이 입장했는지를 모두에게 메세지를 보여주는 부분이다.

 

socket.emit() : 이벤트를 내보낸다. "이 이벤트좀 처리 해주시죠!!"

\public\main.js

socket.emit('new user', usrname);

이름이 'new user'라는 이벤트를 username변수를 같이 보낼테니 서버야 처리좀 해주련...!! 

이런 의미로 생각하면 될것같다ㅋㅋㅋㅋㅋ

 

그럼 이제 서버 어딘가에 new user이벤트를 받아서 처리하는 부분이 있을 것이다.

전송 받은 이벤트를 처리해주는 메소드는 on이다. 

 

socket.on();  이 이벤트를 ~~하게 처리해주겠다! "이벤트 처리했다!! OR 처리했으니 받아가거라~~"

index.js (서버쪽!!)

emit으로 보낸 new user이벤트를 받으면 안에 코드들을 차례로 처리해준다. 

여기서는 username을 받아 numOfUsers라는 변수와 함께 다시 다른 이벤트로 보내주는 일을 한다.

 (여기서 numOfUser는 채팅에 입장한 사람수를 세서 알려주기 위함!)

 

socket.broadcast.emit(); 나 빼고 다른 모든 소켓에게 보내주기

emit으로 다시 이벤트를 보내줄때 broadcast를 써주었다.

나 빼고 다른 모든 사람들에게 내가 입장했다는 메세지를 보여주기 위해서 broadcast를 사용했다.

 

이제 'user joined' 이벤트로 처리해달라고 보냈으니, public\main.js로 가서 user joined이벤트를 받아서 처리하쟈!

 

public\main.js "user joined이벤트가 들어오면 처리해라"

 

 

입장할때 어떤 사람이 입장했는지, 몇번째 입장한 사람인지 보여준다.

버그라고 한다면,,,,,,나중에 입장한 사람은 먼저 들어와있는 사람의 입장 메세지는 안보여야하는거 아닌가 하는데ㅠㅠㅠ

왼쪽 하단과 오른쪽은 두번째 세번째 입장인데 1번째 입장했다는 사람도 뜨고,,,,훔........

 

이건 연습용으로 따라 만든거니까 프로젝트 만들때 더 생각해봐야겠따