WebSocketってなに？〜チャットアプリがリアルタイムで動くしくみ〜

2025-03-17

WebSocketってなんだ？

みなさんは「WebSocket（ウェブソケット）」という言葉を聞いたことがありますか？

たとえば、LINEやオンラインゲームのチャット機能を使うと、リアルタイムでメッセージがやり取りできますよね。
実は、その裏側では「WebSocket」という技術が使われていることが多いんです！

今回は、中高生のみなさんにもわかるように、WebSocketがどのような仕組みなのかを解説していきます。

1. WebSocketとは？

WebSocketは、サーバーとクライアント（スマホやPC）の間で、リアルタイムにデータをやり取りするための仕組みです。

普通のWebページ（例えばニュースサイト）は、「リクエスト」と「レスポンス」という仕組みで動いています。つまり、

スマホやPCが「このページを見せて！」とリクエストする
サーバーが「OK！このページだよ！」とレスポンスする

という流れで、情報がやり取りされます。

しかし、この方法だと、新しい情報が更新されるたびに、毎回リクエストを送らないといけないので、チャットやオンラインゲームのようにすぐに情報が反映される仕組みには向いていません。

そこで登場するのが「WebSocket」です！

WebSocketを使うと、

一度接続すると、ずっと通信を続けられる
サーバーからクライアントへ、すぐにデータを送れる
クライアントからサーバーへも、すぐにデータを送れる

というメリットがあります。

たとえば、LINEのようなチャットアプリでは、友達がメッセージを送るとすぐに自分のスマホに表示されますよね？これは、WebSocketのおかげなんです！

2. 普通の通信（HTTP）とWebSocketの違い

WebSocketをもっと理解するために、普通の通信（HTTP）と比べてみましょう。

項目	HTTP	WebSocket
通信方法	リクエストごとに通信	一度接続すると、ずっと通信を維持
使い道	普通のWebサイト（ニュース・SNSなど）	チャット・ゲーム・株価表示など
リアルタイム性	低い	高い

つまり、WebSocketは「すぐに情報を届ける必要があるサービス」にピッタリの技術なんです！

3. WebSocketを使うと何ができるの？

WebSocketを使うと、以下のようなものが作れます。

チャットアプリ（LINE、Discordのようなリアルタイム通信）
オンラインゲーム（相手の動きがリアルタイムで分かる）
株価のリアルタイム表示（すぐに最新の価格が見られる）
スポーツのライブスコア（試合結果がすぐに更新される）

普段使っているアプリの中にも、WebSocketを活用しているものがたくさんあります！

4. 実際にコードを書いてみよう！

実行手順

WebSocketを実際に動かすために、以下の手順でコードを実行してみましょう。

1. Node.jsをインストールする

WebSocketのサーバーを動かすには、Node.jsというプログラムが必要です。
以下の手順でインストールしましょう。

Node.js公式サイトにアクセスし、LTS（長期サポート版）をダウンロード
ダウンロードしたインストーラーを実行し、指示に従ってインストール
コマンドプロンプト（Windows）やターミナル（Mac）を開き、以下のコマンドを入力して確認 node -v バージョン番号（例: v22.0.0など）が表示されればOK！

2. WebSocketのサーバーを作る

まず、作業用のフォルダを作成し、その中でサーバーのプログラムを作成します。

1.任意の場所（例えばデスクトップ）に新しいフォルダを作成します。フォルダ名は websocket_test にしましょう。

Windowsの場合：エクスプローラーを開いて右クリック → [新規作成] → [フォルダー]
Macの場合：Finderで右クリック → [新規フォルダ]

2.コマンドプロンプト（Windows）またはターミナル（Mac）を開き、作成したフォルダへ移動します。 cd パス/to/websocket_test ※ パス/to/ は、実際に作成したフォルダのパスに置き換えてください。

3.以下のコマンドを実行し、Node.jsのプロジェクトを初期化し、WebSocket用のライブラリをインストールします。 npm init -y npm install ws

4.フォルダの中に server.js というファイルを作成し、以下のコードを書き込みます。

const WebSocket = require('ws'); 
const server = new WebSocket.Server({ port: 8080 }); 

server.on('connection', (ws) => { console.log('新しいクライアントが接続しました！'); 
ws.on('message', (message) => { console.log('受信:', message.toString()); // 文字列に変換 
ws.send('メッセージ受け取りました！'); }); });

4.server.js を保存し、以下のコマンドでサーバーを起動します。
node server.js 「新しいクライアントが接続しました！」と表示されれば、WebSocketサーバーの準備完了です！

3. クライアントを作る

次に、index.htmlというファイルを作り、以下のコードを保存します。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocketテスト</title>
</head>
<body>
    <script>
        const ws = new WebSocket('ws://localhost:8080');
        
        ws.onopen = () => {
            console.log('サーバーに接続しました！');
            ws.send('こんにちは！');
        };
        
        ws.onmessage = (event) => {
            console.log('サーバーからのメッセージ:', event.data);
        };
    </script>
</body>
</html>

ブラウザでindex.htmlを開き、開発者ツール（F12キー）でコンソールを確認すると、通信の様子が見えます！

接続の解除

WebSocketの接続を解除するには、以下のように ws.close() を実行します。

クライアント側

ws.onclose = () => {
    console.log('サーバーとの接続が閉じられました');
};

// スペースキーを押したら接続を閉じる
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        ws.close();
        console.log('スペースキーが押されたため、接続を閉じました');
    }
});

サーバー側

server.on('connection', (ws) => {
    console.log('新しいクライアントが接続しました！');
    
    ws.on('close', () => {
        console.log('クライアントが切断されました');
    });
});

これで、クライアントやサーバーが接続を解除したときに適切に処理できるようになります！

まとめ

WebSocketは、

リアルタイム通信が必要なサービスに使われる
チャット、オンラインゲーム、ライブデータなどに活用できる
普通の通信（HTTP）よりも速く、効率的に情報をやり取りできる

ぜひ、自分でWebSocketを使ったアプリを作ってみてくださいね！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

WebSocketってなに？ 〜チャットアプリがリアルタイムで動くしくみ〜