싱글톤 패턴은 클래스의 인스턴스가 하나의 객체만 생성하도록 보장하는 패턴이다.
즉, 전역에서 하나의 객체만 공유 가능하도록 한다.
웹소켓 연동 혹은 DB Connection에서 주로 사용되는 패턴이다.
이전에 회사에서 구현했던 websocket 코드이다. 아래처럼 웹소켓 생성 부분에서 !socket일때만 생성되도록 한다. 그외에도 front에서 자주 볼 수 있는 싱글톤 패턴은 스토어 생성 부분인다.
그렇다면 왜 웹소켓은 싱글톤 패턴을 적용해야하는걸까? 각 독립적인 웹소켓이 필요하지 않는 상황이라면
여러개의 웹소켓이 연결되면 리소스 문제도 문제이고 콜백함수 충돌도 날 수 있어 데이터가 잘못 처리 될 수 있다.
export default ({app}, inject) => {
let socket = null;
function initWebsocket(payload, messageCallbackFunction) {
if (!socket) {
socket = new WebSocket(getWebsocketUri())
}
socket.addEventListener('open', (ev) => {
console.log('connected!', ev);
socket.send(
JSON.stringify({
action: 'join',
data: {
user_id: payload.userId,
propertyId: payload.propertyId,
product_code: PRODUCT_CODE
}
})
);
console.log(`success send message`, payload);
}
)
socket.addEventListener('message', (ev) => {
const message = ev.data;
console.log('Received message:', message);
console.log('Event type:', ev.type);
console.log('WebSocket object:', ev.target);
console.log('Event phase:', ev.eventPhase);
messageCallbackFunction(message);
})
socket.addEventListener('close', () => {
socket = null;
console.log('connection is closed');
setTimeout(()=> {
initWebsocket(payload,messageCallbackFunction);
},1000)
});
socket.addEventListener('error', () => {
socket = null;
console.log('connection is error');
setTimeout(()=> {
initWebsocket(payload,messageCallbackFunction);
},1000)
});
}
inject('socket', {
init: (payload, messageCallbackFunction) => {
initWebsocket(payload, messageCallbackFunction)
},
socketClose: () => {
socket.close();
},
});
};