IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > WebSocketの使い方 > WebSocketのサンプルコード
  カテゴリ別さくいん

WebSocketのサンプルコード

サンプル

サンプル サーバー側(Jetty 8による実装)

このサンプルを試すにはサーバー側とクライアント側の準備が必要です。
サーバー側は、Javaサーブレットの実行環境である、Jettyを用います。 サンプルを動かす手順は、基本的にはHTTPサーブレットと同じです。

まず、サンプルJavaファイルコンパイルしたクラスファイルを作ります。 コンパイルするには、「jetty-websocket-バージョン番号.jar」と「servlet-api-バージョン番号.jar」を参照する必要があります。
バージョン番号はJettyに添付されているファイルバージョンに読み替えてください。Jetty自体は基本的に8.0以上が必要です。

package wsapp;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.ConcurrentLinkedQueue;

import javax.servlet.http.HttpServletRequest;

import org.eclipse.jetty.websocket.*;

// 接続リクエストとWebSocket通信の仲立ちを行うサーブレット
public class MyServlet extends WebSocketServlet{

  // クライアントとの接続を管理するリスト
  private static ConcurrentLinkedQueue<MySocket> sSocketQueue = 
        new ConcurrentLinkedQueue<MySocket>();

  // 接続リクエストを受けたとき、WebSocket通信を処理するWebSocketインターフェイス実装クラスを返す
  @Override
  public WebSocket doWebSocketConnect(HttpServletRequest request, String protocol) {
    return new MySocket();
  }
  
  // WebSocket通信を処理するWebSocketインターフェイス実装クラス
  class MySocket 
    implements WebSocket.OnTextMessage{

    // このインスタンスが処理する、クライアントとの接続
    private Connection mConnection;

    // WebSocket通信開始時のコールバック関数
    @Override
    public void onOpen(Connection connection){
        this.mConnection = connection;
        // 開始された接続をリストに追加
        sSocketQueue.add(this);
    }
  
    // WebSocket通信切断時のコールバック関数
    @Override
    public void onClose(int closeCode , String message){
        // 切断された接続をリストから削除 
        sSocketQueue.remove(this);
    }

    // テキストメッセージ受信時のコールバック関数
    @Override
    public void onMessage(String data){
        // リストの中のすべての接続に、受信したデータを再配信
        for(MySocket socket : sSocketQueue){
            try{
                socket.mConnection.sendMessage(data); 
            } catch (IOException e) {
                // エラーになった接続をリストから削除 
                sSocketQueue.remove(socket);
                e.printStackTrace();
            }
        }
    }
  }
}

そして、Jettyのインストールフォルダの下の「webapps/wsapp/WEB-INF/classes/wsapp」ディレクトリに、先ほどのクラスファイルを配置します。さらに、「webapps/wsapp/WEB-INF/」ディレクトリに以下のようなweb.xmlファイルを配置します。

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  metadata-complete="false"
  version="3.0"> 
  
 <servlet>
   <servlet-name>MyServlet</servlet-name>
   <servlet-class>wsapp.MyServlet</servlet-class>
 </servlet>

 <servlet-mapping>
   <servlet-name>MyServlet</servlet-name>
   <url-pattern>/*</url-pattern>
 </servlet-mapping>

</web-app>

また、設定によっては「webapps/wsapp/WEB-INF/lib」ディレクトリコンパイル時に参照したものと同じバージョンの「jetty-websocket-バージョン番号.jar」を配置する必要もあります。

この状態でJettyインストールディレクトリ直下で「java -jar start.jar」コマンドを実行すると、Jettyサーバーが起動し、サーブレットが実行可能な状態になります。

サンプル クライアント側

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル 簡単なチャットアプリケーション</title>
</head>
<body>
同じサーバーと接続しているクライアントの間でチャットができます。
<hr>
<p>受信メッセージ表示領域</p>
<ul id="received">
</ul>
<hr>
<input id="message" type="text">
<input type="button" value="メッセージ送信" onclick="onSend()">
<script type="text/javascript">
  
    const url = "ws://localhost:8080/wsapp/MyServlet";
    var received = document.getElementById("received");
    var message = document.getElementById("message");
    
    var ws;
  
    // FireFoxとの互換性を考慮してインスタンス化
    if ("WebSocket" in window) {
        ws = new WebSocket(url);
    } else if ("MozWebSocket" in window) {
        ws = new MozWebSocket(url);
    }
    
    // メッセージ受信時のコールバック関数
    ws.onmessage =     function(event){
        console.log("受信メッセージ:" + event.data);
        var li = document.createElement("li");
        li.innerHTML = event.data;
        received.appendChild(li);
    }
    
    // メッセージ送信
    function onSend(){
       ws.send(message.value);
       console.log("送信メッセージ:" + message.value);
    }
    
    // 終了時に明示的に接続を閉じる
    window.onunload = function(){
       var code = 4500;
       var reason = "クライアントが閉じられました。";
       ws.close(code,reason);
    }
    
</script>
</body>
</html>

関連項目

関連する項目はありません)




V20 PRO L-01JV20 PRO L-01J
NTTドコモが販売するスマートフォン。
Withings Steel HRWithings Steel HR
フランスの家電メーカー・Withingsが販売するスマートウォッチ。
Disney Mobile on docomo DM-01JDisney Mobile on docomo DM-01J
NTTドコモが販売するスマートフォン。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年2月25日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   リマインダー  (用語辞典)
ランキング4   スワイプ  (用語辞典)
ランキング5   プラットフォーム  (用語辞典)
ランキング6   リーンスタートアップ  (用語辞典)
ランキング7   デプロイ  (用語辞典)
ランキング8   アクティブユーザー  (用語辞典)
ランキング9   サードパーティ  (用語辞典)
ランキング10   パーマリンク  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.