본문 바로가기
반응형

분류 전체보기986

리액트, Node JS - Socket.IO Middleware로 중복 로그인 방지하기 (Limiting Connections using Socket.IO Middleware) 리액트 전체 링크 Node JS 전체 링크 참고 - https://socket.io/docs/v4/middlewares/ - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 이전 글에서 중복 로그인을 제한했던 내용을 Socket.IO의 Middleware로 구현해 보자. Middleware socket.io의 미들웨어는 use()를 이용해서 구현할 수 있다. use.. 2024. 4. 5.
말하듯이 보컬 트레이닝 <노래를 즐겁고 프로페셔널하게!> 말하듯이 카카오톡 [a1z8] 말하듯이 인스타그램 말하듯이 네이버 플레이스 예약 말하듯이 유튜브 말하듯이 '말하듯이' 벨칸토 실용음악 [김태영] - 벨칸토 실용음악 대표. - 유튜브 이덜트 음악 파트 대표. - 독일 뮌스턴 오페라단 박재준 사사. - 서울대 출신 성악가 테너 신동혁 사사. - 카운터 테너 이상 www.youtube.com 비대면 강의도 가능합니다! 슈퍼스타 K를 시작으로 하여 보이스코리아, 미스터트롯, 싱어게인, 내일은가수 등 많은 오디션 프로그램이 유행하고 있습니다. 이러한 프로그램이 인기있는 이유는 가수뿐만 아니라 '일반인'도 참여할 수 있고 그곳에서 그들의 재능을 마음껏 뽐내기 때문입니다. 사실 우리나라 사람은 노래를 정말 잘합니다. 저에게 레슨받는 대다수분이 노래를 잘하십니다. 하.. 2024. 4. 4.
리액트, Node JS - Socket.IO로 중복 로그인 제한하기 (Limiting Connections with the Same ID) 리액트 전체 링크 Node JS 전체 링크 참고 - https://socket.io/how-to/get-the-ip-address-of-the-client - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 중복된 아이디로 로그인을 한 경우, 자동으로 로그아웃 해보자. 구현 namespace 대신 room을 이용한 코드로 돌아간다. 로그인 유저의 ID와 클라이언트의.. 2024. 4. 3.
Node JS - Express, Socket.IO 서버 HTTPS 설정하기 (Setting up Express / Socket.IO Server with HTTPS) Node JS 전체 링크 Node JS의 Express에서 HTTPS 적용 예시는 다음과 같다. const fs = require("fs"); const https = require("https"); const cors = require("cors"); const app = express(); // express cors 설정 app.use(cors()); // 라우터 설정 // app.use("/router", router); // HTTPS Options const options = { key : fs.readdirSync("Your Key Path"), cert : fs.readdirSync("Your Certificate Path"), requestCert : false, // 클라이언트로부터 인.. 2024. 4. 3.
리액트, Node JS - Socket.IO namespace로 채팅방 관리하기 (Managing Chat Room using namespace) 리액트 전체 링크 Node JS 전체 링크 참고 - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 room 대신 namespace를 이용해서 채팅방을 구현해 보자. namespace Socket.IO는 namespace를 이용해서 소켓 그룹을 만들어 분리된 통신 채널을 사용할 수 있다. express의 라우터와 비슷한 개념이다. 예를 들어 아래와 같이 room0에.. 2024. 4. 1.
리액트, Node JS - Socket.IO Room으로 채팅방 관리하기 (Managing Chat Room) 리액트 전체 링크 Node JS 전체 링크 참고 - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 Socket.IO의 room 기능을 이용해서, 선택한 채팅방에서만 메시지가 전달되도록 구현해 보자. 위의 구현은 선택한 채팅방에 대해서만 메시지를 받는다. 구현 Socket 서버에는 enter와 leave 이벤트를 등록한다. join 메서드로 해당 socket에 방 .. 2024. 4. 1.
리액트, Node JS - Socket.IO로 채팅하기 (Chatting with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - Socket.IO로 로그인 유저 관리하기 - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 Socket.IO를 이용해서 실시간 채팅을 구현해 보자. 구현 이전 글에서 구현한 채팅방은 bloodstrawberry와 Patrik (id 0, 1)이 있다. 편의상 존재하는 방은 빈방이고, 로그인 한 사용자는 id 0인.. 2024. 3. 31.
리액트 - 채팅방 들어오고 나갈 때 표시하기 (Message Separator) 리액트 전체 링크 참고 - https://chatscope.io/storybook/react/?path=/docs/components-messageseparator--docs - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 채팅방을 들어오거나 나갈 때, separator를 이용해 표시해 보자. MessageSeparator 추가하기 먼저 MessageList에 .. 2024. 3. 31.
리액트 - 채팅방 변경하기 (Change Chat Room) 리액트 전체 링크 참고 - https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--docs - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 채팅방 UI를 만들었으니, 채팅방을 변경하는 기능을 추가해 보자. 컴포넌트와 데이터 분리하기 메시지 컴포넌트에서 데이터를 분리한 것처럼, Conv.. 2024. 3. 29.
반응형

티스토리툴바