0

HTML5 サーバーがイベントを送信するデモ プロジェクトを作成しようとしています。クライアント側に送信されるデータ (乱数) を生成する汎用ハンドラーを作成しました。クライアントとなる Web フォーム (.aspx) ページも作成しました。ハンドラーに関数を実行させ、データをフロントエンドに返して div タグに入力するための JavaScript を作成しました。私が直面している問題は、プログラムを実行しているときに停止することです: 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