Socket.io를 사용하여 실시간 검색 기능 구현하기
실시간 검색 기능은 사용자가 검색어를 입력할 때마다 실시간으로 검색 결과를 업데이트하는 기능입니다. 이를 통해 사용자는 더 빠르게 원하는 정보를 얻을 수 있습니다. 이 기능을 구현하기 위해 Socket.io라는 라이브러리를 사용할 수 있습니다. 이 라이브러리는 실시간 웹 애플리케이션을 쉽게 구현할 수 있도록 도와줍니다.
1. 서버 측 구현
Socket.io는 서버와 클라이언트 간의 양방향 통신을 지원합니다. 따라서 먼저 서버 측에서 실시간 검색을 처리하는 코드를 작성해야 합니다. 다음은 간단한 예시 코드입니다.
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
socket.on('search', (keyword) => {
// 검색 로직 구현
const results = searchDatabase(keyword);
socket.emit('searchResults', results);
});
});
server.listen(3000, () => {
console.log('서버가 시작되었습니다.');
});
function searchDatabase(keyword) {
// 실제로 데이터베이스에서 검색을 수행하고 결과를 반환하는 로직 구현
}
위 코드에서는 Express와 Socket.io를 사용하여 간단한 웹 서버를 만들고 있습니다. 클라이언트가 search 이벤트를 발생시키면, 서버에서는 해당 이벤트를 받아서 검색 로직을 실행하고, 결과를 다시 클라이언트에게 searchResults 이벤트를 발송합니다.
2. 클라이언트 측 구현
서버 측 구현이 완료되었다면, 이제 클라이언트 측에서도 실시간 검색 기능을 구현할 차례입니다. 클라이언트 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>실시간 검색</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1>실시간 검색</h1>
<input type="text" id="keywordInput">
<ul id="searchResults"></ul>
<script>
const socket = io();
document.getElementById('keywordInput').addEventListener('input', (event) => {
const keyword = event.target.value;
socket.emit('search', keyword);
});
socket.on('searchResults', (results) => {
const searchResultsElement = document.getElementById('searchResults');
searchResultsElement.innerHTML = '';
results.forEach((result) => {
const li = document.createElement('li');
li.textContent = result;
searchResultsElement.appendChild(li);
});
});
</script>
</body>
</html>
위 코드에서는 Socket.io 클라이언트 라이브러리를 이용하여 실시간 통신을 수행하고 있습니다. 사용자가 검색어를 입력할 때마다 input 이벤트가 발생하면, 해당 이벤트를 서버에게 전달하여 검색 결과를 받아옵니다. 검색 결과는 <ul id="searchResults"> 요소에 동적으로 출력됩니다.
3. 실행
위 코드를 서버와 클라이언트에 각각 저장한 후, 서버를 실행합니다. 그리고 웹 브라우저를 열어 http://localhost:3000 주소로 접속합니다. 검색어를 입력하면 실시간으로 검색 결과가 업데이트되는 것을 확인할 수 있습니다.
이처럼 Socket.io를 활용하면 쉽게 실시간 검색 기능을 구현할 수 있습니다.