node.jsでmysqlから取得したデータをブラウザ上に表示できない

node.jsでチャットを作る記事を参考に、node.jsでmysqlから取得したデータをブラウザ上に表示したいのですが、クライアント側で受け取れないです。以下ソースです。

html
1<html>
2<head>
3<meta charset="UTF-8">
4<title>ホソミチチャット</title>
5</head>
6<body>
7<input type="text" id="msg_input" style="width:200px;" />
8<button onclick="publishMessage();">語る</button>
9<button onclick="outputSelect();">データベース検索</button>
10<div id="msg"></div>
11<script src="/socket.io/socket.io.js"></script>
12<script type="text/javascript">
13// 1.イベントとコールバックの定義
14var socketio = io.connect('http://localhost:8081');
15
16socketio.on("connected", function(name) {});
17socketio.on("publish", function (data) { addMessage(data.value); });
18socketio.on("output_select", function (rows) { outputSelect(rows.value); });
19socketio.on("disconnect", function () {});
20
21// 2.イベントに絡ませる関数の定義
22function start(name) {
23  socketio.emit("connected", name);
24}
25
26function publishMessage() {
27  var textInput = document.getElementById('msg_input');
28  var msg = "[" + myName + "] " + textInput.value;
29  socketio.emit("publish", {value: msg});
30  textInput.value = '';
31}
32
33function addMessage (msg) {
34  var domMeg = document.createElement('div');
35  domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg;
36  msgArea.appendChild(domMeg);
37}
38function outputSelect(msg) {
39  
40  for ( var key in msg ) {
41      alert('aaaaa');
42      var data = msg[key];
43      document.write(data);
44  }
45  
46  var sqlout = document.createElement('div');
47  sqlout.innerHTML = ' ' + msg;
48  msgArea.appendChild(sqlout);
49  
50}
51
52
53// 3.開始処理
54var msgArea = document.getElementById("msg");
55var myName = Math.floor(Math.random()*100) + "さん";
56addMessage("貴方は" + myName + "として入室しました");
57start(myName);
58</script>
59</body>
60</html>
61

サーバ側

javascript
1// 1.モジュールオブジェクトの初期化
2var fs = require("fs");
3var server = require("http").createServer(function(req, res) {
4    res.writeHead(200, {"Content-Type":"text/html"});
5    var output = fs.readFileSync("./index.html", "utf-8");
6    res.end(output);
7    }).listen(8081);
8var io = require("socket.io").listen(server);
9
10//mysql接続
11var mysql      = require('mysql');
12var connection = mysql.createConnection({
13host     : 'localhost',
14user     : 'root',
15password : '123456',
16database : 'data'
17});
18
19//SQL文を書く
20var sql = 'SELECT * FROM Customer WHERE Telephone = ?;';
21//プレースホルダに差し込むデータ
22var userId = '090-0000-0000';
23
24//接続します
25connection.connect();
26
27//プレースホルダー使ってSQL発行
28var query = connection.query(sql, [userId]);
29query
30//エラー用
31.on('error', function(err) {
32    console.log('err is: ', err );
33    })  
34//結果用
35.on('result', function(rows) {
36    console.log('The res is: ', rows );
37    })
38
39//終わったよう～
40.on('end', function() {
41    console.log('end');
42    connection.destroy(); //終了
43    });
44
45// ユーザ管理ハッシュ
46var userHash = {};
47
48// 2.イベントの定義
49io.sockets.on("connection", function (socket) {
50
51    // 接続開始カスタムイベント(接続元ユーザを保存し、他ユーザへ通知)
52    socket.on("connected", function (name) {
53        var msg = name + "が入室しました";
54        userHash[socket.id] = name;
55        io.sockets.emit("publish", {value: msg});
56        });
57
58    // メッセージ送信カスタムイベント
59    socket.on("publish", function (data) {
60        io.sockets.emit("publish", {value:data.value});
61        });
62
63    // mysqlのselect結果出力
64    socket.on("output_select", function (rows) {
65        io.sockets.emit("output_select", {value:rows.value});
66        });
67// 接続終了組み込みイベント(接続元ユーザを削除し、他ユーザへ通知)
68    socket.on("disconnect", function () {
69        if (userHash[socket.id]) {
70        var msg = userHash[socket.id] + "が退出しました";
71        delete userHash[socket.id];
72        io.sockets.emit("publish", {value: msg});
73        }
74        });
75});
76

javascript
1for ( var key in msg ) {
2      alert('aaaaa');
3      var data = msg[key];
4      document.write(data);
5  }

の部分が実行されておらず、出力ができていません。
html側でselectした結果を出力するにはどのように書けばいいでしょうか？

行動規範の内容に同意します

回答1件

の部分が実行されておらず、出力ができていません。

データベース検索ボタンを押したときに該当の処理に入っていますが、
ボタンのonclickで引数を渡していないため、
(var key in msg)
のmsgがundefinedでエラーとなっているのではないでしょうか。

現状コールバック用(処理終了後に実行する用)の関数を、
ボタンのonclickで呼び出してしまっているので、
ボタンのonclickは、output_selectイベントを呼び出すものにしてみてください。
(publishMessageのような感じで)

投稿2015/11/02 00:31

moredeep

総合スコア1507

tixure55

2015/11/02 20:53

回答ありがとうございます、いろいろ試行錯誤したのですが、未だうまくいっていません。 app.jsの // mysqlのselect結果出力 socket.on("output_select", function (rows) { io.sockets.emit("output_select", {value:rows.value}); }); の部分でrowsが受け取れていないようなのですが、上部のselect文の結果としてconsole出力できているrowsをここに引数として渡すにはどうすればよいでしょうか？

moredeep

2015/11/03 01:54

こんな感じでどうでしょう？（以下変更点のみ書きます。） html部 <button onclick="outputSelect_send();">データベース検索</button> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ クライアントJS部 //サーバ送信用の関数 outputSelect_send(){ var sendData = {value:"test"};//サーバに送信したいデータを用意 socketio.emit("output_select", sendData ); } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ サーバJS部 // mysqlのselect結果出力 socket.on("output_select", function (rows) { connection.connect(); var collbackData = {}//クライアントに送信したいデータを用意 //プレースホルダー使ってSQL発行 var query = connection.query(sql, [userId]); query //エラー用 .on('error', function(err) { console.log('err is: ', err ); }) //結果用 .on('result', function(rows) { collbackData["value"] = rows; io.sockets.emit("output_select", collbackData ); console.log('The res is: ', rows ); }) //終わったよう～ .on('end', function() { console.log('end'); connection.destroy(); //終了 }); });

行動規範の内容に同意します