[javascript] 자바스크립트 웹 소켓을 이용한 실시간 뉴스 피드 서비스
인터넷 사용자들은 뉴스를 실시간으로 받고 싶어합니다. 자바스크립트와 웹 소켓을 이용하여 실시간으로 뉴스를 제공하는 간단한 웹 애플리케이션을 만들어 보겠습니다.
목표
- 자바스크립트와 웹 소켓을 활용하여 실시간으로 뉴스를 전달하는 서비스 만들기
- 사용자가 해당 사이트를 방문하면, 실시간으로 업데이트되는 뉴스 피드를 제공하기
사용 기술
- HTML, CSS
- 자바스크립트
- 웹 소켓 (WebSocket)
구현
1. HTML 및 CSS 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time News Feed</title>
<style>
/* CSS 스타일링 코드를 작성합니다. */
</style>
</head>
<body>
<div id="news-feed">
<!-- 뉴스 피드가 실시간으로 업데이트되는 영역 -->
</div>
<script>
// 자바스크립트 코드를 작성합니다.
</script>
</body>
</html>
2. 자바스크립트 코드 작성
// 웹 소켓을 초기화합니다.
const socket = new WebSocket('ws://localhost:3000');
// 웹 소켓 연결이 열리면, 뉴스를 받아 화면에 표시합니다.
socket.onopen = function(event) {
console.log('WebSocket is open now.');
};
// 웹 소켓으로부터 뉴스를 수신하면, 화면에 업데이트합니다.
socket.onmessage = function(event) {
const newsFeed = document.getElementById('news-feed');
newsFeed.innerHTML += `<p>${event.data}</p>`;
};
3. 서버 구현
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', function connection(ws) {
// 일정 간격으로 뉴스를 전송합니다.
setInterval(function() {
// 뉴스를 생성하고, 클라이언트로 전송합니다.
ws.send('Breaking news: Something important happened!');
}, 3000);
});
결론
이제 웹 소켓과 자바스크립트를 사용하여 실시간 뉴스 피드 서비스를 구현하는 방법을 알았습니다. 사용자들은 해당 웹 애플리케이션을 통해 뉴스를 실시간으로 받아볼 수 있게 됩니다.