สร้างการเชื่อมต่อสองทางเดียวระหว่างไคลเอนต์และเซิร์ฟเวอร์ซึ่งหมายความว่าไคลเอนต์จำเป็นต้องส่งคำขอไปยังเซิร์ฟเวอร์เท่านั้นและเซิร์ฟเวอร์จะดำเนินการ สามารถรอเวลานี้เพื่อทำงานอื่น ๆ ต่อไปกระบวนการทั้งหมดเป็นแบบอะซิงโครนัส ในชุดบทเรียนนี้ผู้ใช้จะได้รับคำแนะนำให้ใช้การแยกวิเคราะห์ JSON API ใหม่ (JSR-353) ใน Java EE 7 ในคอนเทนเนอร์ Glassfish 4 และใช้ JQuery และ Bootstrap ร่วมกัน บทความนี้ต้องการให้ผู้อ่านมีความรู้หลักการพื้นฐานบางประการเกี่ยวกับ HTML 5 WebSocket
แผนผังการสืบพันธุ์
ก่อนอื่นให้ดูที่การเรนเดอร์หลังจากเสร็จสิ้นการสอนนี้ดังที่แสดงด้านล่าง:
การตระเตรียม
เรากำลังใช้ JDK 7 และ MAVN 3 เพื่อสร้างห้องสมุดก่อน
<properties> <fertorsed.dir> $ {Project.build.directory}/รับรอง <//endorsed.dir> <project.build.sourceencoding> utf-8 </project.build.so urceencoding> <Ederency> <sderctId> Javax </groupId> <ratifactId> Javaee-Api </artifactid> <sersion> 7.0 </Scope> <Scope> ให้ </scope> </derperency> ปลั๊กอิน> <plugin> <roupid> org.apache.maven.plugins </groupid> <ratifactid> maven-compiler-plugin </artifactid> <version> 3.1 </version> <การกำหนดค่า> > <target> 1.7 </sourcive> <polerArguments> <MondorSedDirs> $ {endorsed.dir} </endorsedDirs> </polerArguments> </การกำหนดค่า> </lugin> </groupId> <ratifactId> maven-war-plugin </artifactid> <sersion> 2.3 </เวอร์ชัน> <การกำหนดค่า> <failonmissingwebxml> false </aullonmissingwebxml> </configurati on> org.apacheในเวลาเดียวกันเพื่อใช้ Glassfish 4 ต้องเพิ่มปลั๊กอินต่อไปนี้:
ปลั๊กอิน> <roupId> org.glassfish.embedded </groupid> <ratifactid> maven-embedded-glassfish-plugin </artifactid> <sersion> 4.0 </เวอร์ชัน> <confi guration> <app> $ {Afflementir}/target/$ {project.artifactId}-$ {project.version} .war </app> <AutodeLete> True </utodelete> โครงการ. artifactid} </name> <contextroot> hascode </contextroot> </การกำหนดค่า> <cenections> <การดำเนินการ> <goals> <goal> การปรับใช้ </เป้าหมาย> </เป้าหมาย> </exe Cution> </ ปลั๊กอิน>การตั้งค่าจุดสิ้นสุดของ WebSocket
ก่อนอื่นให้ดูที่รหัสของ Server WebSocket ดังนี้จากนั้นทำการวิเคราะห์เพิ่มเติม:
com.hascode.tutorial; WebSocket .Onopen; decoders = chatMessagedEcoder.class) Public Class Chatendpoint {logger สุดท้าย logger สุดท้าย = logger.getLogger (getClass (). getName ()); {log. String Room = (String) Session.getUserProperties (). รับ ("ห้อง"); ). get ("room")) {s.getBasicRemote (). sendObject (chatMessage); }}ต่อไปนี้วิเคราะห์รหัสด้านบน:
ใช้ @ServerendPoint เพื่อกำหนดจุดสิ้นสุดใหม่ซึ่งค่าระบุ URL และสามารถใช้พารามิเตอร์ PathParams เช่นเดียวกับที่ใช้ใน JAX-RS
ดังนั้นค่า "/chat/{room}" อนุญาตให้ผู้ใช้เชื่อมต่อกับห้องแชทผ่าน URL ต่อไปนี้: ws: //0.0.0.0.0: 8080/hascode/chat/java
ค่าในวงเล็บปีกกา (เช่นห้อง) สามารถฉีดเป็นพารามิเตอร์ในวิธีการโทรกลับวงจรชีวิตของจุดสิ้นสุดโดยใช้ javax.websocket.server.pathparam
นอกจากนี้เราต้องการใช้คลาสที่เข้ารหัสและถอดรหัสเนื่องจากเราใช้คลาส DTO ที่ใช้ในการถ่ายโอนข้อมูลบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์
เมื่อผู้ใช้เชื่อมต่อกับเซิร์ฟเวอร์เป็นครั้งแรกและป้อนหมายเลขห้องเพื่อเข้าสู่ห้องแชทหมายเลขห้องจะถูกฉีดเข้าไปในการส่งในรูปแบบของพารามิเตอร์และค่าจะถูกบันทึกไว้ในแผนที่คุณสมบัติของผู้ใช้โดยใช้เซสชัน GetuserProperties
เมื่อผู้เข้าร่วมการแชทส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่านการเชื่อมต่อ TCP จะวนซ้ำผ่านเซสชันที่เปิดทั้งหมดแต่ละเซสชันจะถูกผูกไว้กับห้องแชทที่ระบุและรับข้อมูลที่เข้ารหัสและถอดรหัส
หากเราต้องการส่งข้อมูลข้อความหรือข้อมูลอย่างง่ายในรูปแบบไบนารีเราสามารถใช้ session.getBasicRemote (). sendbinary () หรือ session.getBasicRemote (). sendText ()
ถัดไปลองดูที่รหัสที่ใช้เพื่อแสดงถึงเอนทิตีการถ่ายโอนข้อมูล (DTO: วัตถุการถ่ายโอนข้อมูล) ดังนี้:
แพ็คเกจ com.hascode.tutorial;
การแปลงข้อความแชท
ในแอปพลิเคชันนี้คลาสการเข้ารหัสและการถอดรหัสจะถูกเขียนขึ้นเพื่อแปลงระหว่างข้อมูลการแชทและรูปแบบ JSON
ก่อนอื่นให้ดูที่การใช้งานคลาสการถอดรหัสซึ่งจะแปลงข้อมูลการแชทที่ส่งผ่านไปยังเซิร์ฟเวอร์ไปยังคลาส chatMessage Entity ที่นี่ข้อมูลจำเพาะ Java API สำหรับ JSON (JSR353) ใช้เพื่อแปลงข้อมูลรูปแบบ JSON เป็นคลาสเอนทิตี
com.hascode.tutorial; นำเข้า javax.websocket.endpointconfig; โยน decodeException {chatMessage chatMessage = new chatMessage (); GetString ("ผู้ส่ง"));มาดูรหัสของคลาสการเข้ารหัส
com.hascode.tutorial; เป็นโมฆะ init (final endpointconfig config) {} @Override โมฆะสาธารณะทำลาย () {} @Override สตริงสาธารณะเข้ารหัส (สุดท้าย chatMessage chatMessage) พ่น enco deexception {return json.createObjectBuilder () .ที่นี่คุณสามารถเห็นพลังอันทรงพลังของ JSR-353
สร้างไคลเอนต์ง่ายๆผ่าน bootstrap และ javacsript
ในที่สุดเราใช้ bootstrap ที่มีชื่อเสียง, JQuery Framework และ JavaScript เพื่อออกแบบไคลเอนต์ที่เรียบง่าย เราสร้างไฟล์ index.html ใหม่ในไดเรกทอรี SRC/Main/Weapp และรหัสมีดังนี้:
<! doctype html> <html lang = "en"> <head> [.. ] <script> var wsocket; var $ message; ); .Message + '</td> </tr>'); $ chatwindow.append ($ messageline); "," ผู้ส่ง ":" ' + $ nickname.val () +' "," ได้รับ ":" "} '; wsocket.send (msg); $ message.val (' '). focus ();} ฟังก์ชั่น ConnectTochatserver () {room = $ ('#chatroom ตัวเลือก: เลือก'). val (); $ chatwindow.empty (); function () {$ nickname = $ ('#nickname'); ; $ nickname.focus (); + $ nickname.val () + "@" + ห้อง); }); ) ::::::::::::::::::::::: กระทาน ::::::::::::::::::::::: กระทาน ::::::::::::::::::::::::::::::::::::::: หัวเครื่อง Form> <h2> แชทลงชื่อเข้าใช้ </h2> <label for = "nickname"> ชื่อเล่น </label> <อินพุต type = "text" placeholder = "nickname" id = "nickname"> <div> <label for = "chatroom"> chatroom </ label> <select size = "1" id = "chatroom"> <petion> arduino </::::::::::::::::::::::::::::::::::::::: กระทาน ::::::::::::::::::::::: กระทาน ::::::::::::::::::::::: กระทาน :::::: ตัวเลือก> <petion> java </opovie "> ลงชื่อเข้าใช้ </button> </form> </div> <!-/container-> <div> <form id =" do-chat "> <h2> </h2> <table id =" การตอบสนอง "> </ table> <fieldset> <legend> ป้อนข้อความของคุณ .. </ legend> <div> <อินพุต type =" text "placeholder =" ข้อความของคุณ ... "id =" message "style =" ความสูง : 60px "/> <อินพุต type =" ส่ง "value =" ส่งข้อความ "/> <button type =" button "id =" lead-room "> ออกจากห้อง </button> </div> </fieldset> < /form> </div> </body> </html>ในรหัสข้างต้นโปรดให้ความสนใจกับประเด็นต่อไปนี้:
หากคุณต้องการโทรหา WebSocket ทางด้าน JavaScript คุณต้องเริ่มต้นการเชื่อมต่อด้วยวิธีต่อไปนี้: WS: // IP: พอร์ต/context_path/Endpoint_url เช่น WS: //0.0.0.0: 8080/hascode/chat/java
วิธีการสร้างการเชื่อมต่อ WebSocket นั้นง่ายมากโดยใช้ var wsocket = ใหม่ websocket ('ws: //0.0.0.0: 8080/hascode/chat/java');
ในการรับข้อมูลที่ส่งคืนจากเซิร์ฟเวอร์คุณจะต้องตั้งค่าวิธีการที่สอดคล้องกันในการรับข้อมูลการส่งคืนในฟังก์ชั่นการโทรกลับ wsocket.onmessage
ส่งข้อความ WebSocket ไปยังเซิร์ฟเวอร์โดยใช้ WSOCKET.SEND () ซึ่งข้อความที่สามารถส่งสามารถเป็นข้อความหรือข้อมูลไบนารี
ในการปิดการเชื่อมต่อจะใช้ wsocket.close ()
ในที่สุดเราจะปรับใช้รหัสผ่านแพ็คเกจ MVN ที่ฝังตัวแก้ว: เรียกใช้แล้วเราจะเห็นผลของภาพหน้าจอที่จุดเริ่มต้นของบทความนี้
ข้างต้นเป็นห้องแชทที่ใช้งานโดยใช้ Javaee7, Websockets และ Glassfish4