[WebRTC] 4. 채팅방 기능 구현하기

지금까지는 자신의 영상 및 음성을 처리하는 기능을 구현했습니다 이제 동일한 방에 참여한 사람들끼리 영상 채팅을 할 수 있는 기능을 하나씩 구현해보도록 하겠습니다.

 

home.pug에서 채팅방을 입력받을 수 있는 인터페이스를 구현해주겠습니다.

// home.pug

div#videoRoomSelect
  form
    h2 Video
    input("type"="text", palcehodler="Please select a room", required)
    button Join
div#videoStreaming
  h2 Video Chat
  video#myFace(autoplay, playsinline, width="400", height="400")
  select#cameras
  select#audios
  button#audioMute Mute
  button#cameraOff Camera Off

다음으로 사용자에게 방 이름을 입력받고 이를 서버에 전달하여 다시 받아오는 로직을 구현합니다. 앞서 텍스트 채팅에서 구현했던 것과 방식은 동일합니다. 사용자가 입력한 방 이름을 저장한 다음 socket.emit을 사용하여 서버로 전달하고 이를 다시 socket.on으로 받아오는 방식입니다.

// app.js

const videRoomSelect = document.getElementById("videoRoomSelect");
const videoRoomSelectForm = videRoomSelect.querySelector("form");
const videoStreaming = document.getElementById("videoStreaming");

videoStreaming.hidden = true;

function showVideoStreaming() {
  videRoomSelect.hidden = true;
  videoStreaming.hidden = false;
}

function handleVideoRoomSelect(event) {
  event.preventDefault();

  const input = videoRoomSelectForm.querySelector("input");
  videoRoomName = input.value;

  socket.emit("videoRoomSelect", videoRoomName, showVideoStreaming);
}

videoRoomSelectForm.addEventListener("submit", handleVideoRoomSelect);

socket.on("videoGreeting", () => {
  console.log("Some has joined!");
});

이제 서버 파일로 이동하여 다음과 같이 프론트와의 웹소켓 통신을 구현해줍니다.

// server.js

socket.on("videoRoomSelect", (videoRoomName, showVideoStreaming) => {
    socket.join(videoRoomName);
    showVideoStreaming();
    socket.to(videoRoomName).emit("videoGreeting");
  });

아래는 이미지는 현재까지 구현된 사항을 캡쳐한 것입니다!