zoom - 채팅
사용자가 연결을 종료하면 남아있는 사람들에게 어떤사람이 나갔다 라는 것을 알리기 위함이다. rooms가 잘 이해가 안되어서 log를 좀 찍어봤는데 결국 room은 111을 의미하게되고 111번 사람들에게 나갔다는 메세지가 전달된다. 이제 채팅을하면 상대방에게 전송이 되고 나의 브라우저 화면에서도 You : 이런식으로 표현하겠습니다. 우선 send 버튼을 누르면 handleMessageSubmit을 호출한다. 이제 서버에 new_message를 보내고, 자신의 화면에는 You: 자신이 보낸 메세지 를 출력합니다. 이제 socket.on을 하면 자신외에 방에 속해있는 사람에게 new_message를 보냅니다. 프론트에서도 socket.on을 하여 화면이 출력 되도록 합니다.
zoom - room
버튼과 텍스트를 하나 더 만들어 준다. hidden = true로 보이지 않게 한다. 이제 방에 조인 하면 Enter Room 버튼을 숨기는 함수 showRoom 이다. 이함수를 실행 시키기 위해 백엔드에서 done 함수를 실행한다. pug 에 h3 태그를 생성한후 h3 에 사용자가 입력한 방 이름을 넣는다. 이제 다른 사용자가 들어오면 알리기 위해, 같은 방에 welcome을 emit 한다. someone joined! 라는 텍스트를 출력한다.
Zoom - socketio
Socket IO는 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임 워크 이다. socket.io를 다운로드한다. socket.io를 사용하면 정말 간단한 코드로 백엔드와 프론트엔드가 연결이 된다는 것을 알 수 있었다. 화면에 출력할 텍스트와 버튼을 만든다. 9 - 특정한 event를 emit가능하다. 그리고 object 로 전송이 가능하다. websocket을 사용할때 처럼 string으로 변환해서 보내지 않아도 된다. 10 - 그리고 iosocket은 3번째 argument를 함수로 사용이 가능하단점이다. 함수를 done이라고 백엔드에서 정해주었고 그런데 이 함수를 프론트에서 만든 것을 사용하는 것이다.
zoom - JSON.parse, JSON.stringify
닉네임을 입력 받기위한 텍스트와 버튼을 하나 더 만드는데 이때, 백엔드에서 프론트로 센드를 할때, 어느 것이 닉네임이고 어느것이 채팅인지 알 수가 없다. 그러므로 다음과 같이 구분 시켜준다. 그리고 다음 식별자에 맞게 쿼리 셀렉터를 만든다. 프론트 엔드에서 백엔드로 메세지를 보낼때 우리가 두가지 타입으로 보내길 원한다. Message, nickname 이때, 객체로 만든다음 스트링으로 바꿔서 보내야한다. 7- 객체를 만들어주고, 8 - 그객체를 스트링으로 바꾼다. 왜 이런 복잡한 방법을 쓰느냐? back-end는 여러가지 언어를 쓰기때문에 객체로 보내면 안된다. 그러므로 스트링으로 보낸다. 위와 같은 front -> back으로 전송 JSON.stringify = Object -> string JSON...
zoom 코딩 on 메소드
연결이 되면 server.js 에서 app.js 로 Connected to Browser 과 hello 메세지를 보낸다. 터미널에 이런식으로 콘솔 로그에 기록이되고, app.js 에서 또한 연결이 됐다, 그리고 아까 보낸 hello 메세지, 연결이 종료되었다. 실시간으로 보내게 된다. 정리하면, server.js 에서 보낸 메세지들은 터미널 콘솔에서 추력된다. 그리고 app.js에서 보낸 메세지는 크롬 콘솔에서 출력이 된다.
zoom 코딩 - Socket
on 메소드는 event가 발생하는 것을 기다린다. connection이 이루어지면 handleConnection function이 이루어진다. 그리고 on 메소드는 백엔드에 연결된 사람의 정보를 제공하는데 이때 socket이 사용된다. socket는 server와 browser의 연결이다. 우선 프로토콜이 http 가 아닌 ws 여야한다. 그리고 window.location.host를 사용한 이유는 기기마다의 localhost가 다를 수 있기 때문이다. server.js의 socket은 연결된 브라우저를 뜻하고 app.js 의 socket은 서버로의 연결을 뜻한다.
zoom 코딩 - ws서버와 http 서버
npm i ws 로 ws 를 설치하고 webSocket을 만든다. app(express의 어플리케이션으로 부터) Server를 만든다. webSocket 서버를 만든다. 21 - server는 http 서버 22 - wss 는 ws 서버 이다. 이렇게 되면 http://localhost:3000 , ws://localhost:3000 동일한 포트에서 두개의 서버 사용이 가능해진다.
zoom 코딩 - web Socket 과 http의 차이
실시간을 가능하게 해주는 webSocket webSocket 으로 chat, notification 같은 real-time을 만들 수 있다. http와 webSocket은 둘다 protocol 이다. http client server request --->
zoom 코딩 - 개발 환경 구축 요약
Nodemon 설정 -> nodemon.json Nodemon은 프로젝트를 살펴보고 변경사항이 있을시 서버를 재시작해주는 프로그램. 이때 서버를 재시작하는 대신에 babel - node를 실행하게 된다. (exec) babel은 우리가 작성한 코드를 일반 NodeJs 코드로 컴파일 해준다. 이때 그작업을 src/server.js 파일에 해준다. server.js 파일에서는 express를 import하고 , express 어플리케이션을 구성한다. view 엔진은 Pug로 설정이되고 views 디렉토리 또한 설정된다. public 파일도 설정이되고 public 파일은 이번 프로젝트에서 FrontEnd에 구동되는 코드이다. 왜냐하면 js 코드를 사용하다보면 어떤게 프론트인지 백엔드인지 헷갈리기 떄문이다. 이..