byClassmethod検索AWSAlexaモバイルビッグデータサーバーレスTableauAlteryxイベントtomcat7のWebSocketでcanvasの描画を共有する2013年03月04日k.ootaki(39)22この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。tomcat7でWebSocketを使ってみました。今回はcanvasに書いた情報を共有するといことをやりたいと思います。使用する環境はpleiades3.7.2、Java7になります。Eclipseのtomcatホームの設定はしてあるものとして進めます。Eclipseでプロジェクトを作成します「ファイル」>「新規」>「その他」>「Java」からTomcatプロジェクトを選択し、プロジェクトを作成します。(今回はサブディレクトリにWebContentsを設定して作成しました)srcフォルダ配下にws.appパッケージを作成します。ここにサーバ側のソースを格納します。クライアント側のソースはWebContents直下にhtmlファイルを作成します。以下フォルダ構成になります。ビルドパスを追加しますtomcatでwebsocketを実装するのにはWebSocketServletを継承してサーブレットを実装する必要があります。それにはcatalina.jarとtomcat-coyote.jarが必要なのでビルドバスに追加をします。プロジェクトを右クリックして「プロパティ」から「Javaのビルド・バス」を選択します。ライブラリタブから「変数の追加」ボタンをクリックし、「TOMCAT_HOME」を選択します。次に拡張ボタンをクリックし、「lib」フォルダからcatalina.jarを選択します。同様にtomcat-coyote.jarも追加します。サーブレットを作成しますws.app配下にDrawServletクラスを作成します。}}ソースについて簡単に説明します。冒頭にも書きましたが、WebSocketServletを継承する必要があります。アノテーションはURLマッピングのためのものになります。Servlet3.0ではHttpServletクラスを継承していれば、@WebServletアノテーションを書くだけでweb.xmlを記載しなくてもサーブレットを呼び出すことができます。WebSocketServletクラスはHttpServletを継承してているクラスなので記述しておけばweb.xmlがなくても呼び出されます。WebSocketServlet{}WebSocketServletクラスを継承するとcreateWebSocketInboundを実装する必要があります。クライアントからの要求があるとこのメソッドが呼び出されます。WebSoket通信はStreamInboundクラスを返却する必要があります。ここではMessageInboundクラス(StreamInboundを継承したクラス)を継承したDrawMessageInboundクラスを生成して返却しています。}接続時の処理を記述します。ここでは自身の内部クラスをリストに追加しています。}接続解除時の処理を記述します。接続時に追加した自身をリストから削除します。}メッセージ受信時の処理を記述します。ここではクライアントから送信されたメッセージ(マウス座標の文字列)を接続された全てに対してメッセージを送信しています。}バイナリメッセージを受信した時の処理を記述します。今回は文字列のみを取り扱うので何も実装しません。}HTMLファイルの作成WebContentsフォルダ直下にindex.htmlを作成します。onclick="closeConnect()"></body></html>クライアント側のソースについて説明をします。サーバに対して接続を行っています。WebSocket("ws://localhost:8080/websocket/DrawServlet");ページを開いた時の初期処理を記述しています。ここではcanvasを取得してmousemove、mousedown、mouseupのイベントを登録しています。}mousemoveイベント内ではマウスがクリックされた状態で、マウスが動いた場合にdrawメソッドを呼び出し、線を引きサーバに対してカンマ区切りでマウスのX、Y座標を送信しています。}サーバからの受信時に呼び出されます。受信メッセージをカンマで分割しX、Y座標を取得し描画メソッドを呼び出しています。};サーバとの接続を解除します。}動かしてみましょうhttp://localhost:8080/websocketにブラウザからアクセスしてみます。ブラウザ複数起動させます。canvasに線を引くと別ブラウザにも線が引かれるのが分かります。ローカル環境だとスムーズに描画されるかと思います。接続解除を押すとサーバとの接続が解除されるので描画が共有されなくなります。最後にtomcatを使って簡単にWebSocket通信が出来たかと思います。WebSocketの仕様については仕様が確定していませんので、今後変わる可能性があるみたいです。仕様も確定するのかなと思います。395,740まだプロフィールが設定されていません。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。カフェ店長のオカノです。今日はオフィスに用があるので、通勤ラッシュを避けて出社しました。この子は新メンバーのさめくんです。在宅勤務が推奨されているのでオフィスが閑散としており、すこしさみしそうです。使いたいときの注意点を書きました。本が出ていたので読んでみたところよかったので紹介させていただきます。