React 빠른 시작 가이드
5분 만에 React 앱에 실시간 채팅을 추가하세요.
0사전 준비
1. OiChat 가입 (30초, 무료)
2. 대시보드에서 프로젝트 생성 → API Key 발급
3. Auth Mode 선택:
- Client Mode — 백엔드 없이 Public Key만으로 바로 연동 (프로토타입, 데모)
- Server Mode — 자체 백엔드에서 JWT 발급 (프로덕션 권장)
1SDK 설치
terminal
npm install @oichat/sdkyarn, pnpm도 지원합니다: yarn add @oichat/sdk
2초기화 & 연결
typescript
import { OiChat } from '@oichat/sdk';
const oichat = new OiChat({
apiUrl: 'https://api.oichatapi.com',
wsUrl: 'wss://ws.oichatapi.com/connection/websocket',
publicKey: 'pk_여기에_퍼블릭키_입력',
});
// 연결
await oichat.connect({ userId: 'user_123' });Server Mode를 사용한다면
publicKey 대신 token을 전달합니다. 자체 백엔드에서 API Key + Secret Key로 JWT를 생성하세요.3채팅방 생성 & 메시지 전송
typescript
// 1:1 채팅방 생성
const room = await oichat.rooms.createDirect({
participantIds: ['user_456'],
});
// 메시지 전송
await oichat.messages.send({
roomId: room.id,
content: '안녕하세요! 👋',
});4실시간 메시지 수신
typescript
// 메시지 이벤트 구독
oichat.messages.on('message', (message) => {
console.log(`${message.senderId}: ${message.content}`);
});
// 타이핑 인디케이터
oichat.rooms.on('typing', (event) => {
console.log(`${event.userId} is typing...`);
});5React Hook 사용 (선택)
React 프로젝트에서는 Hook을 사용하면 더 편리합니다.
tsx
import { useOiChat, useMessages, useRooms } from '@oichat/sdk/react';
function ChatRoom({ roomId }: { roomId: string }) {
const { messages, send } = useMessages(roomId);
const [input, setInput] = useState('');
return (
<div>
{messages.map((msg) => (
<div key={msg.id}>
<b>{msg.senderId}</b>: {msg.content}
</div>
))}
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={() => { send(input); setInput(''); }}>
전송
</button>
</div>
);
}