I am trying to create a demo project with HTML5 server sent events, I have created a generic handler that will generate data (random numbers) to be sent to the client side. I have also created a webform (.aspx) page to be the client. I wrote javascript that was meant to get the handler run the function and return data to the front end to be populated to a div tag. The problem that I am running into is that when I am running the program its Stops on: var source = new EventSource('SSEHandler.ashx'); complaining that The EventSource is not recognized. I am pretty new to HTML 5 server sent events so I am not sure what is needed for the event source to be recognized but this is the Client code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Client.aspx.cs" :
Inherits="Client" %>
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org:
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:
<html xmlns="http://www.w3.org/1999/xhtml">
:
<head runat="server">
<title>Server Sent Events</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var data = [];
$(document).ready(function () {
$("#btnListen").click(function () {
var source = new EventSource('SSEHandler.ashx');
source.addEventListener("open", function (event) {
$('#headerDiv').append('Latest 5 values');
}, false);
source.addEventListener("error", function (event) {
if (event.eventPhase == EventSource.CLOSED) { :
$('#footerDiv').append('Connection Closed!'); }
}, false);
source.addEventListener("message", function (event) {
if (data.length >= 5) { data = data.slice(1); }
data.push(event.data);
var strData = '';
for (var i = 0; i < data.length; i++) {
strData += data[i] + '<br/>';
}
$('#targetDiv').hide();
$('#targetDiv').empty();
$('#targetDiv').html(strData);
$('#targetDiv').slideDown(1000);
}, false);
});
});
</script>
:
</head>
:
<body>
<form id="form1" runat="server">
<button id="btnListen">Start Listening</button>
<!-- <button id="Button1" value="Start Listening">Start Listening</button> -->
<br /><br />
<div id="headerDiv" class="tickerheading"></div>
<div id="targetDiv" class="ticker"></div>
<div id="footerDiv" class="tickerfooter"></div>
</form>
:
</body>
:
</html>
