Websoket6 ZOOM만들기 10. 채팅룸 완성하기 1. 닉네임 추가하기 1-1) home.pug 수정하기 닉네임 입력 폼 하나 추가해야함. doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해주는 라이브러리다. link(rel="stylesheet", href="https://unpkg.com/mvp.css") body //h1 It works! header h1 Z.. 2023. 9. 1. ZOOM 만들기 9. socket.io 이용하여 채팅룸 구현 (2) 1. home.pug 수정하기 채팅룸을 구별할 수 있게 되었으니 같은 채팅룸에 접속한 사용자들끼리만 메시지를 주고받을 수 있게 만들어보자. 다음의 코드를 home.pug에 추가하자 div#room ul form input(placeholder="message", required, type="text") button Send 2. app.js 수정하기 메시지를 입력하는 폼을 추가했지만 처음에는 이 폼을 숨겨야 한다. 왜냐하면 채팅룸에 아직 접속하지 않은 상태이기 때문. 룸 이름을 입력해 채팅룸에 접속하고 나면 반대로 룸 이름 폼이 사라지고 메시지 폼이 보이도록 app.js를 수정하자. const socket = io(); const welcome = document.getElementById("welcom.. 2023. 9. 1. ZOOM 만들기 7. 실시간 채팅구현 +@ 이전에 실시간 채팅을 구현하였고 이번 포스팅에서는 닉네임과 메시지 구분처리 / 익명처리 / 데이터 모양 다듬기 위주로 부가적인 내용을 다룰 예정이다. 1. 닉네임과 메시지 처리하기 닉네임은 닉네임대로 / 메시지는 메시지대로 처리할 예정. if문 대신에 switch문을 사용하여 가독성을 높힘 server.js코드를 다음과 같이 수정함. wss.on("connection", (socket) => { sockets.push(socket); // 브라우저가 연결됐을 때. console.log("Connected to Browser"); //브라우저가 종료되었을 때를 의미하는 close socket.on("close", () => console.log("Disconnected from Browser")); //브.. 2023. 8. 31. Zoom만들기_ 6. 실시간 채팅 구현 1. 웹 요소 추가하기 브라우저 화면에 입력 필드와 목록을 만들고, 메시지를 주고받은 결과를 바로바로 표시할 수 있게 해보자. ※ 당연히 서버는 실행되어져 있어야함. 1-1) home.pug (뷰 엔진) 수정 코드의 ul부분은 메시지를 받을 때마다 자바스크립트를 이용해서 채울 예정 ( like 카카오톡 ) doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을.. 2023. 8. 30. Zoom 만들기 _ 5. 메시지 주고받기 1. server.js 수정하기 (수정 전) function handleConnection(socket){ console.log(socket) } wss.on("connection", handleConnection) 다음의 코드를 좀 더 직관적으로 수정하고 넘어가자 (수정 후) wss.on("connection", (socket) => { console.log(socket); }) why?) handleConnection 함수를 먼저 선언한 다음 on 메서드에 인자로 전달하는 대신, 같은 역할을 하는 익명 함수를 만들어 on 메서드에 포함되는 형태로 변경했음. → connection 이벤트가 발생했을 때 소켓을 받는다는 걸 좀 더 직관적으로 표현할 수 있음. 2. socket이용하여 사용자에게 메시지 보.. 2023. 8. 30. ZOOM 만들기_ 4. 웹소켓 적용 HTTP는 요청이 있어야 응답을 할 수 있는 'stateless'의 특징을 가지고 있다. → 요청과 응답이 끝나면 서버가 사용자를 잊어버린다는 뜻 웹소켓은 한번 켜지면 꺼질 때 까지 요청응답 없이 실시간 요청응답이 지속된다. 1. ws(web soket)패키지 설치하기 'npm i ws' 명령어 실행 2. 웹소켓 프로토콜 추가하기 우리는 현재 server.js에서 express를 기반하여 서버를 만들고 있음 express는 http를 기반으로 동작하기 때문에 ws와 프로토콜이 다름 따라서 express서버에 ws패키지의 기능을 합치는 방식으로 서버를 완성할 예정. 2-1) server.js 코드 수정 먼저 http 와 ws를 import하고 app import http from 'http'; import.. 2023. 8. 30. 이전 1 다음 반응형
