본문 바로가기
반응형

Node js53

리액트, 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.
리액트, Node JS - Socket.IO로 로그인 유저 관리하기 (Managing Logged-in Users with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - webSocket으로 로그인 유저 관리하기 - Socket.IO로 로그인 유저 관리하기 - Socket.IO로 채팅하기 - Socket.IO로 Toast UI Editor 동시 편집하기 이전 글에서 webSocket을 이용하여 로그인 유저를 처리하였다. 여기서는 socket.io를 사용해 보자. Socket.IO Server Node 서버에서 socket.io를 사용하기 위해 라이브러리를 설치한다. npm install socket.io 예시 코드는 다음과 같다. const { Server } = require("socket.io"); const io = new Server("3333", { cors: { origin: "http://localhost:.. 2024. 3. 27.
리액트, Node JS - webSocket으로 로그인 유저 관리하기 (Managing Logged-in Users with WebSocket) 리액트 전체 링크 Node JS 전체 링크 참고 - webSocket으로 로그인 유저 관리하기 - Socket.IO로 로그인 유저 관리하기 다음과 같이 각 페이지 별로 로그인 한 사용자가 누구인지 web socket을 이용해서 관리해 보자. Socket 라우터 페이지에서 ID를 입력하고 로그인 버튼을 누르면, 현재 페이지에 로그인 한 User ID를 모두 보여주고, 페이지를 나가거나, React App을 종료하면 로그아웃 한다. Simple Login 리액트에서 로그인 버튼을 누르면 input과 버튼이 비활성화 되도록 하자. import React, { useState } from "react"; const WebSocketClient = () => { const [user, setUser] = useS.. 2024. 3. 27.
Node JS - Chonky 파일 맵 만들기 (Make Chonky File Map) 리액트 전체 링크 Node JS 전체 링크 참고 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 Chonky 브라우저에서 사용하는 예시 demo.json은 다음과 같다. 1) 최상위 폴더의 ID인 rootFolderId가 필요하다. 2) fileMap에서 전체 폴더/파일에 대한 정보가 있다. 3) 폴더의 경우, isDir과 childrenIds, childrenCount 정보가 있다. 4) 파일의 경우, size와 isHidden 정보가 있다. 5) 폴.. 2024. 3. 16.
리액트 - Node 서버 작업 진행 상황 확인하기 (Checking Progress of Node Server Task) 리액트 전체 링크 다음과 같이 Node 서버에서 약 10초가 걸리는 작업이 있다고 가정하자. const express = require("express"); const router = express.Router(); let progress = 0; router.get("/progress", (req, res) => { res.json({ progress }); }); router.get("/performTask", (req, res) => { progress = 0; // 작업 초기화 progressInterval = setInterval(() => { progress += 1; console.log({ progress }); if (progress > 100) { progress = 100; clear.. 2024. 3. 15.
반응형

티스토리툴바