การเรียนรู้การบูตฤดูใบไม้ผลิยังคงดำเนินต่อไป ในสองบล็อกก่อนหน้านี้เราได้แนะนำวิธีใช้คอนเทนเนอร์สปริงบูตเพื่อสร้างโครงการเว็บและวิธีเพิ่มการสนับสนุน HTTPS ในโครงการของเรา จากบทความทั้งสองนี้เราจะดูวิธีการใช้ WebSocket ใน Spring Boot วันนี้
WebSocket คืออะไร
WebSocket ให้ฟังก์ชั่นการสื่อสารแบบอะซิงโครนัสแบบเพล็กซ์ระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ซึ่งหมายความว่าเราสามารถใช้เบราว์เซอร์เพื่อส่งข้อความไปยังเซิร์ฟเวอร์และเซิร์ฟเวอร์ยังสามารถส่งข้อความไปยังเบราว์เซอร์ ในปัจจุบันเบราว์เซอร์กระแสหลักรุ่นหลักรองรับ WebSocket แต่ภาระงานของการใช้ WebSocket ในการพัฒนาจริงจะมีขนาดใหญ่ขึ้นเล็กน้อยและปัญหาความเข้ากันได้ของเบราว์เซอร์จะเพิ่มขึ้น ในเวลานี้เรามีแนวโน้มที่จะใช้โปรโตคอลย่อยของ WebSocket เพื่อใช้งานฟังก์ชั่นของเราอย่างรวดเร็ว ตกลงฉันจะไม่พูดอะไรมากเกี่ยวกับ WebSocket ที่นี่เราส่วนใหญ่ดูวิธีการใช้งาน
การสร้างโครงการ
การใช้ WebSocket ต้องการให้เราสร้างโครงการก่อน วิธีการสร้างของโครงการนี้เหมือนกับที่เราพูดในบทความก่อนหน้า (ฉันเรียนรู้เกี่ยวกับกรอบการบูต Spring ก่อน) ความแตกต่างคือเมื่อเลือกการพึ่งพาเราเลือกการพึ่งพา thymeleaf และ websocket ดังแสดงในรูปด้านล่าง:
การกำหนดค่า WebSocket
หลังจากสร้างโครงการเรียบร้อยแล้วเราจะกำหนดค่า WebSocket ก่อนและสร้างคลาสต่อไปนี้:
@การกำหนดค่า @enableWebSocketMessageBrokerPublic คลาส WebSocketConfig ขยาย AbstractWebSocketMessageBrokerConFigurer {@Override โมฆะสาธารณะ RegisterStEmpendpoints (stompendPointregistry stompendPoinTregistry) } @Override โมฆะสาธารณะ configureMessageBroker (MessageBrokerRegistry Registry) {registry.enablesImpleBroker ("/topic"); -ฉันจะพูดประเด็นต่อไปนี้เกี่ยวกับหมวดหมู่นี้:
1@enableWebSocketMessagebroker คำอธิบายประกอบหมายความว่าโปรโตคอล STOMP ถูกเปิดใช้งานเพื่อส่งข้อความตามพร็อกซี นายหน้าหมายถึงพร็อกซี
2. วิธี RegisterStempendpoints แสดงถึงโหนดที่ลงทะเบียนโปรโตคอล Stomp และระบุ URL ที่แมป
3.StompendPoInTregistry.addendpoint ("/EndpointSang"). withsockjs (); บรรทัดของรหัสนี้ใช้เพื่อลงทะเบียนโหนดโปรโตคอล STOMP และยังระบุการใช้โปรโตคอล SOCKJS
4.ConfigureMessageBroker ใช้วิธีการกำหนดค่านายหน้าข้อความ เนื่องจากเราใช้ฟังก์ชั่นพุชนายหน้าข้อความนี่คือ /หัวข้อ
สร้างคลาสรับสำหรับเบราว์เซอร์เพื่อส่งข้อความ
ได้รับข้อความที่ส่งโดยเบราว์เซอร์โดยใช้คลาสนี้:
Public Class RequestMessage {ชื่อสตริงส่วนตัว; สตริงสาธารณะ getName () {ชื่อคืน; -สร้างคลาสข้อความตอบกลับ
ข้อความที่ส่งคืนโดยเซิร์ฟเวอร์ไปยังเบราว์เซอร์จะดำเนินการโดยคลาสนี้:
การตอบสนองระดับสาธารณะ {การตอบสนองสตริงส่วนตัว; การตอบสนองสาธารณะ (การตอบสนองสตริง) {this.responsEmessage = ResponsEmessage; } สตริงสาธารณะ getResponSeMessage () {return responsemessage; -สร้างคอนโทรลเลอร์
@ControllerPublic คลาส WSCONTROLLER {@MessAgEmapping ("/ยินดีต้อนรับ") @Sendto ("/หัวข้อ/getResponse") การตอบสนองสาธารณะบอกว่า (ข้อความร้องขอข้อความ) {System.out.println (message.getName ()); ส่งคืนคำตอบใหม่ ("ยินดีต้อนรับ" + message.getName () + "!"); -เกี่ยวกับคอนโทรลเลอร์นี้ก่อนอื่นไม่จำเป็นต้องพูดอะไรมากมายเกี่ยวกับคำอธิบายประกอบ @Controller คำอธิบายประกอบ @MessAgEmapping ที่เพิ่มเข้ามาในวิธีการพูดนั้นคล้ายกับ @RequestMapping ที่เราใช้มาก่อน @Sendto คำอธิบายประกอบหมายความว่าเมื่อเซิร์ฟเวอร์มีข้อความที่จำเป็นต้องส่งข้อความจะถูกส่งไปยังเบราว์เซอร์ที่สมัครรับพา ธ ใน @Sendto
เพิ่มสคริปต์
ในกรณีนี้เราต้องการไฟล์สคริปต์ JS สามไฟล์คือสคริปต์สคริปต์ stomp.js ของโปรโตคอล Stomp, Sock.js สคริปต์ไคลเอนต์ของ Sockjs และ jQuery ไฟล์ JS ทั้งสามนี้ถูกคัดลอกไปยังไดเรกทอรี SRC/Main/Resources/Static/JS ตกลงฉันได้เตรียมไฟล์ JS ทั้งสามนี้ให้กับเพื่อนของฉัน คุณสามารถดาวน์โหลดเคสได้โดยตรงในตอนท้ายของบทความ มีบางกรณีในกรณีหรือคุณสามารถดาวน์โหลดไฟล์ JS ทั้งสามนี้ได้ด้วยตัวเอง
หน้าสาธิต
ก่อนที่จะเขียนหน้า HTML นี้ฉันต้องการพูดคุยเกี่ยวกับผลกระทบที่เราพยายามทำคืออะไร หลังจากเริ่มโครงการของฉันฉันเข้าถึงหน้าส่งข้อความในเบราว์เซอร์และส่งข้อความในหน้านั้น เมื่อเซิร์ฟเวอร์ได้รับข้อความนี้ข้อความจะถูกส่งไปยังเบราว์เซอร์ทั้งหมดที่เชื่อมต่อกับเซิร์ฟเวอร์ ตกลงเราสร้างหน้า Ws.HTML ใหม่ในไดเรกทอรี SRC/Main/Resources/Templates ด้วยเนื้อหาต่อไปนี้:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> ออกอากาศ websocket </title> th: src = "@{js/stomp.js}"> </script> <สคริปต์ th: src = "@{js/jQuery-3.1.1.js}"> </script> </head> WebSocket </h2> </noscript> <div> <div> <ปุ่ม id = "เชื่อมต่อ" onClick = "เชื่อมต่อ ();"> เชื่อมต่อ </button> <ปุ่ม id = "disconnect" ปิดใช้งาน = "ปิดใช้งาน" onClick = "disconnect (); id = "name"/> <button id = "sendName" onClick = "sendName ();"> ส่ง </button> <p id = "การตอบสนอง"> </p> </div> </div> <script type = "text/javascript"> var stompclient = null; function setConnected (เชื่อมต่อ) {document.getElementById ("เชื่อมต่อ") ปิดใช้งาน = เชื่อมต่อ; document.getElementById ("ตัดการเชื่อมต่อ"). disabled =! เชื่อมต่อ; document.getElementById ("ConversationDiv"). style.visibility = เชื่อมต่อ? 'มองเห็น': 'ซ่อน'; // $ ("#connect"). disabled = Connected; // $ ("#disconnect"). disabled =! เชื่อมต่อ; $ ("#response"). html (); } function connect () {var socket = sockjs ใหม่ ('/endpointsang'); stompclient = stomp.over (ซ็อกเก็ต); stompclient.connect ({}, ฟังก์ชั่น (เฟรม) {setConnected (จริง); console.log ('เชื่อมต่อ:' + เฟรม); stompclient.subscribe ('/topic/getResponse', ฟังก์ชั่น (การตอบสนอง) {showResponse (json.parse (response.body) } ฟังก์ชั่น disconnect () {ถ้า (stompclient! = null) {stompclient.disconnect (); } setConnected (เท็จ); console.log ('ตัดการเชื่อมต่อ'); } function sendName () {var name = $ ('#name'). val (); console.log ('ชื่อ:' + ชื่อ); stompclient.send ("/welcome", {}, json.stringify ({'name': name})); } function showResponse (ข้อความ) {$ ("#response"). html (ข้อความ); } </script> </body> </html>แม้ว่าจะมีรหัสอีกเล็กน้อยที่นี่ แต่ก็ง่ายมากที่จะวิเคราะห์อย่างระมัดระวัง ก่อนอื่นฉันจะไม่พูดถึงส่วนที่แนะนำโดยไฟล์ JS หากคุณไม่เข้าใจที่นี่คุณสามารถอ้างถึงการใช้ Spring Boot เพื่อพัฒนาโครงการเว็บ จากนั้นมีสองปุ่มในหน้าของเราหนึ่งคือการเชื่อมต่อและอีกปุ่มหนึ่งคือการขาดการเชื่อมต่อ ปุ่มสองปุ่มสอดคล้องกับเหตุการณ์การคลิกที่แตกต่างกัน มีกล่องอินพุตด้านล่างปุ่มสองปุ่มนี้ซึ่งเป็นเนื้อหาที่เราต้องการส่งและจากนั้นมีปุ่มส่ง ปุ่มส่งสอดคล้องกับเหตุการณ์คลิกเพื่อส่งข้อความ นี่คือองค์ประกอบของทั้งหน้าง่ายมาก มามุ่งเน้นไปที่รหัสลอจิก JS ที่นี่
วิธีการเชื่อมต่อจะดำเนินการเมื่อฉันคลิกปุ่มเชื่อมต่อ var socket = sockjs ใหม่ ('/endpointsang'); หมายความว่าชื่อจุดสิ้นสุดของ sockjs ที่เชื่อมต่อคือ /endpointsang, stompclient = stomp.over (ซ็อกเก็ต); หมายความว่าการใช้ Stomp เพื่อสร้างไคลเอนต์ WebSocket จากนั้นเรียกใช้วิธีการเชื่อมต่อใน stompclient เพื่อเชื่อมต่อกับเซิร์ฟเวอร์ หลังจากการเชื่อมต่อสำเร็จแล้วให้เรียกใช้วิธีการที่เชื่อมต่อซึ่งซ่อนตัวที่ซ่อนไว้และแสดงผลที่แสดง จากนั้นโดยการเรียกใช้วิธีการสมัครสมาชิกใน stompclient เพื่อสมัครรับข้อความที่ส่งโดย /หัวข้อ /getResponse นั่นคือพารามิเตอร์ของคำอธิบายประกอบ @Sendto ที่เราเพิ่มลงในวิธีการพูดในคอนโทรลเลอร์ วิธีการส่งใน stompclient หมายถึงการส่งข้อความไปยังเซิร์ฟเวอร์และส่วนที่เหลือคือการใช้งาน JS ปกติทั้งหมด ฉันจะไม่ทำซ้ำ
กำหนดค่า ViewController
ถัดไปคือการจัดทำแผนที่เส้นทางสำหรับ ws.html:
@ConfigurationPublic คลาส WebMVCCONFIG ขยาย WebMVCCONFigurerAdapter {@Override โมฆะสาธารณะ AddViewControllers (ViewControllerRegistry Registry) {registry.addviewController ("/ws"). setViewName ("/ws"); -ตกลงหลังจากทำทั้งหมดนี้เราสามารถเรียกใช้โครงการได้ ฉันเปิดเบราว์เซอร์หลายตัวในเวลาเดียวกันและส่งข้อความไปที่หนึ่งของพวกเขา มาดูผลลัพธ์:
ฉันส่งข้อความบนเบราว์เซอร์ด้านบนและเบราว์เซอร์อื่น ๆ ทั้งสองได้รับข้อความจากฉัน
ตกลงข้างต้นเป็นกระบวนการทั้งหมดของการใช้ WebSocket เพื่อใช้การกดข้อความภายใต้กรอบการบูต Spring
ดาวน์โหลดที่อยู่ของกรณีนี้: ตัวอย่าง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น