Downloaded 43 times
![@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class,
args);
}
}
javajo > App.java 1章
Spring Bootの起動クラスを確認する](https://image.slidesharecdn.com/jjug-160521045853/85/Spring-Boot-Web-21-320.jpg)
Uploaded byJava女子部
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！
2016.5.21 JJUG CCC 2016 Spring M-3 Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！ by Java女子部 #ccc_m3
More Related Content
![[Ps11]ネットワーク第4回](https://cdn.slidesharecdn.com/ss_thumbnails/ps114-131029104737-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう！
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Java Spring Java JavaEE RubyRails Python Django 言語を扱いやすく パッケージングしたもの ＝ フレームワーク Springって何？ #jjug_ccc #ccc_m3
- 14. Spring BootJava Spring JavaJavaEE Ruby Rails Python Django フレームワーク（コンポーネントの集合）を さらに使いやすくしたフレームワーク じゃあ、Spring Bootって何？ #jjug_ccc #ccc_m3
- 15.
- 16. アノテーション名 記載場所 説明 @SpringBootAppli cation Mainクラスパッケージ内のクラスと設定を自 動的に読み込む @RestController クラス WebAPI用のコントローラー @Configuration クラス 設定クラス ソースコードでSpringの設定を実 装できる @RequestMapping クラス メソッド URLに紐づけて、アクセスできるよ うに設定する @Autowired メソッド フィールド 実装クラスを自動的にインジェク ションする(DIする) 基本のアノテーション(Spring) #jjug_ccc #ccc_m3
- 17.
- 18.
- 19.
- 20.
- 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.java1章 Eclipse IntelliJApp.javaを 右クリック＞run maven＞bootrun 起動方法
- 25.
- 26. ブラウザ サーバ @RestController public class HelloController { @RequestMapping(value ="/javajo") String hello() { return "Hello World!"; } } http://localhost:8080 /javajo Hello World! 解説 1章
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 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
- 45.
- 46. public class StompConfig{ } javajo.config > StompConfig.java ２章 クライアントからの メッセージを処理する クラスを作成します
- 47. public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 メッセージを処理する 抽象クラスを継承
- 48. @Configuration public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 設定ファイルを表す アノテーションを付与
- 49. @Configuration @EnableWebSocketMessageBroke public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java ２章 WebSocketを扱うのに 必要なアノテーションを 付与
- 50. public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java ２章 エンドポイントの 登録メソッドを作成
- 51.
- 52. public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java ２章 メッセージブローカーの 設定メソッドを作成
- 53.
- 54.
- 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を付与
- 59.
- 60.
- 61.
- 62. クライアント側（javajo.js） ２章 ChatStomp.prototype.connect =function () { var socket = new WebSocket('ws://' + location.host + '/endpoint'); ・・・・・省略・・・・・ }; ２３行目
- 63. public class StompConfigextends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java ２章 エンドポイントの 登録メソッドを作成
- 64.
- 65.
- 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 StompConfigextends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java ２章 メッセージブローカーの 設定メソッドを作成
- 68.
- 69.
- 70. クライアント側（javajo.js） ２章 ChatStomp.prototype.sendName = function() { ・・・・・省略・・・・・ this.stompClient.send("/app/message", {}, JSON.stringify(json_message)); }; ７３行目
- 71. public class StompConfigextends 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を付与
- 73.
- 74.
- 75.
- 76. クライアント側（javajo.js） ２章 ChatStomp.prototype.disconnect = function() { if (this.stompClient) { this.stompClient.disconnect(); this.stompClient = null; } this.setConnected(false); }; ８８行〜９４行目
- 77.
- 78. 1. chat-exerciseのプロジェクトを実行！ 2. http://localhost:8080/chat にアクセス！ ローカルで動かしてみようローカルで動かしてみよう 3.ユーザ名を入力してConnectボタンクリック！ 4.メッセージを入力してSendボタン をクリック！ #jjug_ccc #ccc_m3
- 79.
- 80.
- 81.