يستمر تعلم الحذاء الربيعي. في المدونتين السابقتين ، قدمنا كيفية استخدام حاويات Boot Spring لإنشاء مشروع ويب وكيفية إضافة دعم HTTPS لمشروعنا. استنادًا إلى هاتين المادتين ، سنلقي نظرة على كيفية استخدام WebSocket في Spring Boot اليوم.
ما هو WebSocket
يوفر WebSocket وظيفة اتصال غير متزامنة Duplex بين المتصفح والخادم ، مما يعني أنه يمكننا استخدام المتصفح لإرسال رسائل إلى الخادم ، ويمكن للخادم أيضًا إرسال رسائل إلى المتصفح. في الوقت الحاضر ، يدعم الإصدار السائد من المتصفحات الرئيسية WebSocket ، لكن عبء استخدام WebSocket في التطوير الفعلي سيكون أكبر قليلاً ، وسيتم زيادة مشكلة توافق المتصفح. في هذا الوقت ، من المرجح أن نستخدم بروتوكول فرعي من WebSocket لتنفيذ وظائفنا بسرعة. حسنًا ، لن أقول الكثير عن WebSocket هنا ، فنحن ننظر بشكل أساسي في كيفية استخدامه.
إنشاء المشروع
يتطلب استخدام WebSocket منا إنشاء مشروع أولاً. طريقة إنشاء هذا المشروع هي نفس ما قلناه في المقالة السابقة (لقد تعلمت أولاً عن إطار عمل SPRING BOOT). الفرق هو أنه عند اختيار التبعية ، نختار تبعيات Thymeleaf و WebSocket ، كما هو موضح في الشكل أدناه:
تكوين WebSocket
بعد إنشاء المشروع بنجاح ، قمنا أولاً بتكوين WebSocket وإنشاء الفئة التالية:
@configuration @enableWebSocketMessageBrokerPublic Class WebSocketConfig يمتد AsscrentWebSocketMessagebrokERCONFIGURER } Override public void configureMessageBroker (سجل messageBrokerRegistry) {registry.enablesimpleBroker ("/topic") ؛ }}سأقول النقاط التالية حول هذه الفئة:
1@enableWebSocketMessageBroker التعليق التوضيحي يعني أن بروتوكول STOMP يتم تمكينه لنقل الرسائل المستندة إلى الوكيل. الوسيط يعني الوكيل.
2. تمثل طريقة registerStompendPoints العقدة التي تسجل بروتوكول STOMP وتحدد عنوان URL المعينة.
3.StompendPoinTregistry.addendpoint ("/endpointSang"). withsockjs () ؛ يتم استخدام سطر الكود هذا لتسجيل عقدة بروتوكول STOMP ويحدد أيضًا استخدام بروتوكول SockJS.
4. ConfiguremessageBroker تستخدم لتكوين وسيط الرسائل. نظرًا لأننا ننفذ وظيفة الدفع ، فإن وسيط الرسائل هنا هو /الموضوع
قم بإنشاء فئة استقبال للمتصفح لإرسال الرسائل
يتم استلام الرسائل المرسلة من المتصفح باستخدام هذه الفئة:
فئة عامة requestMessage {اسم السلسلة الخاصة ؛ السلسلة العامة getName () {return name ؛ }}إنشاء فئة رسالة استجابة
يتم نقل الرسالة التي يتم إرجاعها بواسطة الخادم إلى المتصفح بواسطة هذه الفئة:
استجابة الطبقة العامة {استجابة السلسلة الخاصة ؛ الاستجابة العامة (string rosseMessage) {this.responsemessage = roseseMessage ؛ } السلسلة العامة getResPonseMessage () {return rosseMessage ؛ }}إنشاء وحدة تحكم
ControllerPublic Class wsController {messageMapping ("/welcome") sendto ("/topic/getResponse") تقول الاستجابة العامة (رسالة requestMessage) {system.out.println (message.getName ()) ؛ إرجاع مسؤولية جديدة ("مرحبًا ،" + message.getName () + "!") ؛ }}فيما يتعلق بوحدة التحكم هذه ، أولاً وقبل كل شيء ، ليست هناك حاجة لقول الكثير عن شرح Controller. يشبه التعليق التوضيحي messagemapping المضافة على طريقة SAIN مع 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> broadcast websocket </title> <script th: src = "@{js/sockjs.min.js} Th: src = "{ks/stomp.js}"> </script> <script th: src = "{js/jquery-33.1.1.js}"> </script> </head> <body onload = "deconnect ()"> <noscript> WebSocket </h2> </script> <viv> <viv> <button id = "connect" onClick = "connect () ؛"> connect </button> <button id = "disconnect" disabled = "divabled" onclick = "deconnect () id = "sendName" onClick = "SendName () ؛"> إرسال </button> <p id = "response"> </p> </viv> </viv> <script type = "text/javaScript"> var stompclient = null ؛ دالة setConnected (متصلة) {document.getElementById ("connect"). معطل = متصل ؛ document.getElementById ("disconnect"). معطل =! متصل ؛ document.getElementById ("almatchdiv"). style.visibility = متصل؟ "مرئي": "Hidden" ؛ // $ ("#Connect"). تعطيل = متصل ؛ // $ ("#disconnect"). upabled =! connected ؛ $ ("#response"). html () ؛ } وظيفة connect () {var socket = new SockJs ('/endpointSang') ؛ stompclient = stomp.over (socket) ؛ stompclient.connect ({} ، الدالة (الإطار) {setConnected (true) ؛ console.log ('connected:' + frame) ؛ stompclient.subscribe ('/getResponse' ، function (response) {showresponse (json.parse (response.body) .responsemessage) ؛}) } وظيفة disonnect () {if (stompclient! = null) {stompclient.disconnect () ؛ } setConnected (false) ؛ console.log ('disconnected') ؛ } function sendName () {var name = $ ('#name'). val () ؛ console.log ('الاسم:' + name) ؛ stompclient.send ("/welcome" ، {} ، json.stringify ({'name': name})) ؛ } دالة showResponse (message) {$ ("#response"). html (message) ؛ } </script> </body> </html>على الرغم من وجود المزيد من التعليمات البرمجية هنا ، إلا أنه من السهل جدًا تحليلها بعناية. بادئ ذي بدء ، لن أتحدث عن الجزء الذي قدمه ملف JS. إذا كنت لا تفهمها هنا ، فيمكنك الرجوع إلى استخدام Spring Boot لتطوير مشروع ويب. ثم هناك زران على صفحتنا ، والآخر هو اتصال والآخر هو فصل. يتوافق الأزران مع أحداث نقرة مختلفة. يوجد مربع إدخال أسفل هذين الأزران ، وهو المحتوى الذي نريد إرساله ، ثم هناك زر إرسال. يتوافق زر الإرسال مع حدث نقرة لإرسال رسالة. هذا عنصر في الصفحة بأكملها ، بسيطة للغاية. دعنا نركز على رمز منطق JS هنا.
يتم تنفيذ طريقة الاتصال عند النقر فوق زر الاتصال. var socket = sockjs جديدة ('/endpointsang') ؛ يعني أن اسم نقطة النهاية لـ Sockjs المتصلة هو /endpointsang ، stompclient = stomp.over (socket) ؛ يعني أن استخدام STOMP لإنشاء عميل WebSocket. ثم استدعاء طريقة الاتصال في StompClient للاتصال بالخادم. بعد نجاح الاتصال ، اتصل بالطريقة setConnected ، التي تخفي المخفية وتعرض المعروضة. بعد ذلك ، من خلال استدعاء طريقة الاشتراك في stompclient للاشتراك في الرسالة المرسلة بواسطة /topic /getResponse ، أي معلمة التعليقات التوضيحية sendto التي أضفناها إلى طريقة say في وحدة التحكم. تعني طريقة الإرسال في StompClient إرسال رسالة إلى الخادم ، والباقي كلها استخدامات JS العادية. لن أكررها.
تكوين ViewController
التالي هو توفير خرائط المسار لـ WS.HTML:
ConfigurationPublic Class WebMvcConfig يمتد WebMVCConfigureRadapter {Override public void addviewControllers (ViewControllerRegistry Recistry) {registry.addviewController ("/WS"). setViewName ("/ws") ؛ }}حسنًا ، بعد القيام بكل هذا ، يمكننا تشغيل المشروع. أفتح متصفحات متعددة في نفس الوقت وأرسل رسالة على أحدها. دعونا نرى النتائج:
أرسل رسائل على المتصفح العلوي ويتلقى كلا المتصفحات الأخرى رسائل مني.
حسنًا ، ما ورد أعلاه هو العملية الكاملة لاستخدام WebSocket لتنفيذ Push Message تحت إطار Boot Spring.
تنزيل عنوان هذه الحالة: العرض التوضيحي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.