내일배움캠프 9주차 화요일 TIL

내가 프로젝트 중 맏은 실시간 채팅 기능은 일단 기본적인 프론트엔드 구성 후 반응을 확인하는 방식으로 진행하였다.

웹 소켓을 통해 클라이언트와 서버 간의 실시간 양방향 통신이 가능하므로 다른 깃허브를 참고하여 실시간 채팅서버를 구현하였다.
socket.emit 메서드를 통해 서버에 이벤트를 전송하고, socket.on 메서드를 통해 서버로부터의 메시지를 수신하는 방식으로 채팅기능이 구현된다.

출처https://github.com/leegeunhyeok/node-chat.git

웹에 연결되자마자 닉네임을 적고 채팅에 참여하는 형태였기 때문에 채팅 참여 버튼을 만들고 클릭 시 채팅에 참여할 수 있도록 script.js를 수정하였다.

const socket = io();

document.addEventListener("DOMContentLoaded", () => {
  /* 채팅에 들어가기 버튼 클릭 시 실행 */
  document.getElementById("enterChat").addEventListener("click", () => {
    // 이름을 입력받고
    // ****추후 로그인후 쿠키나 세션에 전달된 닉네임을 받아 채팅에 입장하도록 수정!!!!****
    let name = prompt("반갑습니다!", ""); // let으로 변경
    // 이름이 빈칸인 경우
    if (!name) {
      name = "익명";
    }
    // 서버에 새로운 유저가 왔다고 알림
    socket.emit("newUser", name);
  });

  /* 서버로부터 데이터 받은 경우 */
  socket.on("update", (data) => {
    // 화살표 함수로 변경
    const chat = document.getElementById("chat");

    const message = document.createElement("div");
    const node = document.createTextNode(`${data.name}: ${data.message}`);
    let className = "";

    // 타입에 따라 적용할 클래스를 다르게 지정
    switch (data.type) {
      case "message":
        className = "other";
        break;
      case "connect":
        className = "connect";
        break;
      case "disconnect":
        className = "disconnect";
        break;
    }

    message.classList.add(className);
    message.appendChild(node);
    chat.appendChild(message);
  });

  window.send = function send() {
    // 전역 함수로 설정
    // 입력되어있는 데이터 가져오기
    const message = document.getElementById("test").value;

    // 가져왔으니 데이터 빈칸으로 변경
    document.getElementById("test").value = "";

    // 내가 전송할 메시지 클라이언트에게 표시
    const chat = document.getElementById("chat");
    const msg = document.createElement("div");
    const node = document.createTextNode(message);
    msg.classList.add("me");
    msg.appendChild(node);
    chat.appendChild(msg);

    // 서버로 message 이벤트 전달 + 데이터와 함께
    socket.emit("message", { type: "message", message: message });
  };
});

이후 css, html  파일을 수정하여 임시 헤더와 예시 후기가 남겨져 있는(기능 구현은 아직 x) 마이프로필 프론트 엔드를 임시로 구성하였다.

팀원들의 api 개발에 맞춰 발전시켜나갈 예정.

아직 로그인 api 개발 전이므로 채팅에 들어가기 버튼 클릭 시 닉네임을 입력하는 prompt가 나타나 채팅에 참여할 수 있는 형식이다.
이후 임시 로그인, 회원가입 웹을 구성 후 로그인된 정보를 가지고 버튼클릭만으로 채팅에 참여할 수 있도록 구현해야 하며, 이에따른 script 파일 수정또한 필요하다. 

이후 고려할만한 사항
- 채팅 인원 제한(1대1, 1대n 고려)
- 추가 프론트엔트  구성 (로그인, 회원가입, 인증정보 사용)