그룹채팅 - Part0 웹소켓
ㆍProject Diary/Next.js + Prisma + MariaDB (KiloFlow)
웹소켓(WebSocket)이란?
- 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다.
- 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있어, 실시간 기능을 필요로 하는 애플리케이션에 매우 유용합니다.
- 예를 들어, 채팅, 실시간 알림 등이 웹소켓을 사용하여 데이를 주고받습니다.
※ 프로토콜 : 네트워크에서 데이터를 주고받기 위한 규칙과 절차의 집합
웹소켓의 특징
- 양방향 통신
- 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다. - 저지연성
- 데이터를 주고받을 때 생기는 지연 시간이 매우 짧습니다.(연결이 한 번 설정되면 그 연결을 유지하기 때문) - 효율성
- 웹소켓은 한 번 연결을 설정하면 계속해서 그 연결을 유지하기 때문에 효율적입니다.
- 이렇게 오버헤드(작업을 수행하기 위해 추가적으로 소모하는 자원이나 시간)가 줄어들면 시스템의 부담이 줄고, 더 많은 데이터를 더 빠르게 주고받을 수 있습니다.
웹소켓 기본 사용법
이번 프로젝트(kiloFlow WepApp)에서는 ' Socket.IO'를 사용하기 때문에,
Socket.IO를 사용하여 클라이언트와 서버 간의 실시간 통신을 구현하는 기본적인 방법을 소개하겠습니다.
※ socket.io
- 실시간 양방향 통신을 위한 라이브러리
- WebSocket 뿐만 아니라, HTTP 등의 다른 기술도 지원
1. 서버 측 설정
1-1 Socket.IO 설치
npm install socket.io
1-2 서버 측 코드
const http = require('http'); // HTTP 서버 모듈 가져오기
const { Server } = require('socket.io'); // Socket.IO 라이브러리에서 Server 클래스 가져오기
const server = http.createServer(); // HTTP 서버 생성
const io = new Server(server, { // Socket.IO 서버 생성
cors: {
origin: "*", // 모든 도메인에서의 요청 허용
}
});
io.on('connection', (socket) => { // 새로운 클라이언트 연결 시
console.log('New client connected');
socket.on('message', (message) => { // 클라이언트로부터 메시지를 받았을 때
console.log(`Received: ${message}`);
socket.send(`You said: ${message}`); // 클라이언트에게 메시지 전송
});
socket.on('disconnect', () => { // 클라이언트가 연결을 끊었을 때
console.log('Client disconnected');
});
});
server.listen(8080, () => { // 서버 포트 3000에서 대기
console.log('Server is listening on port 3000');
});Socket.IO 서버를 생성하고 클라이언트와의 연결을 처리합니다. 클라이언트가 메시지를 보내면 서버가 해당 메시지를 다시 클라이언트에게 보내는 방식으로 동작합니다.
2. 클라이언트 측 설정
2-1 Socket.IO 클라이언트 설치
npm install socket.io-client
2-2 클라이언트 측 코드
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
<script src="/socket.io/socket.io.js"></script> <!-- Socket.IO 클라이언트 라이브러리 -->
</head>
<body>
<script>
// 서버에 연결
const socket = io('ws://localhost:3000');
// 서버와의 연결이 열렸을 때
socket.on('connect', () => {
socket.send('Hello Server!');
});
// 서버로부터 메시지를 받았을 때
socket.on('message', (data) => {
console.log('Message from server:', data);
});
</script>
</body>
</html>웹 페이지가 로드되면 서버에 연결되고, "Hello Server!" 메시지를 보냅니다. 서버로부터 메시지를 받으면 콘솔에 출력됩니다.
요약
- 서버 측
- Socket.IO 서버를 생성
- 클라이언트가 연결되면 connection 이벤트를 처리
- 클라이언트로부터 메시지를 받으면 message 이벤트를 처리
- 클라이언트 연결이 끊어지면 disconnect 이벤트를 처리 - 클라이언트 측
- Socket.IO 서버에 연결
- 서버와의 연결이 열리면 connect 이벤트를 처리
- 서버로부터 메시지를 받으면 message 이벤트를 처리