バナー画像

Java WebSocketとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Java WebSocketのサンプル

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

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

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

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

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

【関連記事】

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

WebSocket Serverを作成

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

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

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

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

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

WebSocket Serverのディレクトリ構成

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

■記述例
package main.java;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/WebSocketServer")
public class WebSocketServer {

    @OnMessage
    public String onMessage(String message) {
        // メッセージを受信した際の処理を実装
        System.out.println("WebSocketで受信したメッセージ:" + message);
        return "WebSocketでメッセージを正常に受信しました!";
    }

    @OnError
    public void onError(Throwable th) {
        // WebSocketエラーが発生した際の処理を実装
        System.out.println("WebSocketエラーが発生:" + th.getMessage());
    }

    @OnOpen
    public void onOpen(Session session) {
        // セッションが確立した際の処理を実装
        System.out.println("WebSocketセッション確立");
    }

    @OnClose
    public void onClose(Session session) {
    	// セッションを終了する際の処理を実装
        System.out.println("WebSocketセッション終了");
    }
}

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)

■記述例(index.html)
<!DOCTYPE html>
<html>
  <head>
    <title>WebSocketServerのサンプル</title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <p id="message"></p>
  </body>
</html>

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

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

■記述例(script.js)
$(function() {
  var url = "ws://localhost:8080/SampleServer/WebSocketServer";
  var ws = new WebSocket(url);

  ws.onmessage = function(receive) {
    $("#message").text(receive.data);
  };

  ws.onopen = function() {
    ws.send("WebSocketでメッセージを送信します!");
    console.log("メッセージを送信しました!");
  };
});

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

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

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

$("#message").text(receive.data);

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

Java WebSocketの動作確認

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

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

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

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

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

Java WebSocketの動作確認

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

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

Java WebSocketの動作確認

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

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

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

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

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

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

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

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

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

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

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