27강. Socket.IO를 이용한 실시간 채팅 만들기
이번 강의에서는 Socket.IO를 이용하여 실시간 채팅 서버를 만들어 봅니다.
목표: Express 서버와 Socket.IO를 연결하여 여러 사용자가 동시에 채팅할 수 있는 기능을 구현합니다.
1. Socket.IO란?
Socket.IO는 서버와 클라이언트가 실시간으로 데이터를 주고받을 수 있는 라이브러리입니다.
활용 예시
실시간 채팅
알림(Notification)
라이브 방송
온라인 게임
실시간 주식
실시간 골프 스코어
2. 동작 구조
사용자 A
↓
Socket.IO
↓
Node.js
↓
Socket.IO
↓
사용자 B
3. 설치
npm install socket.io
클라이언트
npm install socket.io-client
React에서 사용합니다.
4. 프로젝트 구조
chat-project
│
├── server.js
├── package.json
│
├── public
│ index.html
│
└── frontend
React
5. Express + Socket.IO
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
server.listen(3000);
6. 사용자 접속
io.on("connection",(socket)=>{
console.log("사용자 접속");
});
실행
사용자 접속
7. 접속 종료
socket.on("disconnect",()=>{
console.log("접속 종료");
});
8. 메시지 보내기
클라이언트
socket.emit(
"message",
"안녕하세요"
);
서버
socket.on(
"message",
(msg)=>{
console.log(msg);
});
출력
안녕하세요
9. 모든 사용자에게 전송
socket.on("message",(msg)=>{
io.emit(
"message",
msg
);
});
모든 사용자가 같은 메시지를 받습니다.
10. React 연결
import { io } from "socket.io-client";
const socket = io(
"http://localhost:3000"
);
11. React 메시지 받기
useEffect(()=>{
socket.on(
"message",
(msg)=>{
console.log(msg);
});
},[]);
12. React 메시지 보내기
socket.emit(
"message",
"Hello"
);
13. 접속자 수
let count=0;
io.on("connection",(socket)=>{
count++;
io.emit(
"count",
count
);
socket.on(
"disconnect",
()=>{
count--;
io.emit(
"count",
count
);
});
});
React
현재 접속자
15명
14. 채팅방(Room)
방 생성
socket.join(
"golf"
);
메시지
io.to(
"golf"
).emit(
"message",
"골프방"
);
15. 개인 메시지
socket.emit(
"private",
{
to:id,
message:"안녕하세요"
}
);
16. 알림
io.emit(
"notice",
"새 글 등록"
);
React
새 글 등록
17. 게시판 실시간
게시글 등록
↓
Socket
↓
전체 사용자
↓
새 글 표시
18. 실시간 골프 스코어
Player A
72
↓
Socket
↓
모든 사용자
↓
72
19. 실무 프로젝트 구조
project
│
├── socket
│ chat.js
│
├── routes
├── controllers
├── middleware
└── app.js
Socket 관련 코드를 별도 폴더로 분리하면 관리가 편합니다.
20. 이번 강의 핵심 정리
함수 설명
io.on() 사용자 연결
socket.on() 이벤트 수신
socket.emit() 현재 사용자에게 전송
io.emit() 모든 사용자에게 전송
socket.join() 채팅방 참가
io.to() 특정 채팅방에 전송
disconnect 연결 종료
실무 팁
Socket.IO는 단순한 채팅뿐 아니라 다양한 실시간 기능에 활용됩니다.
대표적인 활용 사례
실시간 채팅
실시간 알림
온라인 협업(문서 편집)
실시간 게임
라이브 방송 채팅
실시간 주문 상태
실시간 골프 경기 스코어
여러 대의 서버에서 Socket.IO를 운영할 경우에는 Redis Adapter를 사용해 서버 간 이벤트를 공유하는 구성이 많이 사용됩니다.
실습 미션
다음 기능을 구현해 보세요.
✅ 실시간 채팅
✅ 접속자 수 표시
✅ 채팅방(Room) 생성
✅ 개인 메시지
✅ 실시간 공지
✅ 게시판 새 글 알림
✅ React와 Socket.IO 연동
이번 강의에서는 Socket.IO를 이용하여 실시간 채팅 서버를 만들어 봅니다.
목표: Express 서버와 Socket.IO를 연결하여 여러 사용자가 동시에 채팅할 수 있는 기능을 구현합니다.
1. Socket.IO란?
Socket.IO는 서버와 클라이언트가 실시간으로 데이터를 주고받을 수 있는 라이브러리입니다.
활용 예시
실시간 채팅
알림(Notification)
라이브 방송
온라인 게임
실시간 주식
실시간 골프 스코어
2. 동작 구조
사용자 A
↓
Socket.IO
↓
Node.js
↓
Socket.IO
↓
사용자 B
3. 설치
npm install socket.io
클라이언트
npm install socket.io-client
React에서 사용합니다.
4. 프로젝트 구조
chat-project
│
├── server.js
├── package.json
│
├── public
│ index.html
│
└── frontend
React
5. Express + Socket.IO
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
server.listen(3000);
6. 사용자 접속
io.on("connection",(socket)=>{
console.log("사용자 접속");
});
실행
사용자 접속
7. 접속 종료
socket.on("disconnect",()=>{
console.log("접속 종료");
});
8. 메시지 보내기
클라이언트
socket.emit(
"message",
"안녕하세요"
);
서버
socket.on(
"message",
(msg)=>{
console.log(msg);
});
출력
안녕하세요
9. 모든 사용자에게 전송
socket.on("message",(msg)=>{
io.emit(
"message",
msg
);
});
모든 사용자가 같은 메시지를 받습니다.
10. React 연결
import { io } from "socket.io-client";
const socket = io(
"http://localhost:3000"
);
11. React 메시지 받기
useEffect(()=>{
socket.on(
"message",
(msg)=>{
console.log(msg);
});
},[]);
12. React 메시지 보내기
socket.emit(
"message",
"Hello"
);
13. 접속자 수
let count=0;
io.on("connection",(socket)=>{
count++;
io.emit(
"count",
count
);
socket.on(
"disconnect",
()=>{
count--;
io.emit(
"count",
count
);
});
});
React
현재 접속자
15명
14. 채팅방(Room)
방 생성
socket.join(
"golf"
);
메시지
io.to(
"golf"
).emit(
"message",
"골프방"
);
15. 개인 메시지
socket.emit(
"private",
{
to:id,
message:"안녕하세요"
}
);
16. 알림
io.emit(
"notice",
"새 글 등록"
);
React
새 글 등록
17. 게시판 실시간
게시글 등록
↓
Socket
↓
전체 사용자
↓
새 글 표시
18. 실시간 골프 스코어
Player A
72
↓
Socket
↓
모든 사용자
↓
72
19. 실무 프로젝트 구조
project
│
├── socket
│ chat.js
│
├── routes
├── controllers
├── middleware
└── app.js
Socket 관련 코드를 별도 폴더로 분리하면 관리가 편합니다.
20. 이번 강의 핵심 정리
함수 설명
io.on() 사용자 연결
socket.on() 이벤트 수신
socket.emit() 현재 사용자에게 전송
io.emit() 모든 사용자에게 전송
socket.join() 채팅방 참가
io.to() 특정 채팅방에 전송
disconnect 연결 종료
실무 팁
Socket.IO는 단순한 채팅뿐 아니라 다양한 실시간 기능에 활용됩니다.
대표적인 활용 사례
실시간 채팅
실시간 알림
온라인 협업(문서 편집)
실시간 게임
라이브 방송 채팅
실시간 주문 상태
실시간 골프 경기 스코어
여러 대의 서버에서 Socket.IO를 운영할 경우에는 Redis Adapter를 사용해 서버 간 이벤트를 공유하는 구성이 많이 사용됩니다.
실습 미션
다음 기능을 구현해 보세요.
✅ 실시간 채팅
✅ 접속자 수 표시
✅ 채팅방(Room) 생성
✅ 개인 메시지
✅ 실시간 공지
✅ 게시판 새 글 알림
✅ React와 Socket.IO 연동
#27강. Socket.IO를 이용한 실시간 채팅 만들기