0

HTML5 と node.js を試しています。Server Sent Events をテストしたところ、問題なく動作しました (この例を参照)。

次にボタン押下にSSEで応答してみました。[インクリメント] ボタンを押すと、テキスト ボックスから数値を選択し、GET メッセージを使用してサーバーに渡します。サーバーは、増加した数値を含むイベントで応答します。eventListener は、受信した数値でテキスト ボックスを更新します。メッセージをログに記録するために、HTML ページに「メッセージ エリア」も追加しました。

それが計画でした。しかし、ボタンをクリックすると、ブラウザーはウィンドウの下部に「ダウンロード」操作が進行中であることを示しますが、完了せず、結果が画面に更新されず、ページの下部にメッセージが表示されません。

ページの読み込み時にイベントを送信すると、イベントは正常に機能します。しかし、GET メッセージに応答して送信すると、HTML ページに応答が表示されません。

ここに HTML セクションがあります。

<form action="/upload" method="get">
<p>Set the temperature and click on send</p>
<input name="temperature" id="TemperatureBox" type="text" value = "33" />
<button type="submit" onclick="form.action='http://localhost:8888/Increment'">Increment</button>

メッセージのハンドラーと、温度ボックスを更新する「温度イベント」のハンドラーを追加しました。

var source = new EventSource('/events');

source.addEventListener('message', function(e) {
  //code to display message
}, false);

source.addEventListener('TemperatureValueUpdate', function(e) {
        AddLog('TemperatureValueUpdate Listener >> lastEventID: ' + (e.lastEventId || '--') +
               ', e.data: ' + e.data
        + 'Current value of text box: ' +  document.getElementById('TemperatureBox').value);
        document.getElementById('TemperatureBox').value= e.data;

}, false);

node.js スクリプトで、メッセージと TemperatureValueUpdate を送信しています

function constructTemperature(response, id, data) {
console.log("Sending Temperature event");
//  response.write('id: ' + (new Date()).toLocaleTimeString()+ '\n');
 // response.write("data: " + 'Teperature event sent '+ '\n\n');

response.write('event: ' + 'TemperatureValueUpdate' + '\n');
response.write('id: ' + id + '\n');
response.write("data: " + data + '\n\n');

console.log("Finished Temperature event"); }

また、ページ読み込み時に「/events」URL に 200 応答を返しました。

response.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache', 'Connection': 'keep-alive' });

私も次のことを試しました

  • イベントを送信する前に 202/204 応答を送信する
  • イベントの送信前/送信後に response.end() を送信する
  • 各イベントの前に 'Content-Type': 'text/event-stream' を送信する

しかし、それらは望ましい結果を生み出しません。ここで何が間違っていますか？

4

1 に答える 1

0

フォームを送信するときに、constructTemperature() 関数を呼び出しているようです。その場合は、EventSource とは別の接続を使用しています。そのため、クライアントに返すデータをサーバーのどこかに保存し、EventSource からのリクエストで constructTemperature() を呼び出す必要があります。

于 2012-07-06T06:46:55.077 に答える