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

Spring Bootでチャットツールを作りながら

Webの仕組みを理解しよう！

Java女子部presents

2016.5.21

#jjug_ccc #ccc_m3

本日のメンバー

#jjug_ccc #ccc_m3

■ちかJava歴7年くらい。金融系のSIer

■ゆう最近Javaを始めたばかりの

初心者。

エンジニア歴は２年ちょい。

講師講師#jjug_ccc #ccc_m3

■えりこWebアプリケーションSEエンジニア8年生。

■あやラーメン二郎が好きなエンジニア２年生。

チューター#jjug_ccc #ccc_m3

■とぅんJava暦半年ぐらいのエンジニア4年生。品質管理とかやってます。

■よこなJJUG司会兼チューター。エンジニア４年生。

チューター#jjug_ccc #ccc_m3

ワークショップの概要説明

#jjug_ccc #ccc_m3

チャットツールの制作を通じてWebの仕組みを理解する！

今回の目標本日の目標#jjug_ccc #ccc_m3

・基礎的な概念説明（Webの仕組み、Spring Bootについて）

・ハンズオン導入・WebSocketについて

・ハンズオン

・まとめ

全体の流れ#jjug_ccc #ccc_m3

Webの仕組みについて

#jjug_ccc #ccc_m3

情報をやりとりする通信網のこと。

この通信網によって

世界中とやりとり

することができる。

そもそもインターネットとは？#jjug_ccc #ccc_m3

クライアントが情報を要求すると、

サーバから情報が返ってくる。

クライアントサーバリクエスト

レスポンス

通信方法について#jjug_ccc #ccc_m3

Spring Bootについて

#jjug_ccc #ccc_m3

Java SpringJava JavaEERuby RailsPython Django

言語を扱いやすくパッケージングしたもの＝フレームワーク

Springって何？#jjug_ccc #ccc_m3

Spring BootJava SpringJava JavaEERuby RailsPython Django

フレームワーク（コンポーネントの集合）をさらに使いやすくしたフレームワーク

じゃあ、Spring Bootって何？#jjug_ccc #ccc_m3

・アノテーション

・DIコンテナ

・AOP　

アノテーションでクラス・メソッド・変数に目印をつけてフレームワークに解釈させる⇒　設定ファイルの代わりになる

class Chat

@RestController

Spring Bootの特徴#jjug_ccc #ccc_m3

class Chat

アノテーション名記載場所説明

@SpringBootApplication

Mainクラスパッケージ内のクラスと設定を自動的に読み込む

@RestController クラス WebAPI用のコントローラー

@Configuration クラス設定クラスソースコードでSpringの設定を実装できる

@RequestMapping クラスメソッド

URLに紐づけて、アクセスできるように設定する

@Autowired メソッドフィールド

実装クラスを自動的にインジェクションする(DIする)

基本のアノテーション(Spring)#jjug_ccc #ccc_m3

ハンズオン 1章-文字列を返すWebアプリケーションを

作ってみよう！-

リポジトリhttps://github.com/java-women/ChatToolForBeginners/

プロジェクト　chat-exercise　ハンズオン作業用

　chat-tutorial　　完成形

環境構築手順　https://git.io/vro1X

事前準備 1章

https://github.com/java-women/ChatToolForBeginners/

https://github.com/java-women/ChatToolForBeginners/

https://git.io/vro1X

https://git.io/vro1X

ブラウザ

アマゾンのリクエストページ

これから作るもの 1章

①リクエストを送信

③レスポンスを受信

②リクエストを受け取りごにょごにょ処理する

商品の詳細ページ

ブラウザ

http://localhost:8080/javajo

Hello World!

これから作るもの 1章

①リクエストを送信

③レスポンスを受信

②リクエストを受け取りごにょごにょ処理する

ここを作るよ

@SpringBootApplicationpublic class App {

public static void main(String[] args) {SpringApplication.run(App.class,

args);}

}

javajo > App.java 1章

Spring Bootの起動クラスを確認する

HelloControllerクラスにもアノテーションを付与します。

@RestControllerpublic class HelloController { 　 }

1章javajo.controller > HelloController.java 1章

・helloメソッドを作成します。

・helloメソッドにアノテーションを付与します。

String hello() { return "Hello World!"; }

@RequestMapping(value = "/javajo") String hello() { return "Hello World!"; }

javajo.controller > HelloController.java 1章

アプリケーションを起動して、

http://localhost:8080/javajo/にアクセスしてみよう！

1章javajo.controller > HelloController.java 1章

EclipseIntelliJApp.javaを

右クリック＞runmaven＞bootrun

起動方法

下記画面が表示されれば、成功！

1章Hello World動作確認 1章

ブラウザ

サーバ

@RestControllerpublic class HelloController

{

@RequestMapping(value = "/javajo") String hello() { return "Hello World!"; }}

http://localhost:8080/javajo

Hello World!

解説 1章

WebSocketについて

#jjug_ccc #ccc_m3

WebSocket聞いたことある人？

サーバ・クライアント間で接続が確立されたら、双方向通信(サーバからもクライアントからもデータの送信)が行える技術仕様

WebSocketとは？#jjug_ccc #ccc_m3

WebSocket（双方向通信）

Client A#jjug_ccc #ccc_m3



こんにちは



こんにちは

ClientB



こんにちは

ClientB こんばんはこんばんは

こんばんは



こんにちは

ClientB こんばんはこんばんは

こんばんは

※１度接続が確立されればデータがリアルタイムで送受信可能！※同じサーバに接続しているユーザはデータを共有する

