Javascript (カレンダー017_Nodeへ移す7(サーバ側からの返信))

■Postで送ったデータをサーバ側から返す

前回xmlHttpRequestを使用してクライアント側からサーバ側へのデータの送信／サーバ側での受け取りは確認できた。今回、サーバ側からのデータの送信とクライアント側でのデータ受け取りを確認してみた。
クライアントサイドでの受け取りは、xmlHttpRequest(下のコードでのxhr)のresponseTextを使用するそうなので、受け取ったものがコンソールで分かるようにした。

'xhr.open(\'POST\', \'\', true);'+
'xhr.setRequestHeader("Content-Type", "text/html");'+
'xhr.send(dateStr);'+
'console.log("aaacc"+xhr.responseText);'+

'xhr.onreadystatechange = function(){'+
    'var READYSTATE_COMPLETED = 4;'+
    'if( xhr.readyState == READYSTATE_COMPLETED ){'+
       'var HTTP_STATUS_OK = 200;'+
       'if( xhr.status == HTTP_STATUS_OK ){'+
           'console.log("aaacc555555"+xhr.responseText);'+
           'console.log("aaacc5444455555"+xhr.statusText);'+
       '}'+
    '}'+
'}'+

カレンダーの日付をクリックすると、サーバ側のコードでpostDataChunkの中に（下のfunction(postDataChunk)）、上のxhr.send(dateStr)のdateStrが入る形となる。dateStrは日付なので、そこからクライアント側へ戻すための処理を追加したい。

    request.addListener("data", function(postDataChunk) {
     postData += postDataChunk;
     console.log("Received POST data chunk '"+ postDataChunk + "'.");
     
     var post = qs.parse(postDataChunk);
     
     if(post['diary_title']===undefined){
     response.end("aaa"+postDataChunk);

returnでは動かず、上のようにresponse.endとしたら、とりあえず動いた。下の図はコンソール画面（aaacc555555の後に、"aaa"+postDataChunk部分が反映されている）。ただ、エラーが出て止まってしまったけど。エラーは、endの後にwriteを書いてはいけないと言ってるのかな。

endをwriteに変更して試しみたら、別のエラーが出て、クライアント側へ返信されたかも確認できない。

nodeで起動している処理の中で、"data"と"end"のaddListenerを入れているところがある。
・request.addListener("data", function(postDataChunk)
・request.addListener("end", function()
ここで、"data"はpostで送信したデータを受けているところだけど、どうやらpostした際に"end"も起動しているらしい。そのため、"end"の中のwriteが再度呼び出され、エラーになっている。
ここの"data", "end"は何者なのか調べてみると、"data"はpostされるたびに呼び出されるもの、"end"はpostがすべて完了した際に呼び出されるものらしい。"data"の部分だけ呼び出すようにできないものか試してみたけど無理そう。

方針転換して、responseTextで受けることはやめ、postDataの中にクライアント側へ送りたいデータを入れて返すようにする。（つまり、"data"内で、postDataを処理し、"end"内のroute(handle, pathname, response, postData);でデータを引き渡す。多分、このほうがまっとうなやり方だと思う）

  function onRequest(request, response) {
    var postData = "";
    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");

    request.setEncoding("utf8");

    request.addListener("data", function(postDataChunk) {
     console.log("Received POST data chunk '"+ postDataChunk + "'.");
     var post = qs.parse(postDataChunk);
 
     if(post['diary_title']===undefined){
     postData += postDataChunk;
     
     }else {
     var date=new Date();
     var year=date.getFullYear();
     var month=date.getMonth()+1;
     var today=date.getDate();
     var todayStr = year + "." + month +"."+today;
      
     console.log("Today_date:"+todayStr+post['diary_title']);
     console.log("Today_date:"+todayStr+post['diary_body']);
     setdataMysql(postDataChunk);
     }
    
    });

    request.addListener("end", function() {
      console.log("PostData:"+postData);
      route(handle, pathname, response, postData);
    });
  }

とりあえず、サーバ側へ送信した日付データをそのままpostDataに入れて戻してみた。テキストフィールドとテキストエリアにクリックした日付（"2020.11.17"）が入っており、ちゃんとクライアントサイド側で使用するhtmlには反映されている。これを表示しているはずだが、画面上に反映されていない。

既にブラウザ上に表示されているので、再度writeを読み込むことはしないのかな？
何かしらレンダリングやリロードするといった処理が必要そう。