728x90
Socket.io란 무엇인가
Socket.io란?
Socket.io는 Node.js 애플리케이션에서 실시간 양방향 통신을 가능하게 하는 라이브러리입니다. 웹 소켓 프로토콜을 기반으로 하며, 브라우저와 서버 간의 실시간 데이터 교환을 쉽게 구현할 수 있게 해줍니다. 주로 채팅 애플리케이션, 실시간 피드 등에서 사용됩니다. socket.on()을 통해 이벤트 리스너를 등록하고, socket.emit()을 통해 이벤트를 발생시켜 클라이언트와 서버 간의 데이터를 쉽게 주고받을 수 있습니다.
socket.on() - 이벤트 리스너 등록
socket.on() 메서드는 클라이언트나 서버에서 특정 이벤트가 발생했을 때 실행될 콜백 함수를 등록하는 데 사용됩니다. 예를 들어, 클라이언트가 서버로 메시지를 보낼 때 message라는 이벤트를 사용할 수 있습니다.
// 서버 측 코드 (Node.js)
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('message', (data) => {
console.log('Message received:', data);
// 여기서 다른 처리를 수행할 수 있습니다.
});
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
위의 예제에서 connection 이벤트는 클라이언트가 연결될 때 실행됩니다. message 이벤트는 클라이언트가 메시지를 보낼 때 실행되며, disconnect 이벤트는 클라이언트가 연결을 끊을 때 실행됩니다.
socket.emit() - 이벤트 발생시키기
socket.emit() 메서드는 특정 이벤트를 발생시키는 데 사용됩니다. 서버나 클라이언트에서 이 메서드를 사용하여 데이터를 다른 쪽으로 보낼 수 있습니다.
// 클라이언트 측 코드 (브라우저)
const socket = io();
socket.emit('message', 'Hello, server!');
socket.on('response', (data) => {
console.log('Response from server:', data);
});
// 서버 측 코드 (Node.js)
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('message', (data) => {
console.log('Message received:', data);
socket.emit('response', 'Hello, client!');
});
});
위의 예제에서 클라이언트는 message 이벤트를 통해 서버로 메시지를 보냅니다. 서버는 메시지를 받으면 response 이벤트를 통해 클라이언트로 응답을 보냅니다.
이벤트 핸들링의 예
Socket.io를 사용한 간단한 채팅 애플리케이션 예제를 살펴보겠습니다.
// 서버 측 코드 (Node.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);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
console.log('Message received:', msg);
io.emit('chat message', msg); // 모든 클라이언트에게 메시지 전송
});
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
server.listen(3000, () => {
console.log('Server listening on port 3000');
});
<!-- 클라이언트 측 코드 (HTML) -->
<!doctype html>
<html>
<head>
<title>Socket.io Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const socket = io();
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
const input = document.getElementById('input');
socket.emit('chat message', input.value);
input.value = '';
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
728x90
'💻 Side project > Web' 카테고리의 다른 글
| [Electron] contextIsolation과 contextBride란 무엇인가 (0) | 2024.06.06 |
|---|---|
| [Web] 웹 개발 필수 지식, DOM이란 무엇일까? (0) | 2024.05.20 |
| [Web] 깃허브 리포지토리 삭제 (0) | 2023.06.16 |
| [Web] 구름 ide 깃허브에 업로드 하기 (0) | 2023.06.16 |
| [Web] 색상 조합 추천 사이트 (0) | 2023.06.02 |
댓글