Skip to content

Instantly share code, notes, and snippets.

@Hiweus
Created August 4, 2023 13:26
Show Gist options
  • Save Hiweus/0eea3c4916f07806b8a7dcbf37312af8 to your computer and use it in GitHub Desktop.
Save Hiweus/0eea3c4916f07806b8a7dcbf37312af8 to your computer and use it in GitHub Desktop.
Demo SSE
<!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/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/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>
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')
})
{
"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