Develop60 Admin Panel 사용하기_ 관리자페이지 socket.io는 우리가 만든 서버를 위한 관리자 UI(user interface)를 제공해 줘. 이를 이용하면 모든 소켓과 룸을 확인할 수 있어. 1. Admin UI 설치하기 터미널에 다음 명령어로 다운로드 받아보자. → npm i @socket.io/admin-ui 이렇게 @SplattingNotPermitted 오류가 발생하는 경우도 있음. 이는 터미널에서 특수 가호를 받지 못해 생기는 오류이다. 해결방법 : 큰따옴표로 묶어 입력하자! → npm i "@socket.io/admin-ui" 2.server.js 수정하기 Admin UI를 위해 설치한 패키지에서 instrument를 가져와야 함. 우리가 기존에 socket.io 서버를 만들었던 방식을 변경해보도록 하자. (환경설정) import h.. 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. 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. 이전 1 2 3 4 5 6 7 ··· 10 다음 반응형
