நாம் ஏதேனும் ஒரு் 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-க்குள் செலுத்துவதற்கும் பயன்பட்டுள்ளது.

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML Copyright © 2015 by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book