1. omix222

    No comment

    omix222
Changes in body
Source | HTML | Preview
@@ -2,22 +2,22 @@
SpringBootでWebSocket通信ってどうやるのか、気になったのでやってみました。
さすがにBoot、驚くほど簡単に実現できます。
WebSocketといえばチャットアプリですので、チャットアプリを作っていきます。
認証やDB永続化などはしない、極力シンプルなものです。
-## やり方
+# やり方
順番に実施していきます。
-### プロジェクトテンプレート作成
+## プロジェクトテンプレート作成
[Spring Initializr](https://start.spring.io/) で作ります。
<img width="1134" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/29b859db-37ba-0d06-80e9-b6a1c782cad0.png">
基本はデフォルトのままで、Dependenciesに WebSocketを追加だけしてGENERATEします。
-### 依存ライブラリ追加
+## 依存ライブラリ追加
Dependenciesに WebSocketを追加しても足りない依存ライブラリを追加します。
今回は以下を追加しました。
@@ -48,11 +48,11 @@
</dependency>
```
追加したのはWebJarsです。JavaScript や CSS などのフロントサイドのライブラリの依存関係を、javaのライブラリと同様に Maven(Gradle)で管理できるようになった仕組みです。
BootStrapやJQueryなど、おなじみのJavaScriptやCSSのライブラリを取得することができます。
-### バックエンドの準備
+## バックエンドの準備
最初に、ブラウザとアプリで通信してやりとりするクラスを作ります。こちらは上り(クライアントからのリクエスト)です。
今回はHelloMessage.javaとします。
nameとmessageを持つただのBeanです。
@@ -165,11 +165,11 @@
onfig.setApplicationDestinationPrefixesで送付先のプレフィックスを定義しています。
registry.addEndpoint("/gs-guide-websocket").withSockJS(); のところは
クライアント側から最初にWebSocketを繋ぐ際のつなぎ先(エンドポイント)を定義しています。
-### フロント側の準備
+## フロント側の準備
<img width="306" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113217/c9a71fcb-07e9-ac35-d0f5-3cf71a592fb1.png">
静的ファイルでよいので、main/resources/static フォルダを作り
HTMLファイル、そこから使われるJavaScriptとCSSを作ります。