ganeshpatil0101/eventSourceExample.js

## eventSourceExample.js
const city = document.getElementById('city');
const label = document.getElementById('selected_city');
const form = document.getElementById('realTimeForm');
const secondsToUpdate = document.getElementById('seconds');
const close = document.getElementById('close');
const time = document.getElementById('time');

const URL = (location.host === 'localhost:1234') ? '//localhost:3000/event-stream' : 'https://righteous-quiet-sphynx.glitch.me/event-stream';
let selectedCityName = 'Asia/Calcutta';
let selectedCityValue = 'Asia/Calcutta';

function onSelectCity(event) {
    selectedCityValue = event.target.value;
    selectedCityName = event.target.options[event.target.selectedIndex].text;
}
let eventStream;
function showBtnClick(event) {
    label.innerHTML = 'Current Time for '+ selectedCityName;
    // Close connect if already present
    closeConnection();

    document.body.style.cursor = 'wait';
    eventStream = new EventSource(`${URL}?city=${selectedCityValue}&sec=${secondsToUpdate.value}`);
    eventStream.addEventListener('open', () => {
        document.body.style.cursor = 'default';
        console.log("Connected and subscribed to channel ");
    });
    eventStream.addEventListener('UPDATE', (event) => {
        const data = JSON.parse(event.data);
        console.log(' eventStream data', data);
        time.innerHTML = data.dateTime;
    });
    eventStream.addEventListener('error', (err) => {
        console.error("EventSource failed:", err);
    });
    event.preventDefault();
}

function closeConnection() {
    if(eventStream) {
        eventStream.close();
    }
}

city.addEventListener('change', onSelectCity, false);
form.addEventListener('submit', showBtnClick, false);
close.addEventListener('click', closeConnection, false);

## example.html
<!DOCTYPE html>
<html>

<head>
	<title>Javascript Event Source Examples</title>
	<meta charset="UTF-8" />
</head>

<body>
	<h1>Event Source Example</h1>
	<div id="app">
		<form id="realTimeForm">
			<fieldset>
				<legend> Real Time By City </legend>
				<div>
					<label for="city" > Select City </label>
					<select name="city" id="city" required >
						<option value="Asia/Calcutta" selected>Asia/Calcutta</option>
						<option value="America/Montreal">America/Montreal</option>
						<option value="Africa/Accra">Africa/Accra</option>
						<option value="America/Los_Angeles">America/Los_Angeles</option>
						<option value="America/New_York">America/New_York</option>
						<option value="Asia/Dubai">Asia/Dubai</option>
						<option value="Asia/Tokyo">Asia/Tokyo</option>
						<option value="Pacific/Fiji">Pacific/Fiji</option>
						<option value="Indian/Maldives">Indian/Maldives</option>
						<option value="Europe/London">Europe/London</option>
					</select>
					<br /><br/>
					<label for="seconds" > Update Time (In Seconds) </label>
					<input type="number" placeholder="Enter Seconds" id="seconds" value="5" required />
					<br/><br/>
					<button type="submit" id="showBtn" > Show </button>
					<button type="button" id="close" > STOP </button>
				</div>
				<br />
				<div>
					<fieldset>
						<legend id="selected_city"> Current Time </legend>
						<div> <span id="time" > DD/MM/YYYY HH:MM:SS </span> </div>
					</fieldset>
				</div>
			</fieldset>
		</form>
	</div>
	<script src="./eventSourceExample.js"></script>

</body>

</html>
	const city = document.getElementById('city');
	const label = document.getElementById('selected_city');
	const form = document.getElementById('realTimeForm');
	const secondsToUpdate = document.getElementById('seconds');
	const close = document.getElementById('close');
	const time = document.getElementById('time');

	const URL = (location.host === 'localhost:1234') ? '//localhost:3000/event-stream' : 'https://righteous-quiet-sphynx.glitch.me/event-stream';
	let selectedCityName = 'Asia/Calcutta';
	let selectedCityValue = 'Asia/Calcutta';

	function onSelectCity(event) {
	selectedCityValue = event.target.value;
	selectedCityName = event.target.options[event.target.selectedIndex].text;
	}
	let eventStream;
	function showBtnClick(event) {
	label.innerHTML = 'Current Time for '+ selectedCityName;
	// Close connect if already present
	closeConnection();

	document.body.style.cursor = 'wait';
	eventStream = new EventSource(`${URL}?city=${selectedCityValue}&sec=${secondsToUpdate.value}`);
	eventStream.addEventListener('open', () => {
	document.body.style.cursor = 'default';
	console.log("Connected and subscribed to channel ");
	});
	eventStream.addEventListener('UPDATE', (event) => {
	const data = JSON.parse(event.data);
	console.log(' eventStream data', data);
	time.innerHTML = data.dateTime;
	});
	eventStream.addEventListener('error', (err) => {
	console.error("EventSource failed:", err);
	});
	event.preventDefault();
	}

	function closeConnection() {
	if(eventStream) {
	eventStream.close();
	}
	}

	city.addEventListener('change', onSelectCity, false);
	form.addEventListener('submit', showBtnClick, false);
	close.addEventListener('click', closeConnection, false);
	<!DOCTYPE html>
	<html>

	<head>
	<title>Javascript Event Source Examples</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<h1>Event Source Example</h1>
	<div id="app">
	<form id="realTimeForm">
	<fieldset>
	<legend> Real Time By City </legend>
	<div>
	<label for="city" > Select City </label>
	<select name="city" id="city" required >
	<option value="Asia/Calcutta" selected>Asia/Calcutta</option>
	<option value="America/Montreal">America/Montreal</option>
	<option value="Africa/Accra">Africa/Accra</option>
	<option value="America/Los_Angeles">America/Los_Angeles</option>
	<option value="America/New_York">America/New_York</option>
	<option value="Asia/Dubai">Asia/Dubai</option>
	<option value="Asia/Tokyo">Asia/Tokyo</option>
	<option value="Pacific/Fiji">Pacific/Fiji</option>
	<option value="Indian/Maldives">Indian/Maldives</option>
	<option value="Europe/London">Europe/London</option>
	</select>
	<br /><br/>
	<label for="seconds" > Update Time (In Seconds) </label>
	<input type="number" placeholder="Enter Seconds" id="seconds" value="5" required />
	<br/><br/>
	<button type="submit" id="showBtn" > Show </button>
	<button type="button" id="close" > STOP </button>
	</div>
	<br />
	<div>
	<fieldset>
	<legend id="selected_city"> Current Time </legend>
	<div> <span id="time" > DD/MM/YYYY HH:MM:SS </span> </div>
	</fieldset>
	</div>
	</fieldset>
	</form>
	</div>
	<script src="./eventSourceExample.js"></script>

	</body>

	</html>