socket.io5 Zoom. 기능 추가사항 ( +오류 해결 ) 2023.9.10 수정사항) 방 입장 / 퇴장메시지 전달하기. 문제 : 방을 입장할때는 입장했다는 메시지가 출력되는데, 나갈때는 퇴장 메시지 전달 x 원인1) : 브라우저1 /브라우저 2 로 접속했을 때, 브라우저2가 나갈 때, 나갔다는 메시지를 브라우저1에게 전달해야함. 하지만 브라우저 2가 나가면 브라우저 2가 해당되어있던 socket자체가 소멸되어 누가 나갔는지 disconnect메서드에 올바른 파라미터(인자)값을 전달할 수 없음. 원인2) : 브라우저2가 꺼지면, 저장되어있던 roomName의 값도 소실되어 어느방으로 부터 나갔는지 disconnect메서드에 올바른 인자값을 전달할 수 없음. 원인1 해결방법) socket.to로 emit(강제함수실행) 메서드를 보내지 않고 wsServer자체에 값.. 2023. 9. 11. Zoom 만들기 .11 카메라 불러오기 목표 사용자로부터 영상을 가져와 화면에 보여주기 마이크 음소거나 카메라 켜고 끄는 기능을 제어하는 버튼을 구현 카메라 여러개인 경우를 대비하여 사용하던 카메라를 바꿀 수 있게 할 것임. 1. 영상 출력 요소 추가하기 myFace라는 부를 영상을 만들어야함. 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같은 특성을 추가하지 않아.. 2023. 9. 4. 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 만들기 8. socket.io 이용하여 채팅룸 구현(1) socket.io란? 실시간, 양방향, 이벤트에 기반한 통신 등을 모두 지원하는 라이브러리다. 웹소켓과 유사하지만 엄연히 다른, '웹소켓을 활용하는 라이브러리' 라고 이해하면 좋다. 1. socket.io 적용 준비하기 1-1) server.js 코드 수정 - ws와 관련된 코드 모두 삭제 import http from 'http'; import express from 'express'; const app = express(); app.set("view engine", "pug"); //dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미 app.set("views", __dirname + "/views"); app.use("/public", express.static(__di.. 2023. 8. 31. 이전 1 다음 반응형
