아꿈사 발표 Node JS 프로그래밍 8장

Node JS 프로그래밍

아꿈사 8 장최우영

8 장 익스프레스와 Socket.IO 를 이용한 Simple Chat 예제

> express simple-chat> cd simple-chat> npm install> npm install socket.io

준비

로컬 접속

8 장 익스프레스와 Socket.IO 를 이용한 Simple Chat 예제

닉네임 입력

새로운 방 생성

기존 방 입장

방에서 나가기

참가자 목록 갱신

메시지 동기화

메시지 보내기

유저 닉네임 처리

views/layout.jade

서명없는 UTF8

미리 클래스 정의

JQuery 는 그냥 호스팅 받아서 ..

views/index.jade

닉네임 폼

닉네임 유효성 체크

POST, /enter

app.js

views/index.-jade

공백 상태에서 입장 클릭

자바 스크립트에서 유효성 검사

닉네임 입력

404 에러

chat.js모듈 생성

닉네임 관리

true 를 반환하는 객체의 목록 리턴

app.jschat 모듈 사용

유저 닉네임 관리를 위해 세션과 쿠키 사용

app.js

POST, /en-ter

세션에 추가

views/enter.-jade

views/enter.jade

채팅방 생성

views/enter.js

POST, /make-Room

chat.js

채팅방 관리

chat.js

중복 검사

채팅방 추가

방 정보와 참가자 정보를 관리하기 위해JSON 으로 저장

나중에 채팅 참가하는 사람을 추가하기 위해 관리하는 목록

app.js

방 추가

views/makeRoom.jade 새로 생성

/join/ 방이름

app.js

/join/ 방이름 의 라우팅 처리요청 파라미터 변수 :idreq.params.id

views/room.jade

app.js

chat.js

map 함수를 이용해 이름만으로 된 배열 리턴

views/enter.jade

배열 출력을 위해 each 문 사용

Socket.IO 를 사용한 채팅방 입장 처리

views/layout.jade

socket.io 라이브러리 사용

views/room.jade

대화내용 창

참가자 출력 창

메시지 전송 창

views/room.jade

챗윈도우에 메시지 기록 ,스크롤바 이동

views/room.jade

서버 연결 후 접속을 요청한다 .

다른 사람의 입장 이벤트

rooms.jssocket.io 모듈화

모듈을 함수 형태로정의

room.js

방에 입장

방에 입장한 모든 사용자에게참가 이벤트 알림

app.js

모듈을 함수처럼 사용

Socket.IO 를 사용한 채팅 구현

views/room.jade

폼 전송 막기

메시지 전송 후 입력창 지우기

room.js

메시지 브로드 캐스팅

채팅 참가자 관리

chat.js

채팅 참가자의 배열 리턴

app.js

참가자 리스트를 뷰파일에 전달

room.js

views/room.jade

li 태그를 제거할 수 있도록아이디를 추가

views/room.jade

방 접속자 관리

채팅방 나가기

views/room.jade

views/room.jade

li 참가자 목록 제거

chat.js

채팅방을 찾아서 해당 참가자 제거

rooms.js

제거하고 브로드 캐스팅

정리

express 와 socket.io 사용쉽게 socket.io 를 이용해 실시간 통신 작업할 수 있음을 알았다 .