Created
August 4, 2023 13:26
-
-
Save Hiweus/0eea3c4916f07806b8a7dcbf37312af8 to your computer and use it in GitHub Desktop.
Demo SSE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" | |
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" | |
crossorigin=""/> | |
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" | |
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" | |
crossorigin=""></script> | |
<style> | |
#map { | |
height: 500px; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<pre id="coord"></pre> | |
</body> | |
<script> | |
const coord = document.querySelector('#coord') | |
const coordenadaInicial = [-3.182440, -66.369159] | |
const map = L.map('map').setView(coordenadaInicial, 13); | |
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
maxZoom: 19, | |
attribution: '© OpenStreetMap' | |
}).addTo(map); | |
const pontos = [ | |
coordenadaInicial, | |
] | |
const polyline = L.polyline(pontos, {color: 'red'}).addTo(map); | |
const eventSource = new EventSource('/?latitude=-3.182440&longitude=-66.369159') | |
eventSource.addEventListener('message', event => { | |
const data = JSON.parse(event.data) | |
console.log('data', data) | |
const { latitude, longitude } = data | |
pontos.push([latitude, longitude]) | |
L.marker([latitude, longitude]).addTo(map) | |
polyline.setLatLngs(pontos) | |
coord.innerHTML = JSON.stringify(pontos, null, 2) | |
}) | |
const iconeIncendio = L.icon({ | |
iconUrl: 'https://img.freepik.com/free-icon/bonfire_318-655654.jpg?w=360', | |
iconSize: [38, 95], | |
iconAnchor: [22, 94], | |
popupAnchor: [-3, -76], | |
shadowSize: [68, 95], | |
shadowAnchor: [22, 94] | |
}); | |
eventSource.addEventListener('incendio', event => { | |
const data = JSON.parse(event.data) | |
const { latitude, longitude } = data | |
L.marker([latitude, longitude], { | |
icon: iconeIncendio | |
}).addTo(map) | |
coord.innerHTML = JSON.stringify(pontos, null, 2) | |
}) | |
</script> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createServer } from 'node:http' | |
import fs from 'node:fs' | |
import stream from 'node:stream' | |
const server = createServer(async (req, res) => { | |
if(req.method === 'OPTIONS') { | |
return res.end() | |
} | |
if(req.url === '/index.html') { | |
res.writeHead(200, { | |
'Content-Type': 'text/html', | |
'Access-Control-Allow-Origin': '*' | |
}) | |
const arquivo = fs.createReadStream('./index.html') | |
await stream.promises.pipeline(arquivo, res) | |
return | |
} | |
const params = new URLSearchParams(req.url.slice(2)) | |
const latitude = +params.get('latitude') | |
const longitude = +params.get('longitude') | |
if(!latitude || !longitude) { | |
res.statusCode = 400 | |
return res.end('Falta as coordenadas') | |
} | |
const variacao = 0.01 | |
res.writeHead(200, { | |
'Content-Type': 'text/event-stream', | |
'Access-Control-Allow-Origin': '*' | |
}) | |
let novaLatitude = latitude | |
let novaLongitude = longitude | |
setInterval(() => { | |
const variacaoLat = Math.random() > 0.2 ? 1 : -1 | |
const variacaoLong = Math.random() > 0.8 ? 1 : -1 | |
novaLatitude += variacao * variacaoLat | |
novaLongitude += variacao * variacaoLong | |
res.write(`data: ${JSON.stringify({ latitude: +novaLatitude.toFixed(6), longitude: +novaLongitude.toFixed(6)})}\n\n`) | |
}, 1000) | |
setInterval(() => { | |
const variacaoLat = Math.random() > 0.2 ? 1 : -1 | |
const variacaoLong = Math.random() > 0.8 ? 1 : -1 | |
res.write(`event: incendio\ndata: ${JSON.stringify({ latitude: +(novaLatitude + variacao * variacaoLat).toFixed(6), longitude: +(novaLongitude + variacao * variacaoLong).toFixed(6)})}\n\n`) | |
}, 10000) | |
}) | |
server.listen(3000, () => { | |
console.log('Servidor iniciado') | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "demosse", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"type": "module", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"keywords": [], | |
"author": "", | |
"license": "ISC" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment