pug css , jquery 오류
script(src='http://code.jquery.com/jquery-latest.js') 추가하면 업성짐 html 태그 생성하는 방법 https://iot624.tistory.com/126
zoom - 닉네임
우선 닉네임을 저장하는 박스를 만들기위해 room div를 두개의 아이디를 가진 form 으로 나눈다. 그리고 버튼을 누르면 input을 아이디로 구분한다. 이벤트 리스너를 설정할때도 마찬가지 이다. 초기의 닉네임은 익명이며, 사용자가 닉네임을 저장한다면 이제 그 닉네임에 맞게 채팅 문자열이 전송된다.
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은 서버로의 연결을 뜻한다.