バナー画像

LINEを始めとするメッセージアプリは、今や、私達の生活に欠かせないツールとなりました。

これらのメッセージアプリは、大規模なアクセスに対するリアルタイム通信、プッシュ通知、画像や動画の圧縮など、さまざま技術を複雑に組み合わせることで実現されています。

初心者が本格的なメッセージアプリをいきなり作ることは難しいため、この記事では、WebSocket を使ってリアルタイム通信を行なう、簡易的なチャットアプリを作る方法を解説します。

WebSocket

そもそも WebSocket とは、HTTP では実現が難しかったリアルタイムで同期的な通信をするために作られたプロトコルです。

リアルタイム通信におけるHTTPの問題点

HTTP は当初、HTMLで書かれた文書やファイルを転送するためのプロトコルとして生まれ、SNS やチャットのような、リアルタイム通信を必要とするアプリでの使用は想定されませんでした。

このような背景から、HTTP は 1つのコネクションにつき、1つのリクエストしか送ることができません。通信が必要になるたびにコネクションを作成する必要があり、通信はクライアント起点からしか発信できず、サーバー側からプッシュはできません。

また、HTTPプロトコルで取り決められたヘッダーや、ユーザーを識別するための Cookieなど 、本来やり取りしたいメッセージ以外にも多くのデータを一緒に送る必要があり、少量のデータを大量にやりとりするリアルタイム通信においては、一回のデータサイズが増えるのはデメリットでしかありません。

ポテパンダの一言メモ

WebSocket 登場以前には、Cometというサーバーサイドでポーリングを行う手法を用いて、HTTPでリアルタイム通信を実現しているサービスもありましたが、HTTPのデメリット自体を解決できるわけではなく、ポーリングをすることにより、サーバー側に負荷がかかることから、根本的な解決には至りませんでした。

WebSocket の登場

そこで、リアルタイム通信における HTTP の問題を解決すべく、WebSocket が登場しました。

WebSocket は最初は HTML5 の仕様の一部として策定されましたが、現在では単独のプロトコルとして仕様が定められています。

サーバーからの通信も可能に

一度、クライアントから接続を行えば、以降はサーバーからの通信も行え、いわゆるプッシュ通知のようなことも、WebSocket であれば容易に実現ができるようになりました。

ヘッダーのデータ量が少ない

WebSocket はヘッダーのデータサイズが小さく、最も少なくて2バイト、最大で14バイトになっており、HTTP であれば、おおよそ 512バイト程度だったことを考えると、非常にコンバクトであることが分かります。

簡単なチャットアプリを作ろう

WebSocket の概要が分かったところで、WebSocket を使った簡単なチャットアプリを作ってみましょう。

サーバ側のソース

Java EE 7で新たに追加された、 Java API for WebSocket を使用すると、シンプルなコードでサーバ側のソースが実装できます。

今回は、クライアントか送信されたメッセージに「re: 」をつけて返すだけの簡単な処理を実装します。

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.OnError;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
/**
 * WebSocketのサーバー側ソース
 */
@ServerEndpoint("/sample")
public class ServerEndPoint {

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("接続しました");
    }

    /**
     * クライアントからメッセージを受信した時の処理
     */
    @OnMessage
    public String onMessage(String message) {
        System.out.println("受信したメッセージ " + message);
        return "re: \"" + message + "\".";
    }

    @OnError
    public void onError(Throwable t) {
        t.printStackTrace();
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("onClose");
    }
}

クライアント側のソース

クライアント側のソースは HTML + JavaScirpt で構成します。

以下のサンプルコードでは、次のようなことをしています。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>WebSocketチャットクライアント</title>
</head>

<body>
  <div id="state" style="border: 1px solid #000; width: 10rem;"></div>
  <div>
    <input id="message" type="text" style="width: 20rem;">
    <input id="send" type="button" value="送信"/>
  </div>
  <ul id="list"></ul>

  <script type="text/javascript">
    // Web Socketの生成
    var webSocket = new WebSocket("ws://127.0.0.1/SampleServer/sample");

    //接続成功時
    webSocket.onopen = function () {
      document.getElementById("state").innerText = "接続成功";
      //サーバーからのメッセージを受信時した時の処理
      webSocket.onmessage = function (event) {
        var li = document.createElement("li");
        li.innerText = event.data;
        document.getElementById("list").appendChild(li);
      }
    };

    //接続エラー時
    webSocket.onerror = function() {
      document.getElementById("state").innerText = "接続失敗";
    };

    //送信ボタンがクリックされた時の処理
    document.getElementById("send").addEventListener("click", function() {
      //サーバーにメッセージを送信
      var inputElement = document.getElementById('message');
      webSocket.send(inputElement.value);
      inputElement.value = "";
    });

  </script>
</body>
</html>

これで、サーバーとクライアントの実装は完了です。

実行するには、まずサーバー側を Tomcat等で起動し、その後にクライアント側のHTMLをブラウザを立ち上げると、サーバーとの接続が行え、メッセージの送受信ができます。

まとめ

Java で簡単なチャットアプリを WebSocket 使って実装する方法を紹介してきました。

セキュリティや、大規模アクセスなどを考えると、もっと多くの仕組みが必要となりますが、まずは基本がおさえておきましょう。

【関連記事】
Javaソケット通信入門。TCPでデータの送受信をする

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。