node.js, socket.io를 사용해서 그림판 업그레이드 하기

노마드 코더에 있는 강의[ZOOM 클론]를 보고 그림판을 업그레이드하면 재밋을것 같아 한번 도전해보려고합니다!

추가되는 기술로는 node.js, socket.io 입니다.

 

폴더 구조부터 정리해 줬습니다 

Front -> public 폴더를 만들어주고 그안에 넣었습니다.

back -> src 밑에 server.js를 만들어 줬습니다.

 

닉네임 설정 부분입니다.

<!-- canvas.htm -->
	<form id="userInfo">
        <label>
            <input type="text" placeholder="닉네임" id="nickname" required>
        </label>
        <button type="submit" >완료</button>
        <br>
            <input type="checkbox" id="saveNicknameCheck">
        <label for="saveNicknameCheck">
            다음에도 입력한 닉네임을 사용하시겠습니까?
            <b>닉네임 없이도 방에 입장할 수 있습니다.</b>
        </label>
    </form>
    <div id="welcome"></div>

화면은 이렇게 구성해 줬습니다. 닉네임 입력창이 있고, submit은 버튼을 만들어 줬습니다.

또한 닉네임을 저장하고 싶은 사람이 있을수도 있으니 checkbox를 만들어 줘서 저장을 원하는지 물어보도록 하였습니다.

 

//app.js
const canvasSection = document.querySelector('#canvasSection')
const connectionSection = document.querySelector('#connectionSection')

const userInfoForm = document.querySelector('#userInfo')
const chattingRoomForm = document.querySelector('#chattingRoomForm')
const messageForm = document.querySelector('#message')
const welcome = document.querySelector('#welcome');
const socket = io();

const NICK_NAME = 'nickName'
let roomName;

function nicknameChange(){
    welcome.innerHTML = '';
    userInfoForm.hidden = false;
    document.querySelector('#saveNicknameCheck').checked = false;
    localStorage.clear();
}

function welcomeUser(Nickname){
    const h2ForWelcome = document.createElement('b');
    h2ForWelcome.innerText = `닉네임 : ${Nickname}`;
    h2ForWelcome.style.fontSize = '1.5rem';
    const btn = document.createElement('button');
    btn.type='button';
    btn.innerText = '변경';
    btn.addEventListener('click', nicknameChange);
    welcome.appendChild(h2ForWelcome);
    welcome.appendChild(btn);
    socket.emit(NICK_NAME, Nickname);
    userInfoForm.hidden = true;
}

function submitNickName(event){
    event.preventDefault();
    const inputForNickname = userInfoForm.querySelector('input')
    const checkboxForSaveNickName = userInfoForm.querySelector('#saveNicknameCheck')
    const USER_NICK_NAME = inputForNickname.value
    if(checkboxForSaveNickName.checked){
        localStorage.setItem(NICK_NAME, USER_NICK_NAME)
    }
    welcomeUser(USER_NICK_NAME)
    inputForNickname.value = ''
}
if(localStorage.getItem(NICK_NAME)){
    welcomeUser(localStorage.getItem(NICK_NAME))
}
userInfoForm.addEventListener('submit', submitNickName)

public/js/app.js 파일을 만들어주고, 최대한 누구라도 알아보기 쉽게 코딩을 구현하려고 했지만 쉽지 않네요.

혹시 블로그를 보시는 분들중에 코드리뷰를 해주실분들 언제라도 환영입니다.

다시 본론으로 돌아와서 submit이 실행되었을때 체크되어있으면 localstorage에 'nickName'이라는 이름으로 저장됩니다.

welcomUser가 실행되고, form은 hidden이 true가 되면서 숨겨지고, 환영인사말이 짜잔~ 하고 나오게 됩니다.

socket.emit('nickName', 유저닉네임)으로 서버에게 유저의 닉네임을 알려줬습니다.

혹시 변경을 원하는 분이 있을수도 있으니, 변경 버튼도 같이 넣어 주고, 변경버튼을 누르면 모든것이 초기화되게 설정 해줬습니다.

 

정리하다보니 checkbox를 호출 하는 부분이 여러번 있어 아래와 같이 수정해 줬습니다.

const checkboxForSaveNickName =  userInfoForm.querySelector('input[type="checkbox"]');

 

//app.js
const canvasSection = document.querySelector('#canvasSection')
const connectionSection = document.querySelector('#connectionSection')

const userInfoForm = document.querySelector('#userInfo')
const chattingRoomForm = document.querySelector('#chattingRoomForm')
const messageForm = document.querySelector('#message')
const welcome = document.querySelector('#welcome');
const checkboxForSaveNickName =  userInfoForm.querySelector('input[type="checkbox"]');
const socket = io();

const NICK_NAME = 'nickName'
let roomName;

//server.js
const express = require('express');
const http = require('http');
const {Server} = require('socket.io');
const app = express();
const PORT = 3000;
const httpServer = http.createServer(app);
const wsServer = new Server(httpServer);

app.use(express.static(__dirname +'/public'));
app.get('/',(_,res) => {
    res.sendFile(__dirname + '/public/canvas.html')
})
app.get('/*',(_,res) => res.redirect('/'));

wsServer.on("connection", (socket) => {
    socket["nickname"] = "Anon";
    socket.onAny((event) => {
        console.log(`Socket Event: ${event}`);
    });
    socket.on("nickName", (nickname) => (socket["nickname"] = nickname));
});


httpServer.listen(PORT, () => console.log(`${PORT} 서버연결성공!`));

 서버에서 wsServer.on("connection")으로 socket 연결을 해주고, 프론트에서 nickName으로 보낸 것을 알고 있으니 socket.on('nickName')으로 받아서 처리해줍니다.

 

이제 그림그리는 방에 들어갈수 있도록 해줘야겠죠!? 방을 생성해주는것을 만들어 보도록 하겠습니다.

(박수와 환호)

<!-- canvas.js-->
<form id="chattingRoomForm">
    <input type="text" placeholder="채팅방" id="room" required autocomplete="off">

    <button type="submit" >찾기</button>
    <br>
    <label for="room">
        방이 존재하지 않으면 방을 생성합니다.
    </label>
</form>

닉네임창 아래쪽에 추가해줬습니다! 

function showRoom(){
    canvasSection.classList.remove('hidden')
    connectionSection.classList.add('hidden')
    const roomNameTitle = document.createElement('h3');
    roomNameTitle.innerText = `방이름 : ${roomName}`;
    document.querySelector('body').prepend(roomNameTitle)
}

function enterRoom(event){
    event.preventDefault();
    const inputForRoomName = chattingRoomForm.querySelector('input');
    const ROOM_NAME = inputForRoomName.value
    socket.emit("enter_room", ROOM_NAME, showRoom);
    roomName = ROOM_NAME;
    inputForRoomName.value = "";
}

chattingRoomForm.addEventListener('submit',enterRoom)

찾기 버튼을 클릭하면 server에 enter_room이라는 이름으로 방이름과 showRoom이라는 메소드가 갑니다.

서버는 통신이 제대로 했으면 showRoom을 실행시키게 됩니다.

 

socket.on("enter_room", (roomName, done) => {
    socket.join(roomName);
    done();
});