개발자 혜진
꾸준하게 개발 블로그
개발자 혜진
06-17 01:14
전체 방문자
오늘
어제
  • 전체보기 (69)
    • 코딩테스트 (25)
    • HTML (1)
    • CSS (6)
    • React (3)
    • Vue (8)
    • Javascript (9)
    • Java (3)
    • IDE (1)
    • Toy Project (10)
    • 개발 서적 (2)
    • 개발 이야기 (0)
    • TMI (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 글쓰기

인기 글

태그

  • 드로잉윗유
  • 텍스트에이미지적용
  • 프로그래머스예산
  • springboot mustache 한글 깨짐
  • 예산js
  • js 진수변환
  • 박스가운데정렬
  • vue2
  • spring boot 한글 깨짐
  • 프로그래머스 3진법뒤집기
  • Java초기화
  • 프로그래머스
  • 프로그래머스0
  • 클래스 토글
  • javascript 진수
  • div가운데정렬
  • react
  • 이상한문자만들기 js
  • vue2캘린더 만들기
  • vuetify
  • styled-component focus out
  • 8진수2진수
  • classList메소드
  • 시저암호javascript
  • 텍스트에그라데이션
  • input Foucs Out
  • 시저암호js
  • TypeScript기본문법
  • 가로가운데정렬
  • 뷰티파이

최근 글

hELLO · Designed By 정상우.
개발자 혜진

꾸준하게 개발 블로그

Toy Project

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

2022. 12. 22. 17:44

노마드 코더에 있는 강의[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();
});

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'Toy Project' 카테고리의 다른 글

[드로잉윗유] 와이어 프레임 제작  (0) 2023.04.07
[드로잉윗유] 드로잉 윗유 제작기 기획부터!  (0) 2023.04.07
[HTML, CSS, JS] 크롭앱 만들기  (0) 2022.12.01
[HTML,CSS,JavaScript] 그림판만들기[3]  (0) 2022.11.24
[HTML, CSS, JavaScript]그림판 만들기[2]  (0) 2022.11.17
    'Toy Project' 카테고리의 다른 글
    • [드로잉윗유] 와이어 프레임 제작
    • [드로잉윗유] 드로잉 윗유 제작기 기획부터!
    • [HTML, CSS, JS] 크롭앱 만들기
    • [HTML,CSS,JavaScript] 그림판만들기[3]
    개발자 혜진
    개발자 혜진
    잊어버리지 않기위한 개발 블로그

    티스토리툴바