Project/sendbird를 활용한 웹 채팅 (15) 썸네일형 리스트형 [Sendbird를 활용한 웹 채팅] 15. 결과물 이미지 모음 1. 로그인 페이지 2. 채팅 리스트 페이지 3. 채팅 페이지 4. 채팅 정보 확인 및 친구 초대 페이지 5. 다크 모드 [Sendbird를 활용한 웹 채팅] 14. Electron tray(트레이) 1. Electron에서 창을 닫았을 때 트레이로 숨기기 public/electron.js function createWindow() { ... initTrayIconMenu(win); win.on("close", (e) => { if (win.isVisible()) { win.hide(); e.preventDefault(); } }); ... } let tray; function initTrayIconMenu(win) { //임시 아이콘 const iconPath = path.join(__dirname, "/../build/logo192.png"); tray = new Tray(nativeImage.createFromPath(iconPath)); //트레이 아이콘 오른쪽 버튼 클릭 시 보여줄 메뉴 설정.. [Sendbird를 활용한 웹 채팅] 13. Electron window open 설정 - setWindowOpenHandler, 윈도우 포커스 맞추기 1. Electron에서 새로운 창 열릴 때 속성 설정하기 window.open으로 새로운 탭이 실행될 때, electron 윈도우를 설정하는 핸들러가 setWindowOpenHandler이다. 초기 윈도우인 win의 속성을 그대로 적용하고 부모 윈도우로 설정했다. public/electron.js function createWindow() { ... win.webContents.setWindowOpenHandler(() => { return { action: "allow", overrideBrowserWindowOptions: { ...win.webContents.browserWindowOptions, parent: win, }, }; }); ... } 2. Electron에서 채팅방 포커스 맞추기 🔒.. [Sendbird를 활용한 웹 채팅] 12. 채팅 페이지 라우팅의 변천사 & 그룹 채팅 메세지 읽음 동기화(electron) 1. 채팅 페이지 라우팅의 변천사 사실 현재 카테고리의 8번 포스팅에서 작성한 채팅 리스트 페이지에서 채팅 페이지로 넘어갈 때 window.open의 주소가 초기 라우팅 값이 아니었다. 초기 Pages/GroupChat.js & Pages/OpenChat.js const windowObj = window.open( "/chatting" ); windowObj.location.state = { chat: channel, isOpen: false, }; 처음에는 window.open("/chatting")으로 주소는 고정시키고 각 채팅 방의 url과 오픈채팅여부는 state로 넘겨주었었다. 하지만 state를 받은 컴포넌트에서 새로고침을 하면 state가 날라가는 문제가 발생했다. 따라서 localstora.. [Sendbird를 활용한 웹 채팅] 11. CRA 프로젝트 Electron으로 패키징하기 개요 create-react-app로 만든 현재 프로젝트를 Electron을 통해 데스크톱 앱으로 만들 것이다. 브라우저가 닫혀도 푸시 알림이 오도록 하기 위해서 웹 프로젝트를 데스크탑 앱으로 패키징하는 것이다. 1. 패키지 설치 npm i electron electron -D 2. package.json 세팅 main, homepage (필수) { "main": "public/electron.js", "homepage": "./", } scripts (필수) "scripts": { ... "react-start": "set BROWSER=none && yarn start", "electron-start": "set ELECTRON_START_URL=http://localhost:3000 && elect.. [Sendbird를 활용한 웹 채팅] 10. 채팅 페이지2 - scrollToBottom, 관리자 공지, Push 알림 1. scrollToBottom 문제 🔒 문제 scrollToBottom 호출이 제대로 이루어지지 않는 문제 발생. 채팅방에 들어왔을 때, 파일 이미지의 로딩이 느린 경우 가장 밑으로 내려가지 않는다. 🔑 해결 가로 세로 길이를 지정하고, object-fit: contain 옵션을 설정하니 잘 된다. const FileItem = styled.img` width: 200px; height: 160px; object-fit: contain; `; 2. 관리자 공지 관리자 공지 상단에 띄우기 Components/MessageItem.js {message.messageType === "admin" ? ( {isMore ? adminMsg : `${adminMsg.substring(0, 15)}...`} ) :.. [Sendbird를 활용한 웹 채팅] 9. 채팅 페이지 - 메세지 송수신, UI, 파일 다운로드 1. 채팅 메세지 불러오는 프로세스 채팅 페이지(Pages/Chatting.js)는 채팅 리스트에서 하나의 채팅 방을 클릭하면 이동하는 페이지이다. 페이지의 도메인은 유니크하며 채팅 url(url)과 오픈채팅여부(isopen)의 정보가 담겨있다. 프로세스 페이지 주소를 통해 채팅 url과 오픈 채팅 여부를 판단 getChannel 호출 채널 정보 저장 getMessageList 호출 오픈 채팅인 경우 enter, 그룹 채팅인 경우 markAsRead 이벤트 수행 getMessageList 호출 메세지 리스트 저장 scrollToBottom 호출 메세지 수신 이벤트 채팅 페이지에 들어와 있을 때 도착하는 메세지에 대한 이벤트 설정 ->채팅방에 있을 때 새로고침없이 전달된 채팅 출력 sb.onMessageR.. [Sendbird를 활용한 웹 채팅] 8. 채팅 리스트 불러오기 1. 오픈 채팅 리스트 불러오기 Pages/OpenChat.js const OpenChat = ({ history }) => { const sb = useMemo(() => new SendBirdAction(), []); const [openChatList, setOpenChatList] = useState([]); const getOpenChannels = useCallback( (isInit = false) => { sb.getOpenChannelList(isInit).then((list) => { setOpenChatList(list); }); }, [sb] ); //하나의 채팅 클릭 시 새로운 창으로 채팅 방이 열린다. const onClickBtn = (chat) => { window.open(.. 이전 1 2 다음