ハンズオン２章-チャットを作ってみよう！-

#jjug_ccc #ccc_m3

チャットツールの作成内容２章

①WebSocketへの接続要求

⑥WebSocketコネクション切断

④メッセージ送信

⑤メッセージ受信

②WebSocketコネクション確立

③メッセージ受信時の挙動設定


Controller@MessageMapping("/message")@SendTo(value= "/topic/messages")

MessageBroker

/message

/app/message

ChatForm

@EnableWebSocketMessageBroker

/topic/messages

<dependencies>・・・・・省略・・・・・

<dependency><groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>・・・・・省略・・・・・

</dependencies>

２章pom.xml　の内容を確認する２章

<dependencies>・・・・・省略・・・・・

<dependency><groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>・・・・・省略・・・・・

</dependencies>

pom.xml　の内容を確認する

pom.xml３５行目あたり

WebSocketを利用するのに必要！！

２章

javajo.form > ChatForm.java ２章

public class ChatForm {

・・・・・省略・・・・・

}

public class ChatForm {

private String name;private String message;

・・・・・省略・・・・・

}


クライアントから受け取った値を格納する

フィールドを作成

public class ChatForm {・・・・・省略・・・・・

/**public String getName() {

return name;}

・・・・・省略・・・・・

public void setMessage(String message) {this.message = message;

}**/

}


フィールドにアクセスするgetter/setterを作成します


/**public String getName() {

return name;}

・・・・・省略・・・・・


}**/

}


すでに実装済みなので、コメントアウトを外す

だけでOK


public String getName() {return name;

}・・・・・省略・・・・・


}

}


すでに実装済みなので、コメントアウトを外す

だけでOK

public class StompConfig {

}

javajo.config > StompConfig.java ２章

クライアントからのメッセージを処理するクラスを作成します

public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer {

}


メッセージを処理する抽象クラスを継承

@Configuration


}


設定ファイルを表すアノテーションを付与

@Configuration@EnableWebSocketMessageBrokepublic class StompConfig extends AbstractWebSocketMessageBrokerConfigurer {

}


WebSocketを扱うのに必要なアノテーションを

付与


@Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); }

}


エンドポイントの登録メソッドを作成


ChatController@MessageMapping("/message")@SendTo(value= "/topic/messages")

MessageBroker

/message

/app/message@EnableWebSocketMessageBroker

/topic/messagesここを作るよ ChatForm


・・・・・省略(registerStompEndpointsの直後)・・・・・ @Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); }

}


メッセージブローカーの設定メソッドを作成







③メッセージ受信時の挙動設定ここを作るよ



MessageBroker

/message

/app/message

ChatForm

@EnableWebSocketMessageBroker

/topic/messages

ここを作るよ

public class ChatController {

ChatForm greet(ChatForm chatForm) { return chatForm; }}

javajo.controller > ChatController.java ２章

チャットのコントローラークラスを作成します

@RestControllerpublic class ChatController {



コントローラーのアノテーションを付与


@MessageMapping(value = "/message" )



メッセージを受け付けるMessageMappingを付与


@MessageMapping(value = "/message" ) @SendTo(value = "/topic/messages") ChatForm greet(ChatForm chatForm) { return chatForm; }}


処理結果を送信する宛先

SendToを付与








ここだよ

クライアント側（Stomp.js）２章

resources/static/js/Stomp.js

提供されているライブラリを使用詳しくは、http://jmesnil.net/stomp-websocket/doc/

クライアント側のメッセージ制御はJavaScriptライブラリを利用する

クライアント側（javajo.js）２章

ChatStomp.prototype.connect = function () { var socket = new WebSocket('ws://' + location.host + '/endpoint'); ・・・・・省略・・・・・

}; ２３行目


@Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); }

}


エンドポイントの登録メソッドを作成








ここだよ


ChatStomp.prototype.onConnected = function (frame) { console.log('Connected: ' + frame); this.stompClient.subscribe('/topic/messages',this.onSubscribeGreeting.bind(this));　this.setConnected(true);};

３４行目



}









③メッセージ受信時の挙動設定ここだよ


ここだよ


ChatStomp.prototype.sendName = function () { ・・・・・省略・・・・・

this.stompClient.send("/app/message", {},　　　JSON.stringify(json_message)); };

７３行目



}




@MessageMapping(value = "/message" )



メッセージを受け付けるMessageMappingを付与



MessageBroker

/message

/app/message@EnableWebSocketMessageBroker

/topic/messages

ChatForm








ここだよ


ChatStomp.prototype.disconnect = function () { if (this.stompClient) { this.stompClient.disconnect(); this.stompClient = null; } this.setConnected(false);};

８８行〜９４行目

ハンズオンはここまで！実際に動かしてみよう！

#jjug_ccc #ccc_m3

1. chat-exerciseのプロジェクトを実行！

2. http://localhost:8080/chat にアクセス！

ローカルで動かしてみようローカルで動かしてみよう

3. ユーザ名を入力してConnectボタンクリック！　

4.メッセージを入力してSendボタンをクリック！

#jjug_ccc #ccc_m3

まとめ

#jjug_ccc #ccc_m3

・「Hello World」を出力するアプリケーションをSpring Bootで作りました

・チャットを作りながらWebSocketについて学びました

まとめ#jjug_ccc #ccc_m3

お疲れ様でしたありがとうございました

【講師】ゆう・ちか【チューター】えりこ・あや・とぅん・よこな

#jjug_ccc #ccc_m3

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

Engineering

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