Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!

5,753 views

Published on

2016.5.21 JJUG CCC 2016 Spring

M-3
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!
by Java女子部

#ccc_m3

Published in: Engineering
  • Be the first to comment

Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!

  1. 1. Spring Bootで チャットツールを作りながら Webの仕組みを理解しよう! Java女子部 presents 2016.5.21 #jjug_ccc #ccc_m3
  2. 2. 本日のメンバー #jjug_ccc #ccc_m3
  3. 3. ■ちか Java歴7年くらい。 金融系のSIer ■ゆう 最近Javaを始めたばかりの 初心者。 エンジニア歴は2年ちょい。 講師講師 #jjug_ccc #ccc_m3
  4. 4. ■えりこ WebアプリケーションSE エンジニア8年生。 ■あや ラーメン二郎が好きな エンジニア2年生。 チューター #jjug_ccc #ccc_m3
  5. 5. ■とぅん Java暦半年ぐらいのエンジニ ア4年生。品質管理とか やってます。 ■よこな JJUG司会兼チューター。 エンジニア4年生。 チューター #jjug_ccc #ccc_m3
  6. 6. ワークショップの概要説明 #jjug_ccc #ccc_m3
  7. 7. チャットツールの制作を通じて Webの仕組みを理解する! 今回の目標本日の目標 #jjug_ccc #ccc_m3
  8. 8. ・基礎的な概念説明 (Webの仕組み、Spring Bootについて) ・ハンズオン導入・WebSocketについて ・ハンズオン ・まとめ 全体の流れ #jjug_ccc #ccc_m3
  9. 9. Webの仕組みについて #jjug_ccc #ccc_m3
  10. 10. 情報をやりとりする通信網のこと。 この通信網によって 世界中とやりとり することができる。 そもそもインターネットとは? #jjug_ccc #ccc_m3
  11. 11. クライアントが情報を要求すると、 サーバから情報が返ってくる。 クライアント サーバ リクエスト レスポンス 通信方法について #jjug_ccc #ccc_m3
  12. 12. Spring Bootについて #jjug_ccc #ccc_m3
  13. 13. Java Spring Java JavaEE Ruby Rails Python Django 言語を扱いやすく パッケージングしたもの = フレームワーク Springって何? #jjug_ccc #ccc_m3
  14. 14. Spring BootJava Spring Java JavaEE Ruby Rails Python Django フレームワーク(コンポーネントの集合)を さらに使いやすくしたフレームワーク じゃあ、Spring Bootって何? #jjug_ccc #ccc_m3
  15. 15. ・アノテーション ・DIコンテナ ・AOP   アノテーションでクラス・メソッド・変数に目印を つけてフレームワークに解釈させる ⇒ 設定ファイルの代わりになる class Chat @RestController Spring Bootの特徴 #jjug_ccc #ccc_m3 class Chat
  16. 16. アノテーション名 記載場所 説明 @SpringBootAppli cation Mainクラス パッケージ内のクラスと設定を自 動的に読み込む @RestController クラス WebAPI用のコントローラー @Configuration クラス 設定クラス ソースコードでSpringの設定を実 装できる @RequestMapping クラス メソッド URLに紐づけて、アクセスできるよ うに設定する @Autowired メソッド フィールド 実装クラスを自動的にインジェク ションする(DIする) 基本のアノテーション(Spring) #jjug_ccc #ccc_m3
  17. 17. ハンズオン 1章 -文字列を返すWebアプリケーションを 作ってみよう!-
  18. 18. リポジトリ https://github.com/java-women/ChatToolForBeginners/ プロジェクト  chat-exercise  ハンズオン作業用  chat-tutorial  完成形 環境構築手順  https://git.io/vro1X 事前準備 1章
  19. 19. ブラウザ アマゾンのリクエストページ これから作るもの 1章 ①リクエストを送信 ③レスポンスを受信 ②リクエストを受け取り ごにょごにょ処理する 商品の詳細ページ
  20. 20. ブラウザ http://localhost:8080/javajo Hello World! これから作るもの 1章 ①リクエストを送信 ③レスポンスを受信 ②リクエストを受け取り ごにょごにょ処理する ここを 作るよ
  21. 21. @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } } javajo > App.java 1章 Spring Bootの起動クラスを確認する
  22. 22. HelloControllerクラスにもアノテーションを 付与します。 @RestController public class HelloController {   } 1章javajo.controller > HelloController.java 1章
  23. 23. ・helloメソッドを作成します。 ・helloメソッドにアノテーションを付与します。 String hello() { return "Hello World!"; } @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } javajo.controller > HelloController.java 1章
  24. 24. アプリケーションを起動して、 http://localhost:8080/javajo/ にアクセスしてみよう! 1章javajo.controller > HelloController.java 1章 Eclipse IntelliJApp.javaを 右クリック>run maven>bootrun 起動方法
  25. 25. 下記画面が表示されれば、成功! 1章Hello World動作確認 1章
  26. 26. ブラウザ サーバ @RestController public class HelloController { @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } } http://localhost:8080 /javajo Hello World! 解説 1章
  27. 27. WebSocketについて #jjug_ccc #ccc_m3
  28. 28. WebSocket 聞いたことある人?
  29. 29. サーバ・クライアント間で接続が確立された ら、双方向通信(サーバからもクライアントから もデータの送信)が行える技術仕様 WebSocketとは? #jjug_ccc #ccc_m3
  30. 30. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3
  31. 31. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは
  32. 32. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB
  33. 33. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB こんばんはこんばんは こんばんは
  34. 34. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB こんばんはこんばんは こんばんは ※1度接続が確立されればデータがリアルタイム で送受信可能! ※同じサーバに接続しているユーザはデータを共 有する
  35. 35. ハンズオン2章 -チャットを作ってみよう!- #jjug_ccc #ccc_m3
  36. 36. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定
  37. 37. チャットツールの作成内容 2章 Controller @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message ChatForm @EnableWebSocketMessageBroker /topic/messages
  38. 38. <dependencies> ・・・・・省略・・・・・ <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket </artifactId> </dependency> ・・・・・省略・・・・・ </dependencies> 2章pom.xml の内容を確認する 2章
  39. 39. <dependencies> ・・・・・省略・・・・・ <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket </artifactId> </dependency> ・・・・・省略・・・・・ </dependencies> pom.xml の内容を確認する pom.xml 35行目あたり WebSocketを利用 するのに必要!! 2章
  40. 40. javajo.form > ChatForm.java 2章 public class ChatForm { ・・・・・省略・・・・・ }
  41. 41. public class ChatForm { private String name; private String message; ・・・・・省略・・・・・ } javajo.form > ChatForm.java 2章 クライアントから 受け取った値を格納する フィールドを作成
  42. 42. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java 2章 フィールドにアクセスする getter/setterを作成します
  43. 43. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java 2章 すでに実装済みなので、 コメントアウトを外す だけでOK
  44. 44. public class ChatForm { ・・・・・省略・・・・・ public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } } javajo.form > ChatForm.java 2章 すでに実装済みなので、 コメントアウトを外す だけでOK
  45. 45. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定
  46. 46. public class StompConfig { } javajo.config > StompConfig.java 2章 クライアントからの メッセージを処理する クラスを作成します
  47. 47. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 メッセージを処理する 抽象クラスを継承
  48. 48. @Configuration public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 設定ファイルを表す アノテーションを付与
  49. 49. @Configuration @EnableWebSocketMessageBroke public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 WebSocketを扱うのに 必要なアノテーションを 付与
  50. 50. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java 2章 エンドポイントの 登録メソッドを作成
  51. 51. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message @EnableWebSocketMessageBroker /topic/messages ここを 作るよ ChatForm
  52. 52. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  53. 53. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定ここを 作るよ
  54. 54. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message ChatForm @EnableWebSocketMessageBroker /topic/messages ここを 作るよ
  55. 55. public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 チャットのコントロー ラークラスを作成します
  56. 56. @RestController public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 コントローラーの アノテーションを付与
  57. 57. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 メッセージを受け付ける MessageMappingを付与
  58. 58. @RestController public class ChatController { @MessageMapping(value = "/message" ) @SendTo(value = "/topic/messages") ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 処理結果を送信する宛先 SendToを付与
  59. 59. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  60. 60. チャットツールの作成内容 2章 ここだよ
  61. 61. クライアント側(Stomp.js) 2章 resources/static/js/Stomp.js 提供されているライブラリを使用 詳しくは、 http://jmesnil.net/stomp-websocket/doc/ クライアント側のメッセージ制御は JavaScriptライブラリを利用する
  62. 62. クライアント側(javajo.js) 2章 ChatStomp.prototype.connect = function () { var socket = new WebSocket('ws://' + location.host + '/endpoint'); ・・・・・省略・・・・・ }; 23行目
  63. 63. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java 2章 エンドポイントの 登録メソッドを作成
  64. 64. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  65. 65. チャットツールの作成内容 2章 ここだよ
  66. 66. クライアント側(javajo.js) 2章 ChatStomp.prototype.onConnected = function (frame) { console.log('Connected: ' + frame); this.stompClient.subscribe('/topic/messages',this. onSubscribeGreeting.bind(this));  this.setConnected(true); }; 34行目
  67. 67. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  68. 68. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定ここだよ
  69. 69. チャットツールの作成内容 2章 ここだよ
  70. 70. クライアント側(javajo.js) 2章 ChatStomp.prototype.sendName = function () { ・・・・・省略・・・・・ this.stompClient.send("/app/message", {},    JSON.stringify(json_message)); }; 73行目
  71. 71. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  72. 72. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller >ChatController.java 2章 メッセージを受け付ける MessageMappingを付与
  73. 73. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message @EnableWebSocketMessageBroker /topic/messages ChatForm
  74. 74. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  75. 75. チャットツールの作成内容 2章 ここだよ
  76. 76. クライアント側(javajo.js) 2章 ChatStomp.prototype.disconnect = function () { if (this.stompClient) { this.stompClient.disconnect(); this.stompClient = null; } this.setConnected(false); }; 88行〜94行目
  77. 77. ハンズオンはここまで! 実際に動かしてみよう! #jjug_ccc #ccc_m3
  78. 78. 1. chat-exerciseのプロジェクトを実行! 2. http://localhost:8080/chat にアクセス! ローカルで動かしてみようローカルで動かしてみよう 3. ユーザ名を入力してConnectボタンクリック!   4.メッセージを入力してSendボタン をクリック! #jjug_ccc #ccc_m3
  79. 79. まとめ #jjug_ccc #ccc_m3
  80. 80. ・「Hello World」を出力するアプリケーションを Spring Bootで作りました ・チャットを作りながらWebSocketについて学 びました まとめ #jjug_ccc #ccc_m3
  81. 81. お疲れ様でした ありがとうございました 【講師】 ゆう・ちか 【チューター】 えりこ・あや・とぅん・よこな #jjug_ccc #ccc_m3

×