Redux Thunk를 이용한 웹 소켓 통신 구현하기
이번 포스트에서는 Redux Thunk를 사용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보겠습니다. 웹 소켓은 양방향 실시간 통신을 가능하게 하는 기술로, 실시간 채팅 및 게임 등에 자주 사용됩니다. Redux Thunk는 Redux 미들웨어로, 비동기 작업을 관리하고 Redux store와 상호작용할 수 있는 기능을 제공합니다.
1. 웹 소켓 연결 설정
먼저, 웹 소켓을 연결하기 위해 WebSocket 객체를 생성하고 서버에 연결합니다. 이 작업은 Redux Thunk를 통해 비동기로 처리됩니다.
import { WEBSOCKET_CONNECTED, WEBSOCKET_MESSAGE_RECEIVED } from './types';
export const connectWebSocket = () => {
return (dispatch, getState) => {
const socket = new WebSocket("ws://localhost:3000"); // 웹 소켓 주소 입력
socket.onopen = () => {
dispatch({ type: WEBSOCKET_CONNECTED });
};
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
dispatch({ type: WEBSOCKET_MESSAGE_RECEIVED, payload: message });
};
};
};
2. 웹 소켓 메시지 전송
웹 소켓을 통해 서버로 메시지를 전송하기 위해서는 send 메서드를 사용합니다. Redux Thunk를 통해 비동기로 처리됩니다.
import { WEBSOCKET_SEND_MESSAGE } from './types';
export const sendMessage = (message) => {
return (dispatch, getState) => {
const socket = getState().socket;
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify(message));
dispatch({ type: WEBSOCKET_SEND_MESSAGE, payload: message });
}
};
};
3. Redux Store와의 연동
위에서 생성한 웹 소켓 객체를 Redux store와 연동하기 위해 액션과 리듀서를 만들어야 합니다.
// types.js
export const WEBSOCKET_CONNECTED = 'WEBSOCKET_CONNECTED';
export const WEBSOCKET_MESSAGE_RECEIVED = 'WEBSOCKET_MESSAGE_RECEIVED';
export const WEBSOCKET_SEND_MESSAGE = 'WEBSOCKET_SEND_MESSAGE';
// actions.js
import { connectWebSocket, sendMessage } from './websocketActions';
export const socketActions = {
connectWebSocket,
sendMessage,
};
// reducers.js
import { WEBSOCKET_CONNECTED, WEBSOCKET_MESSAGE_RECEIVED } from './types';
const initialState = {
isConnected: false,
messages: [],
};
export const socketReducer = (state = initialState, action) => {
switch (action.type) {
case WEBSOCKET_CONNECTED:
return { ...state, isConnected: true };
case WEBSOCKET_MESSAGE_RECEIVED:
return { ...state, messages: [...state.messages, action.payload] };
default:
return state;
}
};
4. 컴포넌트에서 사용하기
Redux store에 연결된 컴포넌트에서 위에서 만든 액션을 디스패치하여 웹 소켓 통신을 사용할 수 있습니다.
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { socketActions } from './store/socket';
const ChatComponent = () => {
const dispatch = useDispatch();
const messages = useSelector((state) => state.socket.messages);
useEffect(() => {
dispatch(socketActions.connectWebSocket());
}, [dispatch]);
const handleSendMessage = (message) => {
dispatch(socketActions.sendMessage(message));
};
return (
<div>
{messages.map((message) => (
<p>{message}</p>
))}
<button onClick={() => handleSendMessage("Hello!")}>Send Message</button>
</div>
);
};
export default ChatComponent;
이제 Redux Thunk를 사용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보았습니다. Redux Thunk와 웹 소켓을 이용하면 손쉽게 실시간 통신 기능을 구현할 수 있습니다. 참고로 위의 예제는 단순화된 예제이며, 실제 프로젝트에서는 더 다양한 기능을 추가해야 할 수 있습니다.
참고 자료
- Redux Thunk 공식 문서: https://github.com/reduxjs/redux-thunk
- 웹 소켓 API 문서: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket