Javascript (자바스크립트) setInterval, setTimeout 06.18

2020. 7. 1. 17:00

1. app.js

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app).listen(80);
console.log("Server is running...")

// 1. 서버 접속시 쿼리 실행해서 DB에서 데이터 읽어오기.
var mysql = require('mysql');
// npm install mysql

var connection = mysql.createConnection({
  host: 'localhost',
  port: 3308,
  user:'root',
  password: '1234',
  database: 'javascript'  // test라는 데이터베이스에 접속
});

app.get('/', function (req, res) {
  res.sendfile("view.html");
});
app.get('/home', function (req, res) {
  res.sendfile("view.html");
});
app.get('/main', function (req, res) {
  res.sendfile("view.html");
});
app.get('/inputValue', function (req, res) {
  res.sendfile("input.html");
});

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({limit: '50mb', extended: false}));
app.use(bodyParser.json({limit: '50mb'}));



app.get('/view', function (req, res) {
  // connection.query(`select * from inputvalue`,
  connection.query(`SELECT * FROM inputvalue ORDER BY idx DESC LIMIT 1`,
    function (err, rows, fields) {
      if (err) throw err;
      res.send(rows);
    }
  );
});

app.post('/input', function (req, res) {
  var myVal = req.body.myVal;
  connection.query(`insert into inputvalue (myvalue) values('${myVal}')`,
    function (err, rows, fields) {
      if (err) throw err;
      res.send();
    }
  );
});

2. view.html (http://localhost/)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="입력 페이지로" onclick="goToInput()"></button>
    <br><br>
    값 : <span id="result"></span>
  </body>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  var time = 1;  // second로 입력

  setInterval(function () {
    $.ajax({
      url : 'http://localhost/view',
      type : 'GET',
      data : {
      },
      success:function(res){   // 받아온 response는 [{Key:Value},{Key:Value},{Key:Value}]로 리스트 안에 딕셔너리 형태로 받아온다.
        // var table = res[res.length-1];
        var table = res[0];
        $('#result').html(`${table.myvalue} <br>`)
      }
    });
  }, time * 1000);

  function goToInput() {
    location.href = "/inputValue";
  }

  </script>
</html>

setInterval에 의해 주기적(1000ms->1초)으로 localhost/view(DB에 select 쿼리를 날리는 라우터)에 request를 보내고, 값을 받아와 뿌려준다.

3. input.html (http://localhost/inputValue)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="text" placeholder="서버에 입력하고 싶은것은?" id="value" style="width:200px"><br><br>
    <input type="button" value="입력!!" id="putBnt"></button>
    <input type="button" value="홈으로" onclick="goToHome()"></button>
    <br /><br />
    <span id="result"></span>
  </body>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>

  $('#putBnt').click(function() {
    var myVal = $('#value').val();
    $.ajax({
      url : 'http://localhost/input',
      type : 'POST',
      data : {
        myVal : myVal
      },
      success:function(res) {
        alert("Success!");
      }
    });
  });

  function goToHome() {
    location.href = "/";
  }

  </script>
</html>

메인 페이지 (setInterval에 의해 1초마다 DB에 접속해 뿌려준다)

4. time.html

라우터 안 만들었다... 만들어서 실행해도 되고 파일로 실행해도 되고...

배수증가 버튼 : 클릭 3초 후 아래로 입력한 숫자의 배수씩 증가하며 출력 -> setTimeout + setInterval
타이머 버튼 : 클릭 3초 후 버튼 옆에 1초씩 1씩 증가하는 숫자 출력 -> setTimeout + setInterval
타이머 종료 : 클릭 3초 후 타이머 종료 -> clearInterval

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- 배수증가 버튼 : 클릭 3초 후 아래로 입력한 숫자의 배수씩 증가하며 출력
         타이머 버튼 : 클릭 3초 후 버튼 옆에 1초씩 1씩 증가하는 숫자 출력
         타이머 종료 : 클릭 3초 후 타이머 종료 -->

    <input type="text" id="inputNumber">
    <input type="button" value="배수증가" id="tMultiple">
    <input type="button" value="타이머 시작" id="tStart">
    <input type="button" value="타이머 종료" id="tStop">
    타이머 : <span id="timer"></span>
    <br>
    출력 : <span id="result"></span>

  </body>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  console.log("start");
  var btnCount1 = 0;
  $("#tMultiple").click(function() {
    if (btnCount1 > 0) {
      alert("버튼은 1번만 눌러주세요.\n여러번 누르면 setInterval이 여러번 돌아가서 버튼 클릭을 막습니다.");
      return;
    }
    btnCount1++;
    setTimeout(function () {
      var count = 1;
      var multiplier = $("#inputNumber").val();
      setInterval(function () {
        $("#result").append("<br>" + count * multiplier);
        count += 1;
      }, 1000);
    }, 3000);
  });

  var myTimer;
  var btnCount2 = 0;
  $("#tStart").click(function() {
    if (btnCount2 > 0) {
      alert("버튼은 1번만 눌러주세요.\n여러번 누르면 setInterval이 여러번 돌아가서 버튼 클릭을 막습니다.");
      return;
    }
    btnCount2++;
    setTimeout(function () {
      var count = 0;
      myTimer = setInterval(function () {
        $("#timer").html(count);
        count += 1;
      }, 1000);
    }, 3000);
  });

  $("#tStop").click(function() {
    setTimeout(function () {
      clearInterval(myTimer);
    }, 3000);
  });

  </script>
</html>

DB

Database : MySQL / Database Name : javascript / Table Name : inputValue

CREATE TABLE javascript.inputvalue (
	idx INT auto_increment NOT NULL,
	myvalue varchar(100) NULL,
	CONSTRAINT inputvalue_PK PRIMARY KEY (idx)
)
ENGINE=InnoDB
DEFAULT CHARSET=utf8
COLLATE=utf8_general_ci;

'개발자 > Javascript' 카테고리의 다른 글

Javascript (자바스크립트) 기말고사 07.02 (0)	2020.07.02
Javascript (자바스크립트) 네이버 주식 DB 저장, 구글 차트 06.25 (0)	2020.07.01
Javascript (자바스크립트) Query Table Join (aircraft 06.11) (0)	2020.07.01
★ Javascript (자바스크립트) Request Type 분리 get, post, put, delete (newsList 06.04) (0)	2020.06.25
Javascript (자바스크립트) 콜백 함수 (newsList 05.28) (0)	2020.06.25

좋은 개발자가 되자