Server-Sent Events vs. Webhook

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// EventSource 객체 생성
const eventSource = new EventSource('/api/events');

// 메시지 수신 이벤트 처리
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log('새 이벤트 수신:', data);
    updateUI(data);
};

// 특정 이벤트 타입 처리
eventSource.addEventListener('update', function(event) {
    const updateData = JSON.parse(event.data);
    handleUpdate(updateData);
});

// 오류 처리
eventSource.onerror = function(error) {
    console.error('SSE 연결 오류:', error);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

app.get('/api/events', (req, res) => {
    // SSE 헤더 설정
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });
    
    // 주기적으로 이벤트 전송
    const intervalId = setInterval(() => {
        const data = { timestamp: Date.now(), value: Math.random() };
        
        // 일반 메시지 전송
        res.write(`data: ${JSON.stringify(data)}\n\n`);
        
        // 특정 이벤트 타입으로 전송
        res.write(`event: update\ndata: ${JSON.stringify(data)}\n\n`);
    }, 5000);
    
    // 연결 종료 시 정리
    req.on('close', () => {
        clearInterval(intervalId);
    });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const express = require('express');
const app = express();
app.use(express.json());

// 웹훅 엔드포인트
app.post('/webhook', (req, res) => {
    const event = req.body;
    
    console.log('웹훅 수신:', event);
    
    // 이벤트 유형에 따른 처리
    switch(event.type) {
        case 'payment.success':
            processPayment(event.data);
            break;
        case 'user.created':
            onboardUser(event.data);
            break;
        default:
            console.log('처리되지 않은 이벤트 유형:', event.type);
    }
    
    // 성공 응답
    res.status(200).send('Event received');
});

app.listen(3000, () => {
    console.log('웹훅 수신 서버가 포트 3000에서 실행 중입니다.');
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

async function sendWebhook(event) {
    try {
        // 등록된 웹훅 URL로 POST 요청 전송
        const response = await fetch('https://client-server.com/webhook', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Webhook-Signature': generateSignature(event), // 보안을 위한 서명
            },
            body: JSON.stringify(event)
        });
        
        if (response.ok) {
            console.log('웹훅 전송 성공');
            return true;
        } else {
            console.error('웹훅 전송 실패:', response.status);
            // 필요시 재시도 로직
            return false;
        }
    } catch (error) {
        console.error('웹훅 전송 중 오류:', error);
        // 필요시 재시도 로직
        return false;
    }
}

// 결제 성공 시 웹훅 전송 예시
function onPaymentSuccess(payment) {
    // 비즈니스 로직 처리
    updateDatabase(payment);
    
    // 웹훅 이벤트 전송
    sendWebhook({
        type: 'payment.success',
        timestamp: Date.now(),
        data: {
            paymentId: payment.id,
            amount: payment.amount,
            currency: payment.currency,
            customerId: payment.customerId
        }
    });
}