Chatterbox Client 만들어보기

27932 단어 JavaScriptclientJavaScript

여러 사용자들과 같이 채팅을 할 수 있는 chat application의 클라이언트 부분을 만들어보자.

서버를 이용하여 간단한 클라이언트를 구현해보자

fetchAPI를 활용하여 서버에 메서지를 요청하고(GET), 메세지를 보내게(POST)하는 기능을 만들어보자. 서버는 이미 AWS에 구축/배포되어 있는 서버를 사용하였다.
Chatterbox Client Repository

HTML 구성 및 작동

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chatterbox</title>
    <link rel="stylesheet" href="styles/styles.css">
  </head>
  <body>
    <div id="main">
      <h1>chatterbox</h1>
      <div id="send">
        <form class="submit">
          <input type="text" class="inputUser" />
          <textarea class="inputChat"></textarea>
          <button class="postbtn" type="submit">Post</button>
          <button class="clearbtn" type="submit">Clear</button>
        </form>
      </div>
    </div>
    <div id="chats"></div>
    <!-- your scripts -->
    <script src="scripts/app.js"></script>
  </body>
</html>


매우 심플한 구성이다. 상단의 inputbox와 textarea에 각각 이름과 작성하고 싶은 내용을 적고 POST버튼을 클릭하면 다음과 같이 하단의 목록에 추가되면서 json타입으로 서버로 전송된다.


그리고 Clear버튼을 누르면 해당 알림창과 함께 모든 채팅 목록과 서버에 저장되어 있는 데이터들까지 한꺼번에 삭제한다.

JavaScript Code

사용하기 편하게 Singleton패턴으로 작성하였다.

const githubID = 'Jeong-HW'

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,//서버 주소값
  init: () => {						//서버의 데이터값들을 불러와서 화면에 뿌려준다
    // TODO
    app.fetch().then(data => {
      for (let message of data) {
        app.renderMessage(message);
      }
    })
  },
  fetch: () => {					//서버에서 받은 응답의 body속 JSON을 리턴한다
    // TODO
    return window.fetch(app.server)
      .then((response) => response.json());
  },
  send: (message) => {					//서버로 데이터를 전송해준다
    window.fetch(app.server, {
      method: 'POST',
      body: JSON.stringify(message),
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(response => response.json())
  },
  clearMessages: () => {				//화면 내 채팅목록에 있는 메시지들를 지워준다
    document.querySelector("#chats").innerHTML = "";
  },
  renderMessage: (message) => {				//서버에 저장되어 있는 데이터들을 DOM을 이용하여 화면 상에 나타내준다
    const chatsArea = document.querySelector("#chats");

    const chat = document.createElement('div');
    chat.classList.add('chat');

    chat.innerHTML = 
    `<div class="username">${message.username}</div>
    <div>${message.text}</div>
    <div>${message.date}</div>`;

    chatsArea.prepend(chat);  //prepend를 사용하면 상단에서부터 추가된다
  },
  reset: () => {					//서버로 메시지를 초기화 요청을 보낸다.
    return window.fetch(`http://3.36.72.17:3000/${githubID}/clear`,{
      method: 'POST'
    })
    .then(res => res.json())
    .then(data => app.clearMessages())	//html 화면 상 채팅 목록들도 모두 삭제
  }
};

app.init();

POST버튼과 Clear버튼에 이벤트 생성

const postbutton = document.querySelector('.postbtn')

//POST버튼
if(postbutton){
  postbutton.addEventListener('click',function(event){
    event.preventDefault();

    let message = {};
    let username = document.querySelector('.inputUser').value;
    let text = document.querySelector('.inputChat').value;
    
    message.username = username;
    message.text = text;
    message.roomname = 'main room'
    message.date = new Date().toLocaleString();

    app.send(message);				//이름과 text내용을 받아와서 서버로 전송한다
    app.renderMessage(message)			//이후, 해당 데이터만 추가적으로 채팅목록에 추가해준다
    document.querySelector('.inputUser').value = "";
    document.querySelector('.inputChat').value = "";
  })
}

const clearbutton = document.querySelector('.clearbtn')

//Clear버튼
if(clearbutton){
  clearbutton.addEventListener('click',function(event){
    event.preventDefault();
    if(confirm('정말 삭제하시겠습니까?')===true){	//confirm메소드를 이용하여 삭제 시 알림창이 뜨도록 해준다.
      app.reset();
    }
    else{
      return;
    }
  })
}

fetchAPI사용법은 어느 정도 익었으나, 확실하게 http 요청/응답 관련 공부를 좀 더 심도있게 해야겠다. 다음엔 서버 구현까지 해보면서 클라이언트-서버 간 통신을 확실하게 익혀야겠다.

로봇이 지정된 거리만큼 앞으로 이동하도록 하는 ROS 서비스
[Spring Boot] logback 간단 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage