ในโครงการล่าสุดฉันต้องใช้คุณสมบัติใหม่ของ Java WebSocket ดังนั้นฉันจึงเรียนรู้และรู้สึกว่าเทคโนโลยีนี้ค่อนข้างสนุก ฉันรู้ทันทีว่าการบริการลูกค้าออนไลน์บนหน้าเว็บเสร็จสิ้นอย่างไร
มาดูภาพก่อน:
การสื่อสารแบบเรียลไทม์ระหว่างลูกค้าหลายรายเป็นจริง
มาดูไดอะแกรมโครงสร้างโครงการรหัส: มันง่ายมากเพียง 1 คลาสและ 1 หน้า
จากนั้นดูรหัสเฉพาะ
ดูรหัสแบ็กเอนด์ก่อน
แพ็คเกจ com.main; นำเข้า java.io.ioexception; นำเข้า java.util.concurrent.copyonwritearrayset; นำเข้า javax.websocket.*; นำเข้า Javax.websocket.server.serverendpoint;/*** @serverendpoint ฟังก์ชั่นส่วนใหญ่จะกำหนดคลาสปัจจุบันเป็นฝั่งเซิร์ฟเวอร์ WebSocket * ค่าคำอธิบายประกอบจะถูกใช้เพื่อฟังการเชื่อมต่อของผู้ใช้กับที่อยู่ URL การเข้าถึงเทอร์มินัล ไคลเอนต์สามารถเชื่อมต่อกับฝั่งเซิร์ฟเวอร์ WebSocket ผ่าน URL*/@ServerEndPoint ("/websocket") คลาสสาธารณะ H5ServletServersocket {// ตัวแปรคงที่ที่ใช้ในการบันทึกจำนวนการเชื่อมต่อออนไลน์ปัจจุบัน ควรได้รับการออกแบบให้มีความปลอดภัยด้าย INT onLinEcount ส่วนตัว = 0; // ชุดเธรดที่ปลอดภัยของแพ็คเกจพร้อมกันใช้เพื่อจัดเก็บวัตถุ mywebsocket ที่สอดคล้องกันของไคลเอนต์แต่ละตัว ในการตระหนักว่าเซิร์ฟเวอร์สื่อสารกับไคลเอนต์เดียวคุณสามารถใช้แผนที่เพื่อจัดเก็บโดยที่คีย์สามารถระบุ copyOnWriteArraySet ของผู้ใช้ส่วนตัว <H5ServletServersocket> webSocketSet = new CopyOnWriteArrayset <H5ServletServersOcket> (); // เซสชันการเชื่อมต่อที่มีลูกค้าบางรายจำเป็นต้องส่งข้อมูลไปยังเซสชันส่วนตัวของไคลเอนต์ /** * เมธอดสำหรับการเรียกการสร้างการเชื่อมต่อสำเร็จ * * @param เซสชัน * พารามิเตอร์ทางเลือก เซสชันคือเซสชันการเชื่อมต่อกับไคลเอนต์และจำเป็นต้องส่งข้อมูลไปยังไคลเอนต์ผ่านมัน*/ @onopen โมฆะสาธารณะ onopen (เซสชันเซสชัน) {this.session = เซสชัน; websocketSet.add (นี่); // addonlineCount () ในชุด; // เพิ่ม 1 หมายเลขออนไลน์ System.out.println ("มีการเชื่อมต่อใหม่ที่จะเข้าร่วม! จำนวนคนออนไลน์ปัจจุบันคือ" + getOnlinEcount ()); } / *** วิธีการเชื่อมต่อการโทรปิด* / @onclose โมฆะสาธารณะ onClose () {webSocketSet.remove (นี่); // ลบ subonLinEcount () ออกจากชุด; // ลบ subonLinEcount () จากชุด; // ลบหมายเลขออนไลน์โดย 1 หมายเลขออนไลน์ System.out.println ("มีการเชื่อมต่อปิดอยู่! จำนวนคนออนไลน์ปัจจุบันคือ" + getOnlinEcount ()); } / *** วิธีการเรียกหลังจากรับข้อความไคลเอนต์** ข้อความ @param* ข้อความที่ส่งโดยไคลเอนต์* @param เซสชัน* พารามิเตอร์ตัวเลือก* / @onmessage โมฆะสาธารณะ onMessage (ข้อความสตริงเซสชันเซสชัน) {System.out.println ("ข้อความจากไคลเอนต์:" + ข้อความ); // ข้อความจำนวนมากสำหรับ (h5servletserversocket item: websocketSet) {ลอง {item.sendMessage (ข้อความ); } catch (ioexception e) {e.printstacktrace (); ดำเนินการต่อ; }}}} / ** * เรียกว่าเมื่อเกิดข้อผิดพลาด * * @param เซสชัน * @param ข้อผิดพลาด * / @onerror โมฆะสาธารณะ onerror (เซสชันเซสชัน, ข้อผิดพลาดแบบโยนได้) {system.out.println ("เกิดข้อผิดพลาด"); Error.PrintStackTrace (); } /*** วิธีนี้แตกต่างจากวิธีการข้างต้น ไม่มีคำอธิบายประกอบเป็นวิธีที่เพิ่มตามความต้องการของคุณ * * @param message * @throws ioexception */ โมฆะสาธารณะ sendMessage (ข้อความสตริง) พ่น IOException {this.session.getBasicRemote (). sendText (ข้อความ); // this.session.getasyncremote (). sendtext (ข้อความ); } สาธารณะคงที่แบบคงที่ int getOnlineCount () {return onlinecount; } โมฆะแบบสแตติกแบบคงที่สาธารณะ addonlineCount () {H5ServletServersocket.onlinEcount ++; } โมฆะแบบสแตติกแบบคงที่สาธารณะ subonLineCount () {H5ServletServersocket.onlinecount--; -ถัดไปคือรหัสหน้าส่วนหน้า:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%String Path = request.getContextPath (); String basepath = request.getScheme () + ": //" + request.getServerName () + ":" + request.getServerport () + path + "/";%> <! doctype html> <html> <head> id = "ข้อความ" style = "สี: สีน้ำเงิน"> 【สถานะ】 </div> <br/> ชื่อเล่น <อินพุต id = "ชื่อผู้ใช้" type = "text" ต้องการ = "ต้องการ"/> <br> เนื้อหา <อินพุต id = "text" type = "ข้อความ"/> <br/> type = "text/javascript"> var webSocket = null; // ตัดสินว่าเบราว์เซอร์ปัจจุบันรองรับ websocket if ('websocket' ในหน้าต่าง) {websocket = ใหม่ websocket ("ws: //10.1.1.106: 8080/ซ็อกเก็ต/websocket"); } else {Alert ('ไม่รองรับ WebSocket!')} // วิธีการโทรกลับสำหรับข้อผิดพลาดในการเชื่อมต่อ websocket.onerror = function () {setMessageInnerHtml ("ข้อผิดพลาด"); - // วิธีการโทรกลับสำหรับการเชื่อมต่อที่ประสบความสำเร็จ webSocket.onopen = ฟังก์ชั่น (เหตุการณ์) {setMessageInnerHtml ("เปิดใช้งานห้องแชท"); } // วิธีการโทรกลับสำหรับการรับข้อความ webSocket.onMessage = function () {setMessageInnerHtml (event.data); } // การเชื่อมต่อวิธีการโทรกลับ callback websocket.onclose = function () {setMessageInnerhtml ("ปิดห้องแชท"); } // ฟังเหตุการณ์การปิดหน้าต่าง เมื่อปิดหน้าต่างให้ปิดการเชื่อมต่อ WebSocket อย่างแข็งขันเพื่อป้องกันไม่ให้หน้าต่างปิดก่อนที่การเชื่อมต่อจะถูกตัดการเชื่อมต่อและฝั่งเซิร์ฟเวอร์จะทำการยกเว้น window.onbeforeunload = function () {websocket.close (); } // แสดงข้อความบนเว็บเพจฟังก์ชั่น setMessageInnerHtml (innerhtml) {document.getElementById ('ข้อความ'). innerhtml + = innerhtml + '<br/>'; } // ปิดฟังก์ชั่นการเชื่อมต่อ closewebsocket () {websocket.close (); } // ส่งฟังก์ชั่นข้อความส่ง () {var username = document.getElementById ('ชื่อผู้ใช้') ค่า; var message = document.getElementById ('ข้อความ') ค่า; var msg = "【" + ชื่อผู้ใช้ + "] พูด:" + ข้อความ websocket.send (msg); } </script> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น