0

我正在尝试使用 HTML5 服务器发送事件创建一个演示项目，我创建了一个通用处理程序，它将生成要发送到客户端的数据（随机数）。我还创建了一个 webform (.aspx) 页面作为客户端。我编写了 javascript，旨在让处理程序运行函数并将数据返回到前端以填充到 div 标记。我遇到的问题是，当我运行程序时，它会停止： var source = new EventSource('SSEHandler.ashx'); 抱怨无法识别 EventSource。我对 HTML 5 服务器发送的事件很陌生，所以我不确定要识别事件源需要什么，但这是客户端代码：

<%@ 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>
4

0 回答 0