春のブート学習は続きます。前の2つのブログでは、Spring Bootコンテナを使用してWebプロジェクトを構築する方法と、プロジェクトにHTTPSサポートを追加する方法を紹介しました。これら2つの記事に基づいて、今日Spring BootでWebSocketを使用する方法をご覧ください。
WebSocketとは何ですか
WebSocketは、ブラウザとサーバー間のデュプレックスの非同期通信機能を提供します。つまり、ブラウザを使用してサーバーにメッセージを送信することができ、サーバーはブラウザにメッセージを送信することもできます。現在、メインストリームブラウザの主流バージョンはWebSocketをサポートしていますが、実際の開発でWebSocketを使用するワークロードはわずかに大きくなり、ブラウザの互換性の問題が増加します。現時点では、WebSocketのサブプロトコルを使用して機能を迅速に実装する可能性が高くなります。 OK、ここでWebSocketについてはあまり言いません。主にそれをどのように使用するかを見ています。
プロジェクトの作成
WebSocketを使用するには、最初にプロジェクトを作成する必要があります。このプロジェクトの作成方法は、前の記事で言ったことと同じです（最初にSpring Boot Frameworkについて学びます）。違いは、依存関係を選択するときに、下の図に示すように、ThymeLeafおよびWebSocket依存関係を選択することです。
WebSocketの構成
プロジェクトが正常に作成された後、最初にWebSocketを構成し、次のクラスを作成します。
@configuration @enablewebsocketmessagebrokerpublic class websocketconfig extends abstractwebsocketmessagebrokerconfigurer {@override public void registerstompendpoints（stompendpointristry stompendpointregistry）{stompendpointregistry.addendpoint（ "/endpointsang（ } @Override public void configuremessagebroker（messagebrokerregistry registry）{registry.enablesimplebroker（ "/topic"）; }}このカテゴリについて次のポイントを言います。
1@EnableWebsocketMessageBrokerアノテーションとは、Stompプロトコルがプロキシベースのメッセージを送信できることを意味します。ブローカーはプロキシを意味します。
2。RegisterStompendPointsメソッドは、STOMPプロトコルを登録し、マッピングされたURLを指定するノードを表します。
3.StompendPointregistry.addendpoint（ "/endpointsang"）。withsockjs（）;このコード行は、Stompプロトコルノードの登録に使用され、SockJSプロトコルの使用も指定します。
4.ConfigureMessageBrokerメソッドは、メッセージブローカーの構成に使用されます。プッシュ関数を実装するため、ここのメッセージブローカーは /トピックです
ブラウザの受信クラスを作成してメッセージを送信する
ブラウザから送信されたメッセージは、このクラスを使用して受信されます。
public class requestmessage {private string name; public string getName（）{return name; }}応答メッセージクラスを作成します
サーバーによってブラウザに返されたメッセージは、このクラスによって実行されます。
パブリッククラスのResponsemessage {private string Responsemessage; public Responsemessage（String ResponseMessage）{this.responsemessage = responsemessage; } public string getResponseMessage（）{return ressonsemessage; }}コントローラーを作成します
@controllerpublic class wscontroller {@messagemapping（ "/welcome"）@sendto（ "/topic/getResponse"）public responsemessage（requestmessage message）{system.out.println（mesage.getname（））;新しいResponsemessage（ "Welcome、" + message.getName（） + "！"）; }}このコントローラーに関しては、@Controllerアノテーションについて多くのことを言う必要はありません。 sayメソッドに追加された@messagemappingアノテーションは、以前に使用した@requestmappingに似ています。 @sendto annotationは、サーバーにプッシュする必要があるメッセージがある場合、@sendtoのパスにサブスクライブされたブラウザにメッセージが送信されることを意味します。
スクリプトを追加します
この場合、3つのJSスクリプトファイル、つまりクライアントスクリプトStomp.jsのStompプロトコル、SockjsおよびjQueryのクライアントスクリプトSock.jsが必要です。これらの3つのJSファイルは、SRC/Main/Resources/Static/JSディレクトリにコピーされます。わかりました、私は友達のためにこれらの3つのJSファイルを準備しました。記事の最後に、ケースを直接ダウンロードできます。ケースにはケースがあります。または、これら3つのJSファイルを自分でダウンロードすることもできます。
デモページ
このHTMLページを書く前に、私たちが達成しようとしている効果が何であるかについて最初に話したいと思います。プロジェクトが開始された後、ブラウザ内のメッセージ送信ページにアクセスし、そのページにメッセージを送信します。サーバーがこのメッセージを受信すると、メッセージがサーバーに接続されているすべてのブラウザに送信されます。 OK、次のコンテンツを使用して、SRC/Main/Resources/Templatesディレクトリで新しいws.htmlページを作成します。
<html lang = "en" xmlns：th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> broadcast websocket </title> <スクリプトTh：src = "@{js/sockjs.min.js}"> </script> <スクリプト> Th：src = "@{js/stomp.js}"> </script> <script th：src = "@{js/jquery-3.1.1.js}"> </script> </head> <body onload = "disconnect（）"> <noscript> <h2スタイル= " webSocket </h2> </noscript> <div> <div> <button id = "connect" onclick = "connect（）;"> connect </button> <button id = "disconnect" disabled "onclick =" disconnect（）; "> disconnect </button </button> </div> <div =" convertip> " id = "sendname" onclick = "sendname（）;"> send </button> <p id = "response"> </p> </div> </div> <script = "text/javascript"> var stompclient = null; function setConnected（connected）{document.getElementById（ "connect"）。disabled = connected; document.getElementById（ "disconnect"）。disabled =！connected; document.getElementById（ "ConversationDiv"）。style.visibility = connected？ 'Visible'： 'hidden'; // $（ "＃connect"）。disabled = connected; // $（ "＃disconnect"）。disabled =！connected; $（ "＃response"）。html（）; } function connect（）{var socket = new sockjs（ '/endpointsang'）; stompclient = stomp.over（socket）; stompclient.connect（{}、function（frame）{setConnected（true）; console.log（ 'connected：' + frame）; stompclient.subscribe（ '/topic/getResponse'、function（response）{showResponse（json.parse（respons.body）.responsemage）;}）; } function disconnect（）{if（stompclient！= null）{stompclient.disconnect（）; } setConnected（false）; console.log（ 'disconnected'）; } function sendname（）{var name = $（ '＃name'）。val（）; console.log（ 'name：' + name）; stompclient.send（ "/welcome"、{}、json.stringify（{'name'：name}））; }関数showResponse（message）{$（ "＃response"）。html（message）; } </script> </body> </html>ここにはもう少しコードがありますが、注意深く分析するのは非常に簡単です。まず、JSファイルによって導入されたパートについては話しません。ここでそれを理解していない場合は、Spring Bootを使用してWebプロジェクトを開発することを参照できます。次に、ページに2つのボタンがあり、1つは接続で、もう1つは切断です。 2つのボタンは、異なるクリックイベントに対応しています。これらの2つのボタンの下には入力ボックスがあり、これが送信したいコンテンツで、送信ボタンがあります。送信ボタンは、メッセージを送信するためのクリックイベントに対応します。これはページ全体の要素であり、非常にシンプルです。ここでJSロジックコードに焦点を当てましょう。
接続メソッドは、[接続]ボタンをクリックすると実行されます。 var socket = new Sockjs（ '/endpointsang'）;接続されたソックJSのエンドポイント名は /endpointsang、stompclient = stomp.over（socket）; Stompを使用してWebsocketクライアントを作成することを意味します。次に、StompclientのConnectメソッドを呼び出してサーバーに接続します。接続が成功したら、setConnectedメソッドを呼び出します。次に、stompclientのサブスクライブメソッドを呼び出して、 /topic /getResponseで送信されたメッセージ、つまりコントローラーのSayメソッドに追加した@sendto annotationのパラメーターをサブスクライブします。 Stompclientの送信方法は、サーバーにメッセージを送信することを意味し、残りはすべて通常のJS使用です。繰り返しません。
viewcontrollerを構成します
次は、ws.htmlのパスマップを提供することです。
@configurationpublic class webmvcconfig extends webmvcconfigureradapter {@override public addviewcontrollers（viewcontrollerregistry registry）{registry.addviewcontroller（ "/ws"）。setViewName（ "/ws"）; }}OK、これをすべて行った後、プロジェクトを実行できます。複数のブラウザを同時に開き、そのうちの1つにメッセージを送信します。結果を見てみましょう：
私はトップブラウザでメッセージを送信し、他のブラウザの両方が私からメッセージを受信します。
OK、上記はWebSocketを使用してSpring Boot Frameworkの下にメッセージプッシュを実装するプロセス全体です。
このケースのアドレスをダウンロード：デモ
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。