Project/sendbird를 활용한 웹 채팅
[Sendbird를 활용한 웹 채팅] 7. sendbird connect (레이아웃)
반응형
1. Sendbird connect
센드버드 api를 사용하기 위해서는 우선적으로 현재 사용자가 센드버드와 연결되어 있어야 한다. 로그인 여부를 판단한다고 생각하면 될 듯하다. 이를 위해 존재하는 것이 connect 메소드이고 이를 레이아웃 컴포넌트에 설정해야 한다.
Components/Layout.js
- 현재 접속한 사용자가 로그인 되어 있는 경우
connect한다. - 로그인되어 있지 않은 경우 로그인 페이지로 리다이렉트한다.
import React, { useCallback, useEffect, useMemo } from "react";
import { Redirect } from "react-router-dom";
import styled from "styled-components";
import PropTypes from "prop-types";
import { SendBirdAction } from "../Components/SendBirdAction";
import Header from "../Components/Header";
import Nav from "../Components/Nav";
import { useSelector } from "react-redux";
const Layout = ({ children, history, title, callBack, isNav, isBack }) => {
const sb = useMemo(() => new SendBirdAction(), []);
const userId = window.localStorage.getItem("id");
const connect = useCallback(
(id) => {
sb.connect(id).then((user) => {
// console.log(user);
});
},
[sb]
);
useEffect(() => {
if (userId) {
connect(userId);
} else {
//로그인 페이지에서 넘어오는 경우
if (userId) {
connect(userId);
} else {
return;
} //로그인했지만 세션 삭제된 경우
}
if (isNav) callBack(true);
}, [userId, connect, sb, isNav, callBack]);
return (
<>
{userId ? (
<Container>
<Header title={title} isBack={isBack} history={history} />
<Body>{children}</Body>
{isNav && <Nav title={title} history={history} />}
</Container>
) : (
<Redirect to={{ pathname: "/login" }} />
)}
</>
);
};
Layout.prototype = {
children: PropTypes.node.isRequired,
history: PropTypes.object,
callBack: PropTypes.func,
isNav: PropTypes.bool,
isBack: PropTypes.bool,
};
Layout.defaultProps = {
children: [],
history: {},
callBack: () => {},
isNav: false,
isBack: false,
};
export default Layout;
const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
`;
const Body = styled.div`
overflow: auto;
margin: 60px 0;
`;2. SendBirdAction.js
위의 코드에서 const sb = useMemo(() => new SendBirdAction(), []);의 SendBirdAction은 센드버드에서 제공하는 자바스크립트 샘플 코드에 있는 클래스로 대부분의 기능이 메소드로 들어가 있다. 이를 토대로 필요한 기능을 추가/수정해서 사용하면 편리하다. 이곳에 가면 샘플 코드를 볼 수 있다.
connect 함수 수정
connect(userId, nickname) {
return new Promise((resolve, reject) => {
const sb = SendBird.getInstance();
sb.connect(userId, (user, error) => {
error ? reject(error) : resolve(user);
});
});
}반응형
'Project > sendbird를 활용한 웹 채팅' 카테고리의 다른 글
| [Sendbird를 활용한 웹 채팅] 9. 채팅 페이지 - 메세지 송수신, UI, 파일 다운로드 (0) | 2021.09.16 |
|---|---|
| [Sendbird를 활용한 웹 채팅] 8. 채팅 리스트 불러오기 (0) | 2021.09.16 |
| [Sendbird를 활용한 웹 채팅] 6. 로그인 시행착오 (CORS, Failed to load resource: the server responed with a status of 404 (Not Found)) (0) | 2021.09.13 |
| [Sendbird를 활용한 웹 채팅] 5. 소셜 로그인 - 네이버, 카카오 (0) | 2021.09.05 |
| [Sendbird를 활용한 웹 채팅] 4. 라우팅 & 전체 스타일 (0) | 2021.09.05 |
