நாம் ஏதேனும் ஒரு் link-ஐ சொடுக்கும்போது, browser-ஆனது server-க்கு ஒரு் நிகழ்வினை அனுப்பி வைத்தது, நாம் சொடுக்கிய பக்கத்தைக் கேட்கும். இது client sent event-க்கு ஒரு் சிறந்த உதாரணம். அவ்வாறே ஒருசில நிகழ்ச்சிகள் server-யிடமிருந்து வந்து browser-ல் வெளிப்படும். உதாரணத்துக்கு ஏதேனும் ஒரு் வலைதளப் பக்கத்தில் நாம் வேலை பார்த்துக் கொண்டிருக்கும் போது திடீரென்று நம்மைக் கேட்காமலேயே ஒருசில செய்திகள் browser-ல் வெளிப்பட்டுக் கொண்டே இருக்கும் அல்லவா! அவையெல்லாம் Server Sent Events ஆகும்.
இது போன்று Server-யிடமிருந்து தானாக வந்து browser-ல் வெளிப்படும் நிகழ்வுகளை எவ்வாறு உருவாக்குவது என்று பின்வருமாறு பார்க்கலாம்.
File: SSE.html
<!DOCTYPE html>
<html>
<head>
<script>
var source = new EventSource(“demo_sse.php”);
source.onmessage = function(event) {
document.getElementById(“result”).innerHTML += event.data + “<br>”;
};
</script>
</head>
<body>
<h1>Getting server updates</h1>
<div id=”result”></div>
</body>
</html>
இங்கு body tag-க்குள் புதிதாக ஏதும் இல்லை. வெறும் SSE-ஐ வெளிப்படுத்துவதற்கு result எனும் பெயரில் ஒரு் divition உருவாக்கப்பட்டுள்ளது. எனவே script tag-க்குள் என்ன நிகழ்கிறது என்பதைப் பார்ப்போம்.
new EventSource() என்பது ஒவ்வொரு முறை demo_sse.php எனும் பக்கத்தில் server event நிகழும்போதும் அதனை எடுத்து source எனும் variable-ல் சேமிக்கும். பின்னர் அதன் மீது செயல்படும் onmessage எனும் நிகழ்வு, அதில் சேமிக்கப்படும் ஒவ்வொரு மதிப்பையும் ஒரு் function-க்குள் செலுத்தி SSE நிகழ்வினை வெளிப்படுத்தும்.
Function(event) : இதில் உள்ள getElementById என்பது result எனும் divition-ஐ பெற்றுக்கொள்வதற்கும், அதன்மீது செயல்பட்டுள்ள innerHTML எனும் நிகழ்வு SSE-ஐ divition-க்குள் செலுத்துவதற்கும் பயன்பட்டுள்ளது.
