Skip to content

Instantly share code, notes, and snippets.

@shininghyunho

shininghyunho/sse.html

Created March 28, 2022 08:17
Show Gist options
  • Save shininghyunho/0bb70377d3e89a7c16b1b4e3738ac65e to your computer and use it in GitHub Desktop.
Save shininghyunho/0bb70377d3e89a7c16b1b4e3738ac65e to your computer and use it in GitHub Desktop.
Download ZIP
sse 채팅 프론트 테스트
Raw
sse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE TEST</title>
</head>
<body>
<input id="userId"/>
<button id="enter">enter</button>
<br>
<input id="input"/>
<button id="send">send</button>
<pre id="messages"></pre>
<script>
document.querySelector("#send").addEventListener("click", () => {
console.log('send message');
fetch(`/pubs?message=${document.querySelector("#input").value}`);
});
document.querySelector("#enter").addEventListener("click", () => {
console.log('enter room');
const eventSource = new EventSource(`/subs?userId=${document.querySelector("#userId").value}`);
eventSource.onopen = (e) => {
console.log('onopen');
console.log(e);
};
eventSource.onerror = (e) => {
console.log('onerror');
console.log(e);
};
eventSource.onmessage = (e) => {
console.log('onmessage');
console.log(e);
console.log('lastEventId:'+e.lastEventId+', data:'+e.data);
document.querySelector("#messages").appendChild(document.createTextNode(e.data + "\n"));
};
eventSource.addEventListener("sse", (e) => {
console.log('event sse');
console.log(e);
console.log('lastEventId:'+e.lastEventId+', data:'+e.data);
document.querySelector("#messages").appendChild(document.createTextNode(e.data + "\n"));
});
});
</script>
</body>
</html>
@shininghyunho
Copy link
Author 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE TEST</title>
</head>
<body>
<button id="enter">enter</button>
<br>
<pre id="messages"></pre>
<script>
    document.querySelector("#enter").addEventListener("click", () => {
        console.log('enter room');
        const eventSource = new EventSource(`/subs}`);

        eventSource.onopen = (e) => {
            console.log('onopen');
            console.log(e);
        };

        eventSource.onerror = (e) => {
            console.log('onerror');
            console.log(e);
        };

        eventSource.onmessage = (e) => {
            console.log('onmessage');
            console.log(e);
            console.log('lastEventId:'+e.lastEventId+', data:'+e.data);
            document.querySelector("#messages").appendChild(document.createTextNode(e.data + "\n"));
        };

        eventSource.addEventListener("sse", (e) => {
            console.log('event sse');
            console.log(e);
            console.log('lastEventId:'+e.lastEventId+', data:'+e.data);
            document.querySelector("#messages").appendChild(document.createTextNode(e.data + "\n"));
        });
    });
</script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment