質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,193

tixure55

score 354

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

<html>
<head>
<meta charset="UTF-8">
<title>ホソミチチャット</title>
</head>
<body>
<input type="text" id="msg_input" style="width:200px;" />
<button onclick="publishMessage();">語る</button>
<button onclick="outputSelect();">データベース検索</button>
<div id="msg"></div>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
// 1.イベントとコールバックの定義
var socketio = io.connect('http://localhost:8081');

socketio.on("connected", function(name) {});
socketio.on("publish", function (data) { addMessage(data.value); });
socketio.on("output_select", function (rows) { outputSelect(rows.value); });
socketio.on("disconnect", function () {});

// 2.イベントに絡ませる関数の定義
function start(name) {
  socketio.emit("connected", name);
}

function publishMessage() {
  var textInput = document.getElementById('msg_input');
  var msg = "[" + myName + "] " + textInput.value;
  socketio.emit("publish", {value: msg});
  textInput.value = '';
}

function addMessage (msg) {
  var domMeg = document.createElement('div');
  domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg;
  msgArea.appendChild(domMeg);
}
function outputSelect(msg) {
  
  for ( var key in msg ) {
      alert('aaaaa');
      var data = msg[key];
      document.write(data);
  }
  
  var sqlout = document.createElement('div');
  sqlout.innerHTML = ' ' + msg;
  msgArea.appendChild(sqlout);
  
}


// 3.開始処理
var msgArea = document.getElementById("msg");
var myName = Math.floor(Math.random()*100) + "さん";
addMessage("貴方は" + myName + "として入室しました");
start(myName);
</script>
</body>
</html>

サーバ側
// 1.モジュールオブジェクトの初期化
var fs = require("fs");
var server = require("http").createServer(function(req, res) {
    res.writeHead(200, {"Content-Type":"text/html"});
    var output = fs.readFileSync("./index.html", "utf-8");
    res.end(output);
    }).listen(8081);
var io = require("socket.io").listen(server);

//mysql接続
var mysql      = require('mysql');
var connection = mysql.createConnection({
host     : 'localhost',
user     : 'root',
password : '123456',
database : 'data'
});

//SQL文を書く
var sql = 'SELECT * FROM Customer WHERE Telephone = ?;';
//プレースホルダに差し込むデータ
var userId = '090-0000-0000';

//接続します
connection.connect();

//プレースホルダー使ってSQL発行
var query = connection.query(sql, [userId]);
query
//エラー用
.on('error', function(err) {
    console.log('err is: ', err );
    })  
//結果用
.on('result', function(rows) {
    console.log('The res is: ', rows );
    })

//終わったよう~
.on('end', function() {
    console.log('end');
    connection.destroy(); //終了
    });

// ユーザ管理ハッシュ
var userHash = {};

// 2.イベントの定義
io.sockets.on("connection", function (socket) {

    // 接続開始カスタムイベント(接続元ユーザを保存し、他ユーザへ通知)
    socket.on("connected", function (name) {
        var msg = name + "が入室しました";
        userHash[socket.id] = name;
        io.sockets.emit("publish", {value: msg});
        });

    // メッセージ送信カスタムイベント
    socket.on("publish", function (data) {
        io.sockets.emit("publish", {value:data.value});
        });

    // mysqlのselect結果出力
    socket.on("output_select", function (rows) {
        io.sockets.emit("output_select", {value:rows.value});
        });
// 接続終了組み込みイベント(接続元ユーザを削除し、他ユーザへ通知)
    socket.on("disconnect", function () {
        if (userHash[socket.id]) {
        var msg = userHash[socket.id] + "が退出しました";
        delete userHash[socket.id];
        io.sockets.emit("publish", {value: msg});
        }
        });
});
for ( var key in msg ) {
      alert('aaaaa');
      var data = msg[key];
      document.write(data);
  }
の部分が実行されておらず、出力ができていません。
html側でselectした結果を出力するにはどのように書けばいいでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

>の部分が実行されておらず、出力ができていません。 
データベース検索ボタンを押したときに該当の処理に入っていますが、
ボタンのonclickで引数を渡していないため、
(var key in msg)
のmsgがundefinedでエラーとなっているのではないでしょうか。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/03 05:53

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

    キャンセル

  • 2015/11/03 10: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(); //終了
    });

    });

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る