Socket.IOでリアルタイム通信をしてみよう

#Node.js

この記事を書いたチーム：frontier

はじめに
環境準備
サーバー側の実装
クライアント側の実装
サーバーの起動とチャットアプリの表示

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

Socket.ioはブラウザとサーバー間でリアルタイム通信を可能にするライブラリです。

本記事では、Socket.IOを活用して、手軽にチャットアプリを構築し、サーバーとクライアント(ブラウザ)間の通信を実現する方法を紹介します。

環境準備

まず、以下のコマンドで環境を準備します。

npm install express socket.io

1	npm install express socket.io

サーバー側の実装

次に、サーバー側の実装を行います。JavaScriptファイル(server.js)に以下のコードを記述します。

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);

app.use(express.static(__dirname + '/public'));

// クライアントからの接続を待ち受ける
io.on('connection', (socket) => {
    console.log('クライアントが接続しました');

    // クライアントからのメッセージを受け取る
    socket.on('message', (data) => {
        console.log('クライアントからのメッセージ:', data);

        // クライアントにメッセージを返信する
        io.emit('response', data);
    });

    // クライアントが切断したときの処理
    socket.on('disconnect', () => {
        console.log('クライアントが切断しました');
    });
});

// サーバー起動
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`サーバーがポート ${PORT} で起動しました`);
});

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);

app.use(express.static(__dirname + '/public'));

// クライアントからの接続を待ち受ける

io.on('connection', (socket) => {

console.log('クライアントが接続しました');

// クライアントからのメッセージを受け取る

socket.on('message', (data) => {

console.log('クライアントからのメッセージ:', data);

// クライアントにメッセージを返信する

io.emit('response', data);

});

// クライアントが切断したときの処理

socket.on('disconnect', () => {

console.log('クライアントが切断しました');

});

// サーバー起動

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {

console.log(`サーバーがポート ${PORT} で起動しました`);

});

クライアント側の実装

続いて、クライアント側の実装を行います。HTMLファイル(public/index.html)に以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IOでリアルタイム通信をしてみよう</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        // サーバーからの応答を受信する
        socket.on('response', (data) => {
            document.getElementById('messageInput').value = ''; // 入力フィールドを空にする
            console.log('サーバーからの応答:', data);
            displayMessage('送信メッセージ :' +data); // メッセージを表示する関数を呼び出す
        });

        // メッセージを表示する関数
        function displayMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            document.getElementById('messageArea').appendChild(messageElement);
        }

        // メッセージをサーバーに送信する
        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            socket.emit('message', message);
        }
    </script>
</head>
<body>
    <h1>Socket.IOでリアルタイム通信をしてみよう</h1>
    <div id="messageArea"></div> <!-- メッセージを表示する領域 -->
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">メッセージを送信する</button>
</body>
</html>