오늘 한 일
- dmIndex.html 작성
- express의 response 못 가져오는 것 수정
<body>
<header><h1>FriendDM</h1></header>
<main>
<div id="dmMain">
<form>
<input placeholder="dmRoomId" , type="number" />
<button>DM Room 입장</button>
</form>
<h4>DM Rooms:</h4>
<ul></ul>
</div>
<div id="dmRoom">
<h3></h3>
<ul></ul>
<form id="message">
<input placeholder="메세지를 입력하세요." , type="text" />
<button>전송</button>
</form>
</div>
</main>
</body>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost:3000/direct-message', {
reconnection: true,
reconnectionDelay: 1000,
reconnectionDelayMax: 5000,
reconnectionAttempts: Infinity,
});
const nickname = prompt('닉네임');
const dmMain = document.getElementById('dmMain');
const form = dmMain.querySelector('form');
const dmRoom = document.getElementById('dmRoom');
dmRoom.hidden = true;
let dmRoomId = '';
function sendDM(message) {
const ul = dmRoom.querySelector('ul');
const li = document.createElement('li');
li.innerText = message;
ul.appendChild(li);
}
function handleDMSubmit(event) {
event.preventDefault();
const input = dmRoom.querySelector('#message input');
const value = input.value;
socket.emit('new_message', value, dmRoomId, () => {
sendDM(`${nickname}:${value}`);
});
input.value = '';
}
function createDMRoom() {
dmMain.hidden = true;
dmRoom.hidden = false;
const h3 = dmRoom.querySelector('h3');
h3.innerText = `DMRoom ${dmRoomId}`;
const messageForm = dmRoom.querySelector('#message');
messageForm.addEventListener('submit', handleDMSubmit);
}
function handleDMRoomSubmit(event) {
event.preventDefault();
const input = form.querySelector('input');
socket.emit('enter_DMroom', input.value, createDMRoom);
dmRoomId = input.value;
input.value = '';
}
form.addEventListener('submit', handleDMRoomSubmit);
socket.on('welcome', user => {
const h3 = dmRoom.querySelector('h3');
h3.innerText = `DMRoom ${dmRoomId}`;
sendDM(`${user}이 입장했습니다.`);
});
socket.on('bye', user => {
const h3 = dmRoom.querySelector('h3');
h3.innerText = `DMRoom ${dmRoomId}`;
sendDM(`${user}이 퇴장했습니다.`);
});
socket.on('new_message', sendDM);
socket.on('DMRoom_change', dmRooms => {
const dmRoomList = dmMain.querySelector('ul');
dmRoomList.innerHTML = '';
if (dmRooms.length === 0) {
dmRoomList.innerHTML = '';
return;
}
dmRooms.forEach(room => {
const li = document.createElement('li');
li.innerText = room;
dmRoomList.append(li);
});
});
</script>
</html>참고자료: https://nomadcoders.co/noom/lectures/3089s
오늘 마주한 에러
express 를 못 불러오는 에러였다. 해결방법은 node_modules와 dist, package-lock.json을 지우고 npm i로 다시 받아오는 것 + 겸사겸사 쓰지 않는 패키지들 삭제
아마 이전에 git pull 받으면서 충돌났던 package-lock.json을 건드린게 문제가 된 것같다.
배워나가는 중