Move sse to sse specific page
This commit is contained in:
parent
2a369f40f6
commit
5c9729fe4f
|
|
@ -3,77 +3,13 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title></title>
|
<title></title>
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
function send(connectionId, data) {
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
var url = `/chat/send?id=${connectionId}`;
|
|
||||||
xhr.open("POST", url, true);
|
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
xhr.send(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function xhr(method, url) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let xhr = new XMLHttpRequest();
|
|
||||||
xhr.open(method, url, true);
|
|
||||||
xhr.send();
|
|
||||||
xhr.onload = () => {
|
|
||||||
if (xhr.status >= 200 && xhr.status < 300) {
|
|
||||||
resolve(xhr.response);
|
|
||||||
} else {
|
|
||||||
reject({
|
|
||||||
status: xhr.status,
|
|
||||||
statusText: xhr.statusText
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = () => {
|
|
||||||
reject({
|
|
||||||
status: xhr.status,
|
|
||||||
statusText: xhr.statusText
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
xhr('GET', '/chat/getid').then(connectionId => {
|
|
||||||
let source = new EventSource(`/chat/sse?id=${connectionId}`);
|
|
||||||
|
|
||||||
source.onopen = function () {
|
|
||||||
console.log('Opened!');
|
|
||||||
};
|
|
||||||
|
|
||||||
source.onerror = function (err) {
|
|
||||||
console.log('Error: ' + err.type);
|
|
||||||
};
|
|
||||||
|
|
||||||
source.onmessage = function (data) {
|
|
||||||
var child = document.createElement('li');
|
|
||||||
child.innerText = data.data;
|
|
||||||
document.getElementById('messages').appendChild(child);
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('sendmessage').addEventListener('click', () => {
|
|
||||||
let data = document.getElementById('data').value;
|
|
||||||
send(connectionId, data);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Server Sent Events</h1>
|
<h1>Chat sample</h1>
|
||||||
<input type="text" id="data" />
|
<ul>
|
||||||
<input type="button" id="sendmessage" value="Send" />
|
<li><a href="sse.html">Server Sent Events</a></li>
|
||||||
|
<li><a href="polling.html">Long polling</a></li>
|
||||||
<ul id="messages">
|
<li><a href="ws.html">Web Sockets</a></li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title></title>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
function send(connectionId, data) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
var url = `/chat/send?id=${connectionId}`;
|
||||||
|
xhr.open("POST", url, true);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function xhr(method, url) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open(method, url, true);
|
||||||
|
xhr.send();
|
||||||
|
xhr.onload = () => {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
resolve(xhr.response);
|
||||||
|
} else {
|
||||||
|
reject({
|
||||||
|
status: xhr.status,
|
||||||
|
statusText: xhr.statusText
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onerror = () => {
|
||||||
|
reject({
|
||||||
|
status: xhr.status,
|
||||||
|
statusText: xhr.statusText
|
||||||
|
});
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr('GET', '/chat/getid').then(connectionId => {
|
||||||
|
let source = new EventSource(`/chat/sse?id=${connectionId}`);
|
||||||
|
|
||||||
|
source.onopen = function () {
|
||||||
|
console.log('Opened!');
|
||||||
|
};
|
||||||
|
|
||||||
|
source.onerror = function (err) {
|
||||||
|
console.log('Error: ' + err.type);
|
||||||
|
};
|
||||||
|
|
||||||
|
source.onmessage = function (data) {
|
||||||
|
var child = document.createElement('li');
|
||||||
|
child.innerText = data.data;
|
||||||
|
document.getElementById('messages').appendChild(child);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById('sendmessage').addEventListener('click', () => {
|
||||||
|
let data = document.getElementById('data').value;
|
||||||
|
send(connectionId, data);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Server Sent Events</h1>
|
||||||
|
<input type="text" id="data" />
|
||||||
|
<input type="button" id="sendmessage" value="Send" />
|
||||||
|
|
||||||
|
<ul id="messages">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue