B대면 노래방 | 211117

오늘 팀플은 저녁 늦게라도 시간 내서 만난거라 짧게 진행했다.

구현을 하고 싶었으나.. 오늘은 socket.io 공부만 하다가 끝났다.. ㅎ

소켓 공부는 https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js 의 '주요 확장 모듈 - socket.io' 파트를 참고하였다.

한 눈에 끝내는 Node.js - 구름EDU

 

#socket.io

emit으로 발생시키고 on으로 받아온다.

socket.on('event 이름', 함수)

 

express-generator로 새 프로젝트를 생성하면 서버 코드가 www로 분리되어 있다.

오늘은 server.js 코드에 서버 코드를 모두 작성하는 방식으로 공부하였다.

따라서 npm start로 서버를 구동시키지 않고 node server로 서버를 구동시켰다.

 

 

---

 

 

강의 뿐만 아니라 팀장님이 팀플 초반에 임시로 만드셨던 채팅 기능의 코드를 보면서 소켓을 이해하였다.

모든 걸 다 이해했다고 할 수는 없지만 그래도 어느 정도 감은 익힌 것 같다. (물론 구현하는 건 당연히 또 다른 얘기)

 

socketConnect.js에서 function 부분의 코드를 보며 구조를 이해했다.

 

input을 받아온 후 변수에 저장하고 socket.emit을 해서 이벤트를 발생시킨다.

또 다른 변수에 값을 저장하고 input 값을 초기화한다.

다시 보니 처음이라 생소해서 그렇지 socket의 on, emit만 이해하면 많이 어려운 부분은 아니었던 것 같다.

 

/*socketConnect.js*/

function roomCreateorJoin(event){
    event.preventDefault();
    const roomInput = form.querySelector('input');
    socket.emit('enterRoom', roomInput.value);
    room = roomInput.value;
    roomInput.value = '';
}
function sendChat(event){
    event.preventDefault();
    const chatInput = chat.querySelector('input');
    chatList.value += chatInput.value+'\n';
    socket.emit('sendChat',room,chatInput.value);
    chatInput.value = '';
}
form.addEventListener('submit', roomCreateorJoin)
chat.addEventListener('submit', sendChat)


socket.on('showChat',(message)=>{
    console.log(message)
    chatList.value += message+'\n';

/*www.js*/

socket.on('enterRoom',(roomName)=>

socket.join(roomName)

)

socket.on('sendChat',(roomName,chat)=>{

console.log(roomName, chat);

socket.to(roomName).emit('showChat',chat);

})