전체 글
[WebRTC] 1. 영상 채팅 화면과 소리 출력하기
안녕하세요. 이번 포스팅에서는 webRTC를 사용하여 브라우저에서 영상 채팅 화면과 소리를 출력하는 방법에 대해 알아보도록 하겠습니다. 지난 웹소켓 포스팅에서 사용했던 코드의 일부를 재사용할 것인데요. 먼저, home.pug로 이동하여 영상을 출력할 수 있는 video 태그를 삽입해주도록 하겠습니다. // home.pug div h2 Video video#myFace(autoplay, playsinline, width="400", height="400") 다음으로 socket IO를 구현하고 있는 app.js로 이동합니다. (이전에 구현했던 텍스트 채팅 영역은 hidden 옵션을 통해 우선은 가려줬습니다) 다음으로 navigator.mediaDevices.getUserMedia()를 통해 영상 및 음성 ..
[WebSocket/Socket IO] 채팅 서비스 구현 10. 관리자 패널 추가하기
socket.io는 관리자 패널 또한 지원합니다. 이번 포스팅에서는 관리자 패널을 설치하고 사용하는 방법에 대해 알아보도록 하겠습니다. 관리자 패널 설치 및 설정 npm i @socket.io/admin-ui // server.js import { instrument } from "@socket.io/admin-ui"; import { Server } from "socket.io"; const ioServer = new Server(httpServer, { cors: { origin: "https://admin.socket.io", credentials: true, }, }); instrument(ioServer, { auth: false, }); 관리자 패널 사용하기 https://admin.socke..
[WebSocket/Socket IO] 채팅 서비스 구현 9. 공개 채팅방 찾고 알림 전송하기
이제 채팅방에서 사용되는 기본 기능을 구현하는 마지막 포스팅입니다. 이번에는 공개 방과 비공개 방을 구분하고, 공개 방에 관한 정보를 업데이트 해보도록 하겠습니다. 공개 방과 비공개 방의 개념 사실 공개 방과 비공개 방의 개념이 낯선 것일 수도 있는데요. 왜냐하면 이제까지는 이를 구분하지 않고 방을 만들고 여기에 참여했기 때문입니다. 앞서 채팅 서비스를 구현하며 소켓의 id로 사용자를 구분했던 것을 기억하시나요? 해당 id는 소켓에 접속하는 사용자에게 부여되는 고유한 아이디로 접속과 실은 동시에 자신만의 프라이빗한 비공개 방에 접속하게 되는 것과 같은 이치입니다. 반면, 우리가 공개 방이라고 정의하는 것에는 이러한 소켓 아이디가 존재하지 않습니다. 공개 방과 비공개 방 구분하기 그렇다면 공개 방과 비공개..
[WebSocket/Socket IO] 채팅 서비스 구현 8. 닉네임 설정하기
이전 포스팅인 웹소켓을 사용하여 닉네임 설정하기에서 닉네임을 설정했던 방법을 기억하시나요? 이 때의 핵심은 socket 객체 안에 새로운 키와 값을 추가해줄 수 있다는 것이었는데요. 비슷한 방식으로 Socket IO에서도 닉네임 설정 기능을 구현할 수 있습니다. 먼저, home.pug에서 닉네임을 설정하는 필드를 만들어주겠습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="styleshee..
[WebSocket/Socket IO] 채팅 서비스 구현 7. 메시지 전송 및 수신
채팅 서비스에서는 동일한 방에 참가한 사람들끼리 메시지를 주고 받을 수 있어야 합니다. 이를 어떻게 구현할 수 있을까요? 먼저, 사용자 입장에서 서비스 로직을 생각해보겠습니다. 채팅 서비스에 입장한 사용자는 가장 먼저 참여할 방을 선택(또는 입력)하고, 다음으로 해당 방에 참가한 다른 사람들과 메시지를 주고 받게 됩니다. 현재 채팅 방까지는 구현을 했죠. 이제 방에 입장한 다음 메시지를 전송하는 로직을 구현하면 됩니다. 기존의 참가 방을 보여주는 shorRoom() 함수 아래에 메시지 전송을 처리할 handleSendMessage 핸들러를 버튼에 달아줍니다. // app.js const showRoom = (userRoomName) => { room.hidden = true; chat.hidden = f..
[WebSocket/Socket IO] 채팅 서비스 구현 6. 채팅방 알림 전송하기
이번에는 사용자가 동일한 채팅방에 접속했을 때 알림을 보내보도록 하겠습니다. 이전 포스팅에서 채팅방을 만들고 여기에 참여(join)하는 것까지 구현했었는데요. to 메소드를 사용하여 접속한 방에 새로운 메시지를 전송(emit) 할 수 있습니다. 현재 home.pug 구조는 아래와 같습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg..
[WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기
Socket IO 설정을 마쳤으니 이제 사용자들이 채팅을 나눌 수 있는 채팅방을 구현해보도록 하겠습니다. 구현 목표는 동일한 방에 접속한 사용자들끼리 대화를 나눌 수 있게 하는 것입니다. 가장 먼저 home.pug에서 방 이름과 채팅 메시지를 보낼 수 있는 form 태그를 구성해줍니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.c..
[WebSocket/Socket IO] 채팅 서비스 구현 4. Socket IO 설치 및 연결하기
지금까지는 웹소켓을 사용하여 채팅 서비스를 개발했습니다. 그러나 생각보다 코드 구현이 까다롭다고 느끼셨을 수 있는데요. Socket IO를 사용하면 보다 간편하게 채팅 서비스를 구현할 수 있습니다. Socket IO 설치하기 Socket IO는 양방향 실시간 통신을 지원하는 프레임워크입니다. Socket IO 또한 웹소켓 프로토콜을 사용하지만, 웹소켓을 사용할 수 없을 때 다른 방식으로 이를 지원하는 기능을 포함하고 있습니다. Socket IO의 가장 큰 장점은 이제까지 웹소켓을 사용해 구현했던 코드를 훨씬 간결하게 구현할 수 있다는 것입니다. 이제 Socket IO를 설치하고 사용해보도록 하겠습니다. npm i socket.io Socket IO 서버 구현 기존의 웹소켓 코드를 아래와 같이 업데이트합니..
