1. Socket.IO 란?
Socket.IO는 실시간 양방향 통신을 위한 JavaScript 라이브러리로, 클라이언트와 서버 간의 실시간 데이터 전송을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다, 주로 웹 애플리케이션에 사용되며, 채팅 애플리케이션, 게임, 실시간 알림 시스템 등 다양한 곳에서 활용합니다.
2. Socket.IO 특징
- 특징
- 실시간 통신: 클라이언트와 서버간의 데이터 송수신을 지원
- 폴백 지원: 웹 소켓이 지원되지 않는 환경에서도 작동할 수 있는 HTTP 롱 폴링 등 다양한 폴백을 제공
- 이벤트 기반: 이벤트를 통해 클라이언트와 서버 간의 상호작용을 쉽게 처리
- 방 및 네임스페이스: 특정 클라이언트 그룹과의 통신을 관리할 수 있는 방 및 네임스페이스 기능을 제공
- 다양한 플랫폼 지원: Node.js 서버와 웹 클라이언트뿐만 아니라 모바일 플랫폼에서도 사용할 수 있음
- 간단한 API: 사용하기 쉬운 API를 제공하여 빠르게 기능을 구현
3. 설치 방법
Socket.IO는 Node.js 환경에서 동작하므로 Node.js 공식 웹사이트에서 Node.js를 설치합니다.
npm install socket.io
클라이언트 측에서도 Socket.IO를 사용할 수 있도록 다음과 같이 설치합니다.
npm install socket.io-client4. 서버 코드 작성
프로젝트 디렉토리에 server.js를 생성하고 아래와 같은 코드를 작성합니다.
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get("/", (req, res) => {
res.sendFile(__dirname + "../index.html"); // 클라이언트 HTML 파일 제공
});
io.on("connection", (socket) => {
console.log("사용자가 연결되었습니다.");
socket.on("chat message", (msg) => {
io.emit("chat message", msg); // 모든 클라이언트에 메시지 전송
});
socket.on("disconnect", () => {
console.log("사용자가 연결을 끊었습니다.");
});
});
server.listen(3000, () => {
console.log("서버가 http://localhost:3000 에서 실행 중입니다.");
});
index.html 파일을 생성하고 아래 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socket.IO Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const socket = io(); // io 객체 사용
// 서버로부터 저장된 메시지를 수신
socket.on("load messages", (messages) => {
messages.forEach((msg) => {
const item = document.createElement("li");
item.textContent = msg; // 메시지 목록에 추가
document.getElementById("messages").appendChild(item);
});
});
// 서버로부터 메시지를 수신
socket.on("chat message", (msg) => {
const item = document.createElement("li");
item.textContent = msg; // 메시지 목록에 추가
document.getElementById("messages").appendChild(item);
});
// 메시지 전송 함수
document.querySelector("form").onsubmit = function () {
const message = document.getElementById("message").value;
socket.emit("chat message", message); // 메시지 전송
document.getElementById("message").value = ""; // 입력 필드 초기화
return false; // 폼 제출 방지
};
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form autocomplete="off">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>5. 서버 실행
서버 코드를 server.js로 저장하고, 클라이언트 코드를 index.html로 같은 디렉토리에 저장 후 아래 터미널에서 다음 명령어로 서버를 실행합니다.
node server.jsGitHub - Koras02/socket.io-chat-nodejs
Contribute to Koras02/socket.io-chat-nodejs development by creating an account on GitHub.
github.com
LIST
'Back-End > Node.js' 카테고리의 다른 글
| [NodeJS] Go와 Nodejs 연결하기 (0) | 2025.03.07 |
|---|---|
| [NodeJS] Node.js를 활용한 애니메이션 API 만들기 (1) | 2025.03.03 |
| [NodeJS] 9장(완) 추가 학습하기 (0) | 2025.03.03 |
| [NodeJs] 8장 Docker(도커)를 사용한 배포 (0) | 2025.03.02 |
| [NodeJS] 7장 에러처리 (0) | 2025.02.27 |