NodeJS-socket.IO
socket.io & mysql(update) 예제
참고 : https://codeforgeek.com/real-time-app-socket-io/
NodeJS 서버가 백그라운드에서 실행되는 동안 특정 이벤트가 발생되면 Socket.io에 의해 데이터가 전송되는 내용이다.
클라이언트에서 ‘status_added’ 라는 커스텀으로 설정한 이벤트 발생시 클라이언트로부터 전송받은 데이터를 status 에 담아서 add_status_simple 메서드에 전달한다.
#
appUpdate.js
io.sockets.on('connection', function(socket) {
socket.on('status_added',function(status){
add_status_simple(status,function(res){
if(res){
console.log('### update test value : ', status);
io.emit('refresh feed',status);
} else {
io.emit('error');
}
});
});
});_
add_status_simple 메서드는 update 쿼리를 실행한다.
/* 위협 스코어 mysql update 시작*/
var add_status_simple = function (status,callback) {
var query = connection.query('UPDATE test_applications SET test_threat = "'+status[1]+'" WHERE test_seq = "'+status[0]+'";');
query
.on('error', function(err) {
console.log(err);
})
.on('result', function(result) {
console.log("query result",result);
})
.on('end', function() {
console.log('쿼리 전송 완료');
});
}
/* 위협 스코어 mysql update 끝*/
클라이언트
indexUpdate.html
<html>
<head>
<title>Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var socket = io();
$("#add_status").click(function(){
var e = document.getElementById("risk_score");
var strUser = e.options[e.selectedIndex].value;
console.log(strUser);
//socket.emit('status_added',$("#comment").val());
socket.emit('status_added',strUser);
});
});
</script>
</head>
<body>
<div id="comment_box" style = "padding:5%;">
<textarea id="comment" rows="5" cols="70"></textarea><br /><br />
<select id="risk_score">
<option value="70">70</option>
<option value="60">60</option>
<option value="50">50</option>
<option value="40">40</option>
</select>
<input type="button" id="add_status" value="Add Status">
</div>
<div
id = "show_comments"
class = "jumbotron"
style = "width: 38%;
height: 100%;
padding: 2%;
margin-left:5%;
margin-top:-53px;"
>
</div>
</body>
</html>
클라이언트 소스코드
client.html
<script>
$(document).ready(function(){
//var socket = io();
var socket = io.connect('http://127.0.0.1:8000');
var risk_arr =[];
$("#add_status").click(function(){
// risk_score를 찾아서select의 value를 가져온다
var e = document.getElementById("risk_score");
var threat_score = e.options[e.selectedIndex].value;
var test_seq = '<%=info.getAppSeq()%>';
// risk_arr 배열에
// test_seq는 where절에 해당되는 수정할 컬럼의 번호
// threat_score는 수정할 데이터인 점수를 담는다.
risk_arr[0] = test_seq;
risk_arr[1] = threat_score;
console.log(risk_arr);
//socket.emit('status_added',$("#comment").val());
socket.emit('status_added',risk_arr);
});
});
</script>
<div class="card-body">
<table>
<colgroup>
<col width="10%">
<col width="*">
</colgroup>
<tbody>
<tr>
<th class="th_style1">어플리케이션 Seq</th>
<td align="center"><%=info.getAppSeq()%></td>
</tr>
<tr>
<th class="th_style1">어플리케이션 도메인</th>
<td align="center"><%=info.getAppDomain()%></td>
</tr>
<tr>
<th class="th_style1">어플리케이션 이름</th>
<td align="center"><%=info.getAppName()%></td>
</tr>
<tr>
<th class="th_style2">등록일</th>
<td align="center"><%=TimeTool.RealTime(info.getAppTime())%></td>
</tr>
<tr>
<th class="th_style2">스코어 </th>
<td align="center">
<select id="risk_score">
<option value="70">70</option>
<option value="60">60</option>
<option value="50">50</option>
<option value="40">40</option>
<option value="30">30</option>
<option value="10">20</option>
<option value="10">10</option>
</select>
<input type="button" id="add_status" value="스코어 설정">
</td>
</tr>
</tbody>
</table>
</div>
댓글남기기