주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

채팅 기능 구현 기본 동작은 이해했으니 진도를 쭉 나가겠습니다. 구현해야하는 기본 기능을 먼저 확인해보겠습니다. > 추가할 기능 TODO - 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. - 메세지를 전송하고 받아야한다. - 스타일을 입힌다. > 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. 입장할 때 작성했던 connection이 기억나는가요? 퇴장할 때 이벤트도 같은 곳에 추가합니다. 사용자가 입장 시(소켓연결) 발생하는 이벤트 호출에 대한 바인딩 작업은 app.js의 connect 콜백함수 내부에서 작성되었습니다. // app.js io.sockets.on('connection', function(socket){ socket.on('newUser..

socket.io 모듈을 사용해 통신 기본 설정하기 > 클라이언트 스크립트 파일 생성 후 로드시키기 src 하위에 js 폴더를 생성하고 그 안에 index.js 파일을 생성합니다. 폴더구조는 아래와 같습니다. 통신 스크립트를 추가하기 전에 앞서서 index.html에 관련 js 파일을 로드합니다. // index.html welcome index.js는 생성했는데, socket.io.js도 생성해야하나요? 라고 질문하신다면 아니라고 답하겠습니다. socket.io.js는 서버 실행 시 자동으로 생성되기때문에 welcome 문구를 지우고 동적인 값을 넣기 위해 div 태그에 id값을 넣었습니다. // app.js io.sockets.on('connection', function(socket){ socket..

들어가기에 앞서... 전체적인 가이드는 근둥이님 블로그를 참고했습니다. https://codevkr.tistory.com/58?category=719250 쪼랩이라 예전에 채팅구현을 도전했다가 허접하게 마무리되었었는데, 근둥이님 블로그보니까 설명이 잘되어있어서 무리없이 진행했습니다. 제 글이 이해가 안된다면 근둥이님 블로그 글을 찾아가는것이 큰 도움이 될 것입니다. (굽신-감사합니다.) 예전에 작업했을때 이해못했던 부분이, 역할 담당의 부분인데, 결론은 이거였습니다. 서버는 express 담당, 통신은 socket.io 담당한다. express와 socket.io에 대해 간단히 설명하겠습니다. (자세한 사항은 정리를 어마무시하게 잘해두신 블로거님들 링크를 달아둘데니, 들어가서보셔도 되고, 검색해봐도 됩니..