next js route api에서 sse 사용하기 질문입니다 센세이

[김동우]

// 클라이언트 코드
'use client';

import axios from "axios";
import { useEffect, useState } from "react";

export default function useCommentStream(){

    useEffect(() => {
        const eventSource = new EventSource('/api/get/stream/comment');
    
        eventSource.addEventListener('msg', (e) => {
            console.log(e)
        })

        return () => {
            eventSource.close()
        }
    });
}
// 서버 코드

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(
    req : NextApiRequest, res : NextApiResponse
){
    res.writeHead(200, {
        "Connection": "keep-alive",
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
    });

    res.write('event: msg\n');
    res.write('data: 바보\n\n');
}

요로코롬 적어봤는데 console.log(e) 가 동작하지 않습니다. 상태에도 넣어보고 
useEffect 종속성도 바꿔보고 별짓을 다했는데 잘 안되네요.

[codingapple]

res.writeHead(200, {
    Connection: 'keep-alive',
    'Content-Encoding': 'none',
    'Cache-Control': 'no-cache',
    'Content-Type': 'text/event-stream',
  });
이러면 된다는 소리가 있습니다 https://github.com/vercel/next.js/discussions/48427

[김동우]

감사합니다 센세!

[글쓴이]

글