streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

=sse event

Browse source
This commit is contained in:
Miki 2024-01-06 15:57:12 +00:00
parent c05c44a13e
commit 3b6df8946c
13 changed files with 176 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

173
sse/fe/src/routes/sse/+page.svelte
View file

@ -1,93 +1,93 @@
<script>
import { onMount } from'svelte';
import { onMount } from 'svelte';
$: msg = "";
$: jmsg = {};
$: dping = "";
$: dpong = "";
$: msg = '';
$: jmsg = {};
$: dping = '';
$: dpong = '';
function now() {
const now = new Date(Date.now());
function now() {
const now = new Date(Date.now());
return now.toISOString();
}
return now.toISOString();
}
function SSEMsg() {
const sse = new EventSource(`/api/sse?events=ping,pong`);
function SSEMsg() {
const sse = new EventSource(`/api/sse?event=ping&event=pong`);
console.log('subscribe ping pong');
sse.onopen = () => {
console.log(`sse open ${now()}`);
msg = `sse open ${now()}`;
};
sse.onopen = () => {
console.log(`sse open ${now()}`);
msg = `sse open ${now()}`;
};
sse.addEventListener('ping', (e) => {
let Msg = JSON.parse(e.data);
msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dping = Msg.id;
});
sse.addEventListener('pong', (e) => {
let Msg = JSON.parse(e.data);
msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dpong = Msg.id;
});
sse.addEventListener('ping', (e) => {
let Msg = JSON.parse(e.data);
msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dping = Msg.id;
});
return () => {
sse.addEventListener('pong', (e) => {
let Msg = JSON.parse(e.data);
msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dpong = Msg.id;
});
return () => {
sse.close();
console.log(`sse closing ${Date.now()}`);
};
}
}
function Subscribe() {
function Subscribe() {
const sse = new EventSource(`/api/sse`);
console.log('subscribe');
sse.onopen = () => {
console.log(`sse open ${now()}`);
msg = `sse open ${now()}`;
};
sse.onerror = () => {
console.log(`sse error ${now()}`);
if (sse.readyState === EventSource.CONNECTING) {
console.log(`sse reconnecting ${now()}`);
msg = `sse reconnecting ${now()}`;
} else {
msg = `sse error ${now()}`;
}
};
sse.onopen = () => {
console.log(`sse open ${now()}`);
msg = `sse open ${now()}`;
};
sse.onerror = () => {
console.log(`sse error ${now()}`);
if (sse.readyState === EventSource.CONNECTING) {
console.log(`sse reconnecting ${now()}`);
msg = `sse reconnecting ${now()}`;
} else {
msg = `sse error ${now()}`;
}
};
sse.onmessage = (e) => {
let Msg = JSON.parse(e.data);
console.log(`received: ${JSON.stringify(Msg)}`);
msg = `received: ${JSON.stringify(Msg)} ${now()}`;
jmsg = Msg;
msg = `received: ${JSON.stringify(Msg)} ${now()}`;
jmsg = Msg;
};
sse.addEventListener('ping', (e) => {
let Msg = JSON.parse(e.data);
msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dping = Msg.id;
});
sse.addEventListener('pong', (e) => {
let Msg = JSON.parse(e.data);
msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dpong = Msg.id;
});
sse.addEventListener('msg', (e) => {
let Msg = JSON.parse(e.data);
msg = `Msg: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
})
return () => {
sse.addEventListener('ping', (e) => {
let Msg = JSON.parse(e.data);
msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dping = Msg.id;
});
sse.addEventListener('pong', (e) => {
let Msg = JSON.parse(e.data);
msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
dpong = Msg.id;
});
sse.addEventListener('msg', (e) => {
let Msg = JSON.parse(e.data);
msg = `Msg: ${Msg.id} ${Msg.data} ${now()}`;
console.log(msg);
});
return () => {
sse.close();
console.log(`sse closing ${Date.now()}`);
};
@ -98,40 +98,37 @@
// return unsub;
// });
async function newmsg() {
await fetch('/api/msg');
}
async function Ping() {
await fetch('/api/ping');
}
async function Pong() {
await fetch('/api/pong');
}
async function newmsg() {
await fetch('/api/msg');
}
async function Ping() {
await fetch('/api/ping');
}
async function Pong() {
await fetch('/api/pong');
}
</script>
<h1>{msg}</h1>
<ul>
<li>{jmsg.event}</li>
<li>{jmsg.data}</li>
<li>{jmsg.id}</li>
<li>{jmsg.event}</li>
<li>{jmsg.data}</li>
<li>{jmsg.id}</li>
</ul>
<br>
<br />
<h2>Ping: {dping}</h2>
<br>
<br />
<h2>Pong: {dpong}</h2>
<button on:click={newmsg}>send Msg</button>
<button on:click={Ping}>send Ping</button>
<button on:click={Pong}>send Pong</button>
<hr>
<hr />
<button on:click={SSEMsg}>SSE PingPong</button>
<br>
<br />
<button on:click={Subscribe}>SSE ALL</button>