Page 584 - Nodejs 교과서 개정2판

{% block content %}
<div class="timeline">
<div id="bid">
{% for bid in auction %}
<div>
<span>{{bid.User.nick}}님: </span>
<strong>{{bid.bid}}원에 입찰하셨습니다.</strong>
{% if bid.msg %}
<span>({{bid.msg}})</span>
{% endif %}
</div>
{% endfor %}
</div>
<form id="bid-form">
<input type="number" name="bid" placeholder="입찰가" required min="{{good.price}}">
<input type="msg" name="msg" placeholder="메시지(선택사항)" maxlength="100">
<button class="btn" type="submit">입찰</button>
</form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/event-source-polyfill/src/eventsource.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
document.querySelector('#bid-form').addEventListener('submit', (e) => {
e.preventDefault();
const errorMessage = document.querySelector('.error-message');
axios.post('/good/{{good.id}}/bid', { // 입찰 진행
bid: e.target.bid.value,
msg: e.target.msg.value,
})
.catch((err) => {
console.error(err);
alert(err.response.data);
})
.finally(() => {
e.target.bid.value = '';
e.target.msg.value = '';
errorMessage.textContent = '';
});
});
const es = new EventSource("/sse");
const time = document.querySelector('#time');
es.onmessage = (e) => {
const end = new Date(time.dataset.start); // 경매 시작 시간