Step-by-Step

마무리 하니 즐겁네요! 📝프로젝트 과정📝 [1] Introduction - 기본 설정 [2] WebSocket 통신 - 메세지 및 이벤트 [3] Chat 기능 구현 및 소켓에 Nickname 부여 [4] Socket.IO 사용 - Room 생성 및 닉네임, 메세지 출력 [5] Video 및 Audio 출력하기 [6] 스트림 데이터 전송 P2P [7] 채팅 구현하기 + 인원 수 조절 📝프로젝트 결과📝

사실 이건 별거 없고,, 그냥 CSS만 열심히 검색했다ㅋㅋㅋ 이벤트 리스너 구현 chatForm.addEventListener("submit", handleChatSubmit); function handleChatSubmit(event){ event.preventDefault(); const input = chatForm.querySelector("input"); message = input.value; socket.emit("chat", message, roomName); addMessage("나 : " +message); input.value=""; } 상대에게도 보내주고, 내 채팅창에도 표시한다. socket 메세지 전송 wsServer.on("connection", socket => { /* Me..

우선 같은 Room 내 접속한 Peer간 비디오 및 오디오 전송을 구현해야 한다. (나중에 채팅도 작성할 것임) https://webrtc.org/getting-started/peer-connections?hl=ko 피어 연결 시작하기 | WebRTC Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 피어 연결 시작하기 피어 연 webrtc.org ※ P2P 통신 구성은 다음과 같다. 1. ICE Candidate - 정보 교환을 통해 상대 Peer의 네트워크 정보인 ICE(Interactive Connectivity Establishment) Can..

전부 App.js 내용이다. 나의 UI 정보이기 때문! 전역변수 Stream 설정 let myStream; 들어가고 싶은 Room 이름을 추가하고 클릭 /* Enter Room 클릭 */ welcomeForm.addEventListener("submit", handleWelcomeSubmit); /* Enter Room 클릭 이벤트 처리 */ async function handleWelcomeSubmit(event){ event.preventDefault(); const input = welcomeForm.querySelector("input"); /* emit으로 보내지 않고, join 전에 실행 */ await initCall(); /* UI Header 변경해줌 */ const header = do..

https://socket.io/ Socket.IO Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect. socket.io 간단한 정리 : [IT 기술] - HTTP vs WebSocket vs Socket.IO ㅠㅠ 왜 이걸 이제 공부한거지?? 너무 재밌다.. 양방향 통신! Socket.io 설치 npm install socket.io 소켓의 기본 기능 // 데이터 주기 socket.emit("이벤트명", ... );..

1) Chat 기능 Home Template - Form 설정 (home.PUG) ul form input(type="text", placeholder="write a message", required) button Send 메세지를 보낼 Form & Button 구현 메세지 작성 후 버튼 누르면 BackEnd 로 전송 (App.js) function handleSubmit(event) { // 기본 동작 방지 event.preventDefault(); socket.send(input.value); input.value = ""; // 전송 후 공백으로 변경 } messageForm.addEventListener("submit", handleSubmit); 접속한 Socket 저장 (Server.js) ..

Express로 App 생성 import express from "express"; const app = express(); App 기본 설정 (Server.js) - HTTP 방식 /* HTTP 방식 */ // views에 있는 pug 템플릿 보여줌 app.set("view engine","pug"); app.set("views", __dirname + "/views"); // root 경로로 들어가면 home을 보여줌 (-> ./views/home.pug) app.get("/", (req, res)=> res.render("home")); // public 경로로 들어가면 public 하위 경로의 JS 실행 (static으로 설정해야 보임) app.use("/public", express.static..

1장 Introduction - 기본적인 개발 설정 Frontend 부분 - public 폴더 Backend 부분 - server.js ※ 사용 기술 에디터 : VSCode 언어 : JavaScript JS 컴파일러 : Babel 서버 : Node.js + Express 통신 프로토콜 : SocketIO 실시간 통신 API : WebRTC