0
"node server.js"というアプリケーションを実行して初めてWebサイトに接続すると、データベースから情報を取得し、それらを送信してウェブサイトしかし、フロントエンドのフォームを使って新しい情報を追加してリフレッシュすると、ノードのアプリケーションを終了して再起動しない限り、新しい情報は追加されません。データベースから新しく追加された行を取得できません
下記のコードを確認してください。
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>PIPROOM</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=1">
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="hidden">
<div class="ui text container">
<form class="ui form" id="messageForm">
<div class="fields">
<div class="three wide field">
<label>CURRENCY PAIR</label>
<div class="field">
<select class="ui fluid search dropdown" id="currency">
<option value="EUR/USD">EUR/USD</option>
<option value="GBP/USD">GBP/USD</option>
<option value="USD/JPY">USD/JPY</option>
<option value="USD/CHF">USD/CHF</option>
<option value="USD/CAD">USD/CAD</option>
<option value="NZD/USD">NZD/USD</option>
<option value="AUD/USD">AUD/USD</option>
<option value="GBP/AUD">GBP/AUD</option>
<option value="GBP/JPY">GBP/JPY</option>
<option value="GBP/NZD">GBP/NZD</option>
<option value="GBP/CAD">GBP/CAD</option>
<option value="EUR/JPY">EUR/JPY</option>
<option value="EUR/CAD">EUR/CAD</option>
<option value="EUR/AUD">EUR/AUD</option>
<option value="EUR/GBP">EUR/GBP</option>
</select>
</div>
</div>
<div class="three wide field">
<label>TRANSACTION</label>
<div class="field">
<select class="ui fluid search dropdown" id="transaction">
<option value="BUY">BUY</option>
<option value="SELL">SELL</option>
</select>
</div>
</div>
<div class="three wide field">
<label>ENTRY</label>
<div class="field">
<input class="form-control" id="figure" rows="3">
</div>
</div>
<div class="three wide field">
<label>LIMIT</label>
<div class="field">
<input class="form-control" id="limit" rows="3">
</div>
</div>
<div class="three wide field">
<label>STOP</label>
<div class="field">
<input class="form-control" id="stop" rows="3">
</div>
</div>
</div>
<br>
<input id="submit" type="submit" class="fluid ui primary submit button" value="POST" disabled/>
</form>
<br>
<div class="chat" id="chat"></div>
<div class="notes" id="notes"></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/form.js"></script>
<script src="js/chat.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").removeClass('hidden');
});
</script>
</body>
</html>
CHAT.JS
$(function() {
var socket = io.connect();
var $messageForm = $('#messageForm');
var $figure = $('#figure');
var $limit = $('#limit');
var $stop = $('#stop');
var $transaction = $('#transaction');
var $currency = $('#currency');
var $chat = $('#chat');
var $pipbox = $('#pipbox');
var $transac = $('#transac');
var mySound = new Audio('/sounds/bell.mp3');
mySound.load();
$messageForm.submit(function(e) {
e.preventDefault();
socket.emit('send transaction', $transaction.val());
socket.emit('send currency', $currency.val());
socket.emit('send figure', $figure.val());
$figure.val('');
socket.emit('send limit', $limit.val());
$limit.val('');
socket.emit('send stop', $stop.val());
$stop.val('');
});
socket.on('new transaction', function(data) {
$chat.prepend('<div id="pipbox" style="margin-bottom: 0.8em;" class="ui blue inverted link relaxed segment">' + "<h2 id='transac' class='ui center aligned header'>" + data.msg + " " + "</h2>" + '</div>');
});
socket.on('new currency', function(data) {
$(transac).append(data.msg);
$("h2").removeAttr('id');
});
socket.on('new figure', function(data) {
$(pipbox).append("<center><h4 id='figs'>" + "ENTRY: " + data.msg);
});
socket.on('new limit', function(data) {
$(figs).append(" LIMIT: " + data.msg);
});
socket.on('new stop', function(data) {
$(figs).append(" STOP: " + data.msg + "</h4></center");
$("h4").removeAttr('id');
$("div").removeAttr('id');
$('#submit').prop("disabled", true);
mySound.play();
});
// append chatlog//
// Initial set of notes, loop through and add to list
socket.on('initial trans', function(data) {
var html = ''
for (var i = 0; i < data.length; i++) {
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].tran + '</li>'
}
$('#notes').append(html)
})
// Initial set of notes, loop through and add to list
socket.on('initial curs', function(data) {
var html = ''
for (var i = 0; i < data.length; i++) {
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].cur + '</li>'
}
$('#notes').append(html)
})
// Initial set of notes, loop through and add to list
socket.on('initial figs', function(data) {
var html = ''
for (var i = 0; i < data.length; i++) {
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].fig + '</li>'
}
$('#notes').append(html)
})
// Initial set of notes, loop through and add to list
socket.on('initial lmts', function(data) {
var html = ''
for (var i = 0; i < data.length; i++) {
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].lmt + '</li>'
}
$('#notes').append(html)
})
// Initial set of notes, loop through and add to list
socket.on('initial stps', function(data) {
var html = ''
for (var i = 0; i < data.length; i++) {
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].stp + '</li>'
}
$('#notes').append(html)
})
});
SERVER.JS
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var mysql = require('mysql');
var trans = [];
var isInitTrans = false;
var curs = [];
var isInitCurs = false;
var figs = [];
var isInitFigs = false;
var stps = [];
var isInitStps = false;
var lmts = [];
var isInitLmts = false;
users = [];
connections = [];
var db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'bluestork3308',
database: 'piproom'
});
db.connect(function(err) {
if (err) console.log(err)
})
server.listen(process.env.PORT || 3000);
console.log('Server running...');
app.use('/semantic', express.static(__dirname + '/semantic'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/sounds', express.static(__dirname + '/sounds'));
app.use('/js', express.static(__dirname + '/js'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket) {
connections.push(socket);
console.log('Connected: %s sockets connected', connections.length);
socket.on('disconnect', function(data) {
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s sockets connected', connections.length);
});
socket.on('send transaction', function(data) {
console.log(data);
io.sockets.emit('new transaction', {
msg: data
});
db.query('INSERT INTO trans (tran) VALUES (?)', data)
});
socket.on('send currency', function(data) {
console.log(data);
io.sockets.emit('new currency', {
msg: data
});
db.query('INSERT INTO curs (cur) VALUES (?)', data)
});
socket.on('send figure', function(data) {
console.log(data);
io.sockets.emit('new figure', {
msg: data
});
db.query('INSERT INTO figs (fig) VALUES (?)', data)
});
socket.on('send limit', function(data) {
console.log(data);
io.sockets.emit('new limit', {
msg: data
});
db.query('INSERT INTO lmts (lmt) VALUES (?)', data)
});
socket.on('send stop', function(data) {
console.log(data);
io.sockets.emit('new stop', {
msg: data
});
db.query('INSERT INTO stps (stp) VALUES (?)', data)
});
if (!isInitTrans) {
db.query('SELECT * FROM trans')
.on('result', function(data) {
trans.push(data)
})
.on('end', function() {
socket.emit('initial trans', trans)
})
isInitTrans = true
} else {
// Initial notes already exist, send out
socket.emit('initial trans', trans)
}
if (!isInitCurs) {
db.query('SELECT * FROM curs')
.on('result', function(data) {
curs.push(data)
})
.on('end', function() {
socket.emit('initial curs', curs)
})
isInitCurs = true
} else {
// Initial notes already exist, send out
socket.emit('initial curs', curs)
}
if (!isInitFigs) {
db.query('SELECT * FROM figs')
.on('result', function(data) {
figs.push(data)
})
.on('end', function() {
socket.emit('initial figs', figs)
})
isInitFigs = true
} else {
// Initial notes already exist, send out
socket.emit('initial figs', figs)
}
if (!isInitLmts) {
db.query('SELECT * FROM lmts')
.on('result', function(data) {
lmts.push(data)
})
.on('end', function() {
socket.emit('initial lmts', lmts)
})
isInitLmts = true
} else {
// Initial notes already exist, send out
socket.emit('initial lmts', lmts)
}
if (!isInitStps) {
db.query('SELECT * FROM stps')
.on('result', function(data) {
stps.push(data)
})
.on('end', function() {
socket.emit('initial stps', stps)
})
isInitStps = true
} else {
// Initial notes already exist, send out
socket.emit('initial stps', stps)
}
});