#3. GIF 실시간 채팅방 만들기

 

폴더명 : gif-chat

 

npm init 

 

npm i connect-flash cookie-parser dotenv express express-session morgan pug

 

 

파일생성 : .env

 

/.env

COOKIE_SECRET=gifchat 

 

 

app.js 생성 

 

routes/index.js 생성 

 

views/index.pug 생성 

 

 

websocket은 양방향 통신이라서 

front와 back 둘다 설정을 해줘야된다. 

 

 

//클라이언트--> http --> 서버 

//클라이언트 --> ws --> 서버 

 

 

https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df91988788

HTTP에서부터 WEBSOCKET까지

 

 

ws 개념

클라이언트에서도 설정을 해주고 동시에 서버에서도 코드를 작성해준다. 틀과 구조를 알아보자 

ws를 연결하는 구조 / 근거 등을 알자 

 

socket.io로 넘어간다.

socket.io가 ws위에서 도는 애인가 

얘도 연결하는 구조나 원리가 비슷해보임

 

 

path 를 맞춰줘야 client와 통신이 가능하구나. 

 

 

서버코드와 클라이언트 코드를 동시에 봐줘야되는게 관건이네 

 

서버에서 : socket.emit ( 'key' , 'value')

client에서 : 키에 맞게 "걸리네: 

 

마찬가지로

client에서 :  emit과 key를 보내면 그에 맞게 

서버에서 :  socket.on 으로 키에 맞게 걸림 

 

==> 즉 socket.io에서는 메세지 이벤트를 키와 값 으로 구분한다 

 

 

now , 

db와 pug세팅을 해보자 

 

몽고 쓴다잉

 

npm i mongoose multer axios color-hash 

 

views

schemas

routes 

 

기본녀석들은 기본으로 깔아놓고 작성한다. 

 

네임스페이스 개념 

 

 

(생략) 

 

 

일단 gif파일 올리는거까지 후딱끝