モダンJavaScript入門: リアルタイム通知システム作成

本記事では、モダンなJavaScriptを使用してリアルタイム通知システムを作成する方法について説明します。

1. リアルタイム通知システムとは？

リアルタイム通知システムは、ユーザーにリアルタイムで情報を提供するシステムです。例えば、メッセージングアプリでは新しいメッセージが送信されるとすぐに通知を受け取ることができます。

2. Socket.IOとは？

Socket.IOは、リアルタイムアプリケーションを簡単に作成するためのJavaScriptライブラリです。WebSocketをベースにしており、リアルタイムの双方向通信を可能にします。

3. リアルタイム通知システムの作成

Socket.IOを使用して、リアルタイム通知システムを作成します。

サーバーサイドのコード

以下は、サーバーサイドのコードです：

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('New client connected');
    socket.on('disconnect', () => console.log('Client disconnected'));

    socket.on('sendNotification', (data) => {
        io.emit('receiveNotification', data);
    });
});

const port = process.env.PORT || 4001;
server.listen(port, () => console.log(`Listening on port ${port}`));

クライアントサイドのコード

以下は、クライアントサイドのコードです：

const socket = io('http://localhost:4001');

socket.on('receiveNotification', (data) => {
    console.log('New notification:', data);
});

function sendNotification(data) {
    socket.emit('sendNotification', data);
}

4. コードの実行

まず、必要なパッケージをnpmを使ってインストールします：

npm install express http socket.io

次に、サーバーサイドのコードを実行します：

node server.js

そして、クライアントサイドのコードをブラウザで開きます。

以上で、リアルタイム通知システムの作成は完了です。新しい通知を送信するためには、クライアントサイドのsendNotification関数を呼び出します。新しい通知は、すべてのクライアントにリアルタイムで送信されます。

AIko Code Symphony