아꿈사 발표 node js 프로그래밍 8장
DESCRIPTION
12년 3월 24일 아꿈사 발표Node JS 프로그래밍 (변정훈 저) 8장TRANSCRIPT
![Page 1: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/1.jpg)
Node JS 프로그래밍
아꿈사 8 장최우영
![Page 2: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/2.jpg)
8 장 익스프레스와 Socket.IO 를 이용한 Simple Chat 예제
![Page 3: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/3.jpg)
> express simple-chat> cd simple-chat> npm install> npm install socket.io
준비
![Page 4: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/4.jpg)
로컬 접속
![Page 5: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/5.jpg)
8 장 익스프레스와 Socket.IO 를 이용한 Simple Chat 예제
![Page 6: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/6.jpg)
닉네임 입력
![Page 7: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/7.jpg)
새로운 방 생성
기존 방 입장
![Page 8: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/8.jpg)
방에서 나가기
참가자 목록 갱신
메시지 동기화
메시지 보내기
![Page 9: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/9.jpg)
유저 닉네임 처리
![Page 10: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/10.jpg)
views/layout.jade
서명없는 UTF8
미리 클래스 정의
JQuery 는 그냥 호스팅 받아서 ..
![Page 11: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/11.jpg)
views/index.jade
닉네임 폼
닉네임 유효성 체크
POST, /enter
![Page 12: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/12.jpg)
app.js
views/index.-jade
![Page 13: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/13.jpg)
공백 상태에서 입장 클릭
![Page 14: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/14.jpg)
자바 스크립트에서 유효성 검사
![Page 15: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/15.jpg)
닉네임 입력
![Page 16: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/16.jpg)
404 에러
![Page 17: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/17.jpg)
chat.js모듈 생성
닉네임 관리
true 를 반환하는 객체의 목록 리턴
![Page 18: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/18.jpg)
app.jschat 모듈 사용
유저 닉네임 관리를 위해 세션과 쿠키 사용
![Page 19: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/19.jpg)
app.js
POST, /en-ter
세션에 추가
views/enter.-jade
![Page 20: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/20.jpg)
views/enter.jade
![Page 21: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/21.jpg)
![Page 22: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/22.jpg)
![Page 23: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/23.jpg)
![Page 24: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/24.jpg)
![Page 25: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/25.jpg)
채팅방 생성
![Page 26: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/26.jpg)
views/enter.js
POST, /make-Room
![Page 27: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/27.jpg)
![Page 28: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/28.jpg)
![Page 29: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/29.jpg)
chat.js
채팅방 관리
![Page 30: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/30.jpg)
chat.js
중복 검사
채팅방 추가
방 정보와 참가자 정보를 관리하기 위해JSON 으로 저장
나중에 채팅 참가하는 사람을 추가하기 위해 관리하는 목록
![Page 31: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/31.jpg)
app.js
방 추가
![Page 32: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/32.jpg)
views/makeRoom.jade 새로 생성
/join/ 방이름
![Page 33: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/33.jpg)
app.js
/join/ 방이름 의 라우팅 처리요청 파라미터 변수 :idreq.params.id
![Page 34: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/34.jpg)
views/room.jade
![Page 35: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/35.jpg)
app.js
![Page 36: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/36.jpg)
![Page 37: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/37.jpg)
![Page 38: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/38.jpg)
![Page 39: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/39.jpg)
![Page 40: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/40.jpg)
chat.js
map 함수를 이용해 이름만으로 된 배열 리턴
![Page 41: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/41.jpg)
views/enter.jade
배열 출력을 위해 each 문 사용
![Page 42: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/42.jpg)
![Page 43: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/43.jpg)
![Page 44: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/44.jpg)
![Page 45: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/45.jpg)
![Page 46: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/46.jpg)
![Page 47: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/47.jpg)
![Page 48: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/48.jpg)
Socket.IO 를 사용한 채팅방 입장 처리
![Page 49: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/49.jpg)
views/layout.jade
socket.io 라이브러리 사용
![Page 50: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/50.jpg)
views/room.jade
대화내용 창
참가자 출력 창
메시지 전송 창
![Page 51: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/51.jpg)
![Page 52: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/52.jpg)
views/room.jade
챗윈도우에 메시지 기록 ,스크롤바 이동
![Page 53: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/53.jpg)
views/room.jade
서버 연결 후 접속을 요청한다 .
다른 사람의 입장 이벤트
![Page 54: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/54.jpg)
rooms.jssocket.io 모듈화
모듈을 함수 형태로정의
![Page 55: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/55.jpg)
room.js
방에 입장
방에 입장한 모든 사용자에게참가 이벤트 알림
![Page 56: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/56.jpg)
app.js
모듈을 함수처럼 사용
![Page 57: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/57.jpg)
![Page 58: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/58.jpg)
![Page 59: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/59.jpg)
Socket.IO 를 사용한 채팅 구현
![Page 60: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/60.jpg)
views/room.jade
폼 전송 막기
메시지 전송 후 입력창 지우기
![Page 61: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/61.jpg)
room.js
메시지 브로드 캐스팅
![Page 62: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/62.jpg)
![Page 63: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/63.jpg)
채팅 참가자 관리
![Page 64: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/64.jpg)
chat.js
채팅 참가자의 배열 리턴
![Page 65: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/65.jpg)
app.js
참가자 리스트를 뷰파일에 전달
![Page 66: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/66.jpg)
room.js
![Page 67: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/67.jpg)
views/room.jade
li 태그를 제거할 수 있도록아이디를 추가
![Page 68: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/68.jpg)
views/room.jade
방 접속자 관리
![Page 69: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/69.jpg)
![Page 70: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/70.jpg)
채팅방 나가기
![Page 71: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/71.jpg)
views/room.jade
![Page 72: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/72.jpg)
views/room.jade
li 참가자 목록 제거
![Page 73: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/73.jpg)
chat.js
채팅방을 찾아서 해당 참가자 제거
![Page 74: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/74.jpg)
rooms.js
제거하고 브로드 캐스팅
![Page 75: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/75.jpg)
![Page 76: 아꿈사 발표 Node JS 프로그래밍 8장](https://reader034.vdocuments.net/reader034/viewer/2022042507/558e2e661a28ab8e468b4654/html5/thumbnails/76.jpg)
정리
express 와 socket.io 사용쉽게 socket.io 를 이용해 실시간 통신 작업할 수 있음을 알았다 .