socket 실시간 채팅 만들기 2탄

지난편에 닉네임까지 입력해서 확인했습니다. 이제는 실시간 채팅을 구현해서 실제로 실시간 채팅이 되는지 확인하겠습니다.

실시간 채팅 실행

닉네임을 정해서 이제 채팅을 한번 입력해보겠습니다. 채팅은 편하게 엔터키로 설정했습니다. 메시지를 적고 엔터키를 누르겠습니다.

닉네임도 잘되고 채팅을 쳐도 채팅이 오류없이 잘 표현되고 있습니다. 근데 제일 중요한건 다른 사람과 실시간 채팅이 중요합니다. 그래야 서로의 정보를 공유 할 수 있으니 이제 다른 브라우저로 들어가서 채팅을 한번 해보겠습니다.

서로 접속도 잘되고 실시간 채팅도 되군요. 근데 채팅창이 없네요. 그리고 제일 중요한 누가 말하는지 알기가 힘드네요. 그래서 이번에는 css를 추가해서 카톡 채팅방 처럼 만들어 보겠습니다.

css 채팅방 꾸미기

#main {
  margin: auto;
  margin-top: 5px;
  border-radius: 10px;
  background-color: lightblue;
  text-align: center;
  width: 500px;
  height: 700px;
}

#chat {
  height: 90%;
  width: 100%;
  overflow-y: auto;
}

#messaging-form {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
  position: fixed;
  bottom: 0;
  left: auto;
  right: auto;
  display: flex;
  width: 500px;
  height: 3rem;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
}

#my-message {
  border: none;
  padding: 0 1rem;
  flex-grow: 1;
  border-radius: 2rem;
  margin: 0.25rem;
}

#mymessage:focus {
  outline: none;
}

#form > button {
  background: #333;
  border: none;
  padding: 0 1rem;
  margin: 0.25rem;
  border-radius: 3px;
  outline: none;
  color: #fff;
}

/* when new user connected */
.join {
  width: 90%;
  margin: auto;
  background-color: aquamarine;
  text-align: center;
  margin-top: 10px;
}

/* when someone disconnected */
.disconnect {
  width: 90%;
  margin: auto;
  background-color: indianred;
  text-align: center;
  margin-top: 10px;
}

/* message was sended by me */
.myMessage {
  width: 90%;
  margin: auto;
  background-color: lemonchiffon;
  border-radius: 5px;
  margin-top: 10px;
}

/* message was sended by other user */
.otherMessage {
  width: 90%;
  margin: auto;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
}

실시간 채팅

이제 css도 만들었으니 한번 다시 실행 해보겠습니다.

실행해 보니 카톡이랑 비슷한 채팅방을 만들었습니다. 기능도 오류없이 다 잘 되는 것 같습니다. 입장이랑 퇴장도 잘 입력이 되고 다양한 사람들이 정보를 공유하기 위한 기능을 구현되네요.

마무리(부족한 기능 생각)

그래도 아직 부족한 부분이 있는 것 같습니다. 사진이나 위치를 공유하는 방식이나 아니면 대화 방을 생성하여 대화하는 방식도 나쁘지 않다고 생각했습니다. 아주 간단한 대화만 가능하여 당근마켓이나 카카오톡에 있는 다른 많은 기능을 추가하지 못했지만 제가 필요한 다양한 사람들과의 익명으로 실시간 채팅을 구현하여 좋은 정보를 공유하는게 목표입니다. 이제 이 채팅을 제가 만든 프로젝트에 추가하여 더 괜찮은 프로젝트를 만들어 보겠습니다. 감사합니다.