Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！
•
18 likes•13,803 views
2016.5.21 JJUG CCC 2016 Spring M-3 Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！ by Java女子部 #ccc_m3
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！
Similar to Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！ (20)
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！
- 13. Java Spring Java JavaEE Ruby Rails Python Django 言語を扱いやすく パッケージングしたもの ＝ フレームワーク Springって何？ #jjug_ccc #ccc_m3
- 14. Spring BootJava Spring Java JavaEE Ruby Rails Python Django フレームワーク（コンポーネントの集合）を さらに使いやすくしたフレームワーク じゃあ、Spring Bootって何？ #jjug_ccc #ccc_m3
- 15. ・アノテーション ・DIコンテナ ・AOP アノテーションでクラス・メソッド・変数に目印を つけてフレームワークに解釈させる ⇒ 設定ファイルの代わりになる class Chat @RestController Spring Bootの特徴 #jjug_ccc #ccc_m3 class Chat
- 16. アノテーション名 記載場所 説明 @SpringBootAppli cation Mainクラス パッケージ内のクラスと設定を自 動的に読み込む @RestController クラス WebAPI用のコントローラー @Configuration クラス 設定クラス ソースコードでSpringの設定を実 装できる @RequestMapping クラス メソッド URLに紐づけて、アクセスできるよ うに設定する @Autowired メソッド フィールド 実装クラスを自動的にインジェク ションする(DIする) 基本のアノテーション(Spring) #jjug_ccc #ccc_m3
- 21. @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } } javajo > App.java 1章 Spring Bootの起動クラスを確認する
- 22. HelloControllerクラスにもアノテーションを 付与します。 @RestController public class HelloController { } 1章javajo.controller > HelloController.java 1章
- 23. ・helloメソッドを作成します。 ・helloメソッドにアノテーションを付与します。 String hello() { return "Hello World!"; } @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } javajo.controller > HelloController.java 1章
- 24. アプリケーションを起動して、 http://localhost:8080/javajo/ にアクセスしてみよう！ 1章javajo.controller > HelloController.java 1章 Eclipse IntelliJApp.javaを 右クリック＞run maven＞bootrun 起動方法
- 26. ブラウザ サーバ @RestController public class HelloController { @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } } http://localhost:8080 /javajo Hello World! 解説 1章
- 40. javajo.form > ChatForm.java ２章 public class ChatForm { ・・・・・省略・・・・・ }
- 41. public class ChatForm { private String name; private String message; ・・・・・省略・・・・・ } javajo.form > ChatForm.java ２章 クライアントから 受け取った値を格納する フィールドを作成
- 42. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java ２章 フィールドにアクセスする getter/setterを作成します
- 43. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java ２章 すでに実装済みなので、 コメントアウトを外す だけでOK
- 44. public class ChatForm { ・・・・・省略・・・・・ public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } } javajo.form > ChatForm.java ２章 すでに実装済みなので、 コメントアウトを外す だけでOK
- 46. public class StompConfig { } javajo.config > StompConfig.java ２章 クライアントからの メッセージを処理する クラスを作成します
- 47. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 メッセージを処理する 抽象クラスを継承
- 48. @Configuration public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 設定ファイルを表す アノテーションを付与
- 49. @Configuration @EnableWebSocketMessageBroke public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 WebSocketを扱うのに 必要なアノテーションを 付与
- 50. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java ２章 エンドポイントの 登録メソッドを作成
- 52. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java ２章 メッセージブローカーの 設定メソッドを作成
- 55. public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java ２章 チャットのコントロー ラークラスを作成します
- 56. @RestController public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java ２章 コントローラーの アノテーションを付与
- 57. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java ２章 メッセージを受け付ける MessageMappingを付与
- 58. @RestController public class ChatController { @MessageMapping(value = "/message" ) @SendTo(value = "/topic/messages") ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java ２章 処理結果を送信する宛先 SendToを付与
- 62. クライアント側（javajo.js） ２章 ChatStomp.prototype.connect = function () { var socket = new WebSocket('ws://' + location.host + '/endpoint'); ・・・・・省略・・・・・ }; ２３行目
- 63. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java ２章 エンドポイントの 登録メソッドを作成
- 66. クライアント側（javajo.js） ２章 ChatStomp.prototype.onConnected = function (frame) { console.log('Connected: ' + frame); this.stompClient.subscribe('/topic/messages',this. onSubscribeGreeting.bind(this)); this.setConnected(true); }; ３４行目
- 67. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java ２章 メッセージブローカーの 設定メソッドを作成
- 70. クライアント側（javajo.js） ２章 ChatStomp.prototype.sendName = function () { ・・・・・省略・・・・・ this.stompClient.send("/app/message", {}, JSON.stringify(json_message)); }; ７３行目
- 71. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java ２章 メッセージブローカーの 設定メソッドを作成
- 72. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller >ChatController.java ２章 メッセージを受け付ける MessageMappingを付与
- 76. クライアント側（javajo.js） ２章 ChatStomp.prototype.disconnect = function () { if (this.stompClient) { this.stompClient.disconnect(); this.stompClient = null; } this.setConnected(false); }; ８８行〜９４行目
- 78. 1. chat-exerciseのプロジェクトを実行！ 2. http://localhost:8080/chat にアクセス！ ローカルで動かしてみようローカルで動かしてみよう 3. ユーザ名を入力してConnectボタンクリック！ 4.メッセージを入力してSendボタン をクリック！ #jjug_ccc #ccc_m3