【Java】Websocketでリアルタイム通信!サンプル付きで紹介します
  • facebookページ
  • twitterページ
  • 2021.04.01

    【Java】Websocketでリアルタイム通信!サンプル付きで紹介します

    Java WebSocketとは

    WebSocketとは、Webでの双方向通信を低コストで行うための仕組みのことです。

    Web通信には、主に「HTTP」が使われていました。

    HTTPは、HTMLで記述された文書を転送するためのプロトコルで、この規格が定められた当時のWebページは、遠くにいる人たち同士が知識・情報を共有するために作られました。

    しかし、Webの発展にあわせてSNSをはじめとするインタラクティブ(対話型・双方向)なWebアプリケーションの登場によって、リアルタイムでのやりとりが必要になっています。

    例えば、TwitterやFacebookなど誰かが投稿した内容が、他の人の画面でもリアルタイムに表示・更新されないと困りますよね。

    この、リアルタイムなやりとり(双方向通信)を実現するのに、HTTPでは少し難しかったのです。

    HTTPの特徴
    • 1つのコネクションで1つのリクエストしか送れない
    • リクエストはクライアントからしか送れない
    • ヘッダーが冗長(情報量が多い)

    それでもなんとかして、HTTPを用いてクライアント⇄サーバ間の双方向通信ができるよう取り組んでいました。

    例えば、一定の間隔でクライアントがサーバに問い合わせをし続けるロングポーリングや、Cometという手法などです。

    通信を開始するサーバプッシュ機能をサーバ側からできるよう、疑似的に実現していました。

    とは言えやはり無駄が多く、HTTPのボトルネックが解決されることはありませんでした。

    そこで登場したのがWebSocketという新しいプロトコルです。

    WebSockeは、サーバとクライアントがコネクションを確立(ハンドシェイク)できると、その後の通信を専用プロトコル(双方向通信)で行ってくれます

    • ハンドシェイク:HTTP通信によって実現します
    • 双方向通信:送信データを「フレーム」単位で扱う

    WebSockeには、サーバプッシュ機能が備わっており、サーバとクライアントの双方向で通信可能です。

    また、ヘッダのサイズが最小2byte、最大14byteと小さいため、通信量の削減にもなります。

    Java WebSocketのサンプル

    では、JavaでWebSocketのサンプルを見ていきましょう。

    各種実装方法は、下記の通りです。

    • WebSocket Server:Java
    • WebSocket Client:JavaScript

    このサンプルでは、クライアント側から送信するメッセージをサーバが受信し、サーバからクライアントへメッセージを返すところまでを実装します。

    開発環境にはEclipseを使用します。

    開発環境の設定については、下記の記事が参考になると思うので必要な方はチェックしてみてください。

    【関連記事】

    ▶︎【Java】Webアプリケーションとは?開発環境の設定からサンプルコードまで紹介!

    WebSocket Serverを作成

    まずは、WebSocket Serverを作成しましょう。

    Eclipseを起動して、パッケージエクスプローラーから「新規」>「Java プロジェクト」を作成しましょう。

    プロジェクト名は「SampleServer」としました。

    作成したプロジェクトの中に「WebSocketServer.java」というJavaファイルを作成しましょう。

    ディレクトリ構成は下記の画像のようになっていればOKです。

    WebSocket Serverのディレクトリ構成

    WebSocketServer.java には下記のように記述します。

    import文で使用するライブラリをインポートしています。

    websocketクラス・serverクラス
    • OnClose:このメソッドレベルのアノテーションは、Web ソケットセッションが閉じているときに呼び出される Java メソッドを修飾するために使用できます。
    • OnError:のメソッドレベルのアノテーションを使用して、エラーを処理するために呼び出す Java メソッドを修飾できます。
    • OnMessage:このメソッドレベルのアノテーションを使用して、Java メソッドに受信 Web ソケットメッセージを受信させることができます。
    • OnOpen:このメソッドレベルのアノテーションを使用して、新しい Web ソケットセッションが開いているときに呼び出される Java メソッドを修飾できます。
    • Session:Web ソケットセッションは、2 つの Web ソケットエンドポイント間の会話を表します。
    • ServerEndpoint:
      このクラスレベルのアノテーションは、それが装飾するクラスが、Web ソケットサーバーの URI 空間でデプロイおよび利用可能になる Web ソケットエンドポイントであることを宣言します。

    参考:パッケージ javax.websocket
    参考:パッケージ javax.websocket.server

    WebSocket Server がクライアントからデータを受け取るために、@ServerEndpointというアノテーションとエンドポイントを指定します。

    ポテパンダの一言メモ

    アノテーションは、注釈・注記といった意味の言葉です。
    Javaのコード上では「@(アットマーク)」から記述を始め、コードでは表現しきれない情報を補足としてつけ加えます

    【関連記事】

    ▶︎Javaのアノテーションって何?仕組みと基本的な使い方を解説

    これによって、WebSocket Client が該当するJavaファイルを見つけられるようになるのです。

    websocketクラスのアノテーションを利用して、以下の処理を実装します。

    • メッセージを受信した際の処理
    • エラーが発生した際の処理
    • セッションを確立した際の処理
    • セッションを終了した際の処理

    それぞれの処理はコードに書かれている通りで、セッションを確立した際は確立した旨を表示させています。

    WebSocket Clientを作成

    次に、WebSocket Clientを作成します。

    WebSocket Clientのプロジェクトは、ローカルフォルダのいずれの場所に作成しても問題ありません。

    今回は「/Users/ユーザー」に「SampleWebSite」というディレクトリを作成しました。

    このディレクトリに格納するファイルは下記の2つです。

    1. index.html
    2. script.js

    サンプルコードは以下のように記述しました。

    ■記述例(index.html)

    WebSocketの通信部分はjQueryを使うため、headタグ内にjQueryのCDNを記述しています。

    bodyタグ内にはpタグを用意し、JavaScriptで受信したメッセージをWebページに表示するよう「id=”message”」を設定しました。

    変数 url には、プロジェクト名とエンドポイントを明記するよう下記のように設定しています。

    「ws://localhost:8080/プロジェクト名/エンドポイント」

    WebSocket Serverに「WebSocketでメッセージを送信します!」というメッセージを送信し、受け取ったメッセージは

    で、index.htmlのpタグへ渡します。

    Java WebSocketの動作確認

    最後に動作を確認しましょう。

    WebSocket Serverを起動するために、WebSocketServer.javaを右クリックして「実行」から該当サーバーを起動します。

    WebSocket Serverを起動させたら、index.htmlファイルを開きましょう。

    開いた時に「WebSocketでメッセージを正常に受信しました!」と表示されていれば、正常に動作しています。

    コンソールも確認してみると、メッセージを送信できていることもわかります。

    Java WebSocketの動作確認

    Eclipseも確認してみると、セッションの確立と受信したメッセージが表示されているはずです。

    index.htmlファイルを閉じるとセッションは終了します。

    Java WebSocketの動作確認



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE