WebSocketとSocket.IOで実現！ブラウザ＆サーバーのリアルタイム通信

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

// 静的ファイル（HTML）を配信する設定
app.use(express.static('public'));

// クライアントが接続した時の処理
io.on('connection', (socket) => {
    console.log('ユーザーが接続しました');

    // クライアントから 'chat message' イベントを受信したら
    socket.on('chat message', (msg) => {
        // 接続している**全員**にそのメッセージを送信（ブロードキャスト）
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('ユーザーが切断しました');
    });
});

http.listen(3000, () => {
    console.log('サーバー起動: http://localhost:3000');
});

<!DOCTYPE html>
<html>
<head>
    <title>超簡単チャット</title>
</head>
<body>
    <ul id="messages"></ul>
    <input id="input" autocomplete="off" />
    <button id="send">送信</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io(); // サーバーに接続
        const messages = document.getElementById('messages');
        const input = document.getElementById('input');

        document.getElementById('send').onclick = () => {
            const msg = input.value;
            if (msg) {
                // サーバーにメッセージを送信
                socket.emit('chat message', msg);
                input.value = '';
            }
        };

        // サーバーからメッセージを受信したら、画面に表示
        socket.on('chat message', (msg) => {
            const li = document.createElement('li');
            li.textContent = msg;
            messages.appendChild(li);
        });
    </script>
</body>
</html>