채팅예제
서버 측 코드 (Node.js):
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // 모든 클라이언트에게 메시지 전송
});
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
http.listen(3000, () => {
console.log('Server is running on port 3000');
});
클라이언트 측 코드 (HTML 파일 - index.html):
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
<script>
const socket = io();
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.emit('chat message', message);
messageInput.value = '';
}
socket.on('chat message', (msg) => {
const messagesList = document.getElementById('messages');
const messageItem = document.createElement('li');
messageItem.textContent = msg;
messagesList.appendChild(messageItem);
});
</script>
</head>
<body>
<h1>Socket.IO Chat</h1>
<ul id="messages"></ul>
<input id="message" type="text">
<button onclick="sendMessage()">Send</button>
</body>
</html>
이 예제는 클라이언트가 커넥트 하면 소켓에 등록되고 메세지를 입력했을때,
소켓의 모든 클라이언트들에게 전달되는 방식의 기본 채팅 예제입니다.실시간 투표 예제
서버 측 코드:
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
let voteCount = 0;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('vote', () => {
voteCount++;
io.emit('voteCount', voteCount);
});
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
http.listen(3000, () => {
console.log('Server is running on port 3000');
});
클라이언트 측 코드 (HTML 파일 - index.html):
<!DOCTYPE html>
<html>
<head>
<title>Real-time Voting</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
<script>
const socket = io();
function vote() {
socket.emit('vote');
}
socket.on('voteCount', (count) => {
const voteCountElement = document.getElementById('voteCount');
voteCountElement.textContent = count;
});
</script>
</head>
<body>
<h1>Real-time Voting</h1>
<button onclick="vote()">Vote</button>
<p>Vote count: <span id="voteCount">0</span></p>
</body>
</html>
이 예제는 사용자가 'Vote' 버튼을 클릭하면 투표가 증가되고,
다른 모든 클라이언트에게 투표 수를 실시간으로 전달하여 업데이트합니다.
실시간 위치공유 예제
서버 측 코드:
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
let userLocations = {};
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('location', (location) => {
userLocations[socket.id] = location;
io.emit('userLocations', userLocations);
});
socket.on('disconnect', () => {
delete userLocations[socket.id];
io.emit('userLocations', userLocations);
console.log('A user disconnected');
});
});
http.listen(3000, () => {
console.log('Server is running on port 3000');
});클라이언트 측 코드 (HTML 파일 - index.html):
<!DOCTYPE html>
<html>
<head>
<title>Real-time Location Sharing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
<script>
const socket = io();
function sendLocation() {
const latitude = parseFloat(document.getElementById('latitude').value);
const longitude = parseFloat(document.getElementById('longitude').value);
const location = { latitude, longitude };
socket.emit('location', location);
}
socket.on('userLocations', (locations) => {
const locationsList = document.getElementById('locations');
locationsList.innerHTML = '';
for (const [userId, location] of Object.entries(locations)) {
const listItem = document.createElement('li');
listItem.textContent = `User ${userId}: Latitude ${location.latitude}, Longitude ${location.longitude}`;
locationsList.appendChild(listItem);
}
});
</script>
</head>
<body>
<h1>Real-time Location Sharing</h1>
<div>
<label for="latitude">Latitude:</label>
<input id="latitude" type="number" step="0.000001">
</div>
<div>
<label for="longitude">Longitude:</label>
<input id="longitude" type="number" step="0.000001">
</div>
<button onclick="sendLocation()">Share Location</button>
<h2>Shared Locations</h2>
<ul id="locations"></ul>
</body>
</html>이 예제는 사용자가 위도(latitude)와 경도(longitude)를 입력하고
'Share Location' 버튼을 클릭하면 해당 위치를 서버로 전송합니다.
서버는 모든 클라이언트에게 사용자들의 위치를 실시간으로 전달하여 업데이트합니다.
실시간 그래프플로팅 예제
서버 측 코드:
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
setInterval(() => {
const dataPoint = Math.random() * 100; // 랜덤 데이터 생성
io.emit('dataPoint', dataPoint);
}, 1000);
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
http.listen(3000, () => {
console.log('Server is running on port 3000');
});클라이언트 측 코드 (HTML 파일 - index.html):
<!DOCTYPE html>
<html>
<head>
<title>Real-time Graph Plotting</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
const socket = io();
const data = []; // 데이터 배열 초기화
const layout = {
title: 'Real-time Graph',
xaxis: {
title: 'Time'
},
yaxis: {
title: 'Data'
}
};
const plot = document.getElementById('plot');
socket.on('dataPoint', (dataPoint) => {
data.push(dataPoint); // 새로운 데이터 포인트 추가
if (data.length > 10) {
data.shift(); // 데이터 배열 길이 제한
}
Plotly.newPlot(plot, [{ y: data }], layout); // 그래프 업데이트
});
</script>
</head>
<body>
<h1>Real-time Graph Plotting</h1>
<div id="plot"></div>
</body>
</html>이 예제는 서버에서 1초마다 랜덤한 데이터를 생성하고,
그 데이터를 모든 클라이언트에게 실시간으로 전달하여 그래프로 표시합니다.
클라이언트는 Plotly 라이브러리를 사용하여 그래프를 생성하고 업데이트합니다.
이러한 예제들은 Socket.IO를 사용하여 다양한 실시간 기능을 구현하는 방법을 보여줍니다. 각 예제는 특정 상황에서 사용될 수 있으며, 실시간 업데이트, 실시간 공유, 실시간 모니터링 등 다양한 용도로 활용할 수 있습니다.
The pain is so persistent that it is like a snail, and the joy is so short that it is like a rabbit's tail running through the fields of autumn