ก่อนที่จะแนะนำข้อความหลักให้ฉันแนะนำพื้นหลังและหลักการของ WebSocket ให้คุณ:
พื้นหลัง
การสื่อสารทางเดียวเท่านั้นที่สามารถทำได้ผ่าน HTTP ในเบราว์เซอร์ ดาวหางสามารถจำลองการสื่อสารสองทางในระดับหนึ่ง แต่มีประสิทธิภาพต่ำและต้องการการสนับสนุนที่ดีจากเซิร์ฟเวอร์ ซ็อกเก็ตและ XMLSocket ในแฟลชสามารถตระหนักถึงการสื่อสารสองทางที่แท้จริงและฟังก์ชั่นทั้งสองนี้สามารถใช้ใน JavaScript ผ่าน Flex Ajax Bridge อาจเป็นไปได้ว่าหาก WebSocket ถูกนำไปใช้ในเบราว์เซอร์มันจะแทนที่เทคโนโลยีสองประการข้างต้นและใช้กันอย่างแพร่หลาย เมื่อเผชิญกับสถานการณ์นี้ HTML5 กำหนดโปรโตคอล WebSocket ซึ่งสามารถประหยัดทรัพยากรเซิร์ฟเวอร์และแบนด์วิดท์ได้ดีขึ้นและบรรลุการสื่อสารแบบเรียลไทม์
โปรโตคอล WebSocket ยังใช้ใน Javaee7
หลักการ
โปรโตคอล WebSocket
ทุกวันนี้เพื่อตระหนักถึงการสื่อสารทันทีเว็บไซต์หลายแห่งใช้การสำรวจ การสำรวจคือการส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ในช่วงเวลาที่กำหนด (เช่นทุก ๆ 1 วินาที) และเซิร์ฟเวอร์ส่งคืนข้อมูลล่าสุดไปยังเบราว์เซอร์ของลูกค้า รูปแบบการร้องขอ HTTP แบบดั้งเดิมนี้นำมาซึ่งข้อเสียที่ชัดเจน เบราว์เซอร์ต้องร้องขอไปยังเซิร์ฟเวอร์อย่างต่อเนื่อง อย่างไรก็ตามส่วนหัวของคำขอ HTTP นั้นยาวมากและข้อมูลที่เป็นประโยชน์ที่มีอยู่ในนั้นอาจเป็นเพียงค่าเล็กน้อยซึ่งจะครอบครองแบนด์วิดท์จำนวนมาก
ผลกระทบของเทคโนโลยีใหม่ในการทำโพลคือดาวหางใช้ AJAX อย่างไรก็ตามแม้ว่าเทคโนโลยีนี้สามารถบรรลุการสื่อสารแบบฟูลเพล็กซ์ แต่ก็ยังต้องมีการร้องขอ
ใน WebSocket API เบราว์เซอร์และเซิร์ฟเวอร์จะต้องจับมือกันเท่านั้นและจากนั้นช่องทางที่รวดเร็วจะเกิดขึ้นระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ ข้อมูลสามารถส่งโดยตรงระหว่างทั้งสอง ในโปรโตคอล WebSocket นี้เรามีประโยชน์หลักสองประการในการใช้บริการทันที:
1. ส่วนหัว
ส่วนหัวที่สื่อสารกันมีขนาดเล็กมาก - อาจมีเพียง 2 ไบต์
2. เซิร์ฟเวอร์พุช
เมื่อผลักดันโดยเซิร์ฟเวอร์เซิร์ฟเวอร์จะไม่ได้รับคำขอของเบราว์เซอร์อีกต่อไปก่อนที่จะส่งคืนข้อมูล แต่จะผลักดันไปยังเบราว์เซอร์เมื่อมีข้อมูลใหม่
1. การแนะนำโครงการ
WebSocket เป็นโปรโตคอลใหม่ใน HTML5 ใช้การสื่อสารแบบดูเพล็กซ์อย่างเต็มรูปแบบระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ ที่นี่ WebSocket จะใช้ในการพัฒนาห้องแชทบนเว็บ เฟรมเวิร์กส่วนหน้าจะใช้ Amazeui, Java ในพื้นหลังและ Umeditor ในตัวแก้ไข
2. เกี่ยวข้องกับคะแนนความรู้
Web Front-end (HTML+CSS+JS) และ Java
3. สภาพแวดล้อมซอฟต์แวร์ Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. ภาพหน้าจอเอฟเฟกต์
ผล 1
ผล 2
5. การต่อสู้เชิงปฏิบัติของโครงการ
1. สร้างโครงการใหม่
เปิด eclipse javaee สร้างโครงการเว็บแบบไดนามิกใหม่ชื่อแชทจากนั้นนำเข้าแพ็คเกจที่จำเป็นในการประมวลผลสตริงรูปแบบ JSON, วางคอมมอนส์เบนินทิลส์ -1.8.0.JAR, คอมมอนส์-คอลเลคชั่น -3.2.1.JAR, Commons-Lang-2.5.JAR แพ็คเกจอื่น ๆ จะถูกวางไว้ในไดเรกทอรี WebContent/Web-Inf/LIB และในที่สุดก็เผยแพร่โครงการไปยังเซิร์ฟเวอร์ Tomcat ณ จุดนี้โครงการว่างจะเสร็จสมบูรณ์
2. หน้าเขียนหน้าส่วนหน้า
สร้างหน้าใหม่ชื่อ index.jsp ในไดเรกทอรีเว็บ เฟรมเวิร์ก Amazeui ใช้ที่นี่ มันเป็นเฟรมเวิร์ก Front-End แบบปรับหน้าจอ กล่องอินพุตข้อความใช้ Umeditor ซึ่งเป็นตัวแก้ไขข้อความออนไลน์ที่หลากหลายซึ่งสามารถทำให้เนื้อหาข้อความของเรามีสีสัน
ก่อนอื่นให้ดาวน์โหลดแพ็คเกจที่บีบอัดจากเว็บไซต์ทางการของ Amazeui จากนั้นคลายโฟลเดอร์สินทรัพย์และคัดลอกไดเรกทอรีเว็บคอนตินท์เพื่อให้เราสามารถใช้ Amazeui ได้
จากนั้นดาวน์โหลดแพ็คเกจการบีบอัดเวอร์ชัน JSP เวอร์ชัน MINI จากเว็บไซต์ทางการ UEDITER, คลายซิปไดเรกทอรีทั้งหมดลงในไดเรกทอรีเว็บคอนเทนโบกและจากนั้นคุณสามารถเขียนรหัสส่วนหน้ารหัสมีดังนี้ (คุณสามารถเขียนได้ตามความชอบของคุณ):
<%@ page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html> <html lang = "zh"> <head> name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, ระดับสูงสุด = 1, ผู้ใช้-scalable = no"> <title> shiyanlou แชท </title> <!-ตั้งค่าเครื่องยนต์สำหรับ 360 เบราว์เซอร์-> <meta name = "renderer" content = "webkit" content = "no-siteApp"/> <link rel = "ไอคอนสำรอง" href = "ทรัพย์สิน/i/favicon.ico"> <link rel = "stylesheet" href = "สินทรัพย์/css/amazeui.min.csss"> <link rel = HREF = "uMeditor/Themes/default/CSS/uMeditor.css" rel = "stylesheet"> <style> .title {text-allign: center;}. chat-content-container {ความสูง: 29Rem; Overflow-y: Scroll; Border: 1px Solid Silver;} </style> </head> <body> <!-Title Start-> <div> <div> <div> <div> <h1> แชท Shiyanlou </h1> </div> </div> </div> </div> <! การเริ่มต้นเนื้อหา-> <!-การป้อนข้อมูลข้อความเริ่มต้น-> <div> <div> <form> <div> <div> <script type = "text/plain" id = "myeditor"> </script> </div> </form> </div> </div> <div> <div> <div> <div> placeHolder = "โปรดป้อนชื่อเล่น"/> </div> </div> <div> <script src = "สินทรัพย์/js/jQuery.min.js"> </script> <!-<!-[ถ้า lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.1.1.1.1. <!-<!-<!-[ถ้า lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jQuery.min.js"> </script> <!-> <! charset = "utf-8" src = "uMeditor/uMeditor.min.js"> </script> <script src = "uMeditor/lang/zh-cn/zh-cn.js"> </script> <script> $ (ฟังก์ชั่น () {// // ทำให้กล่องชื่อเล่นได้รับโฟกัส $ ('#nickname') [0] .focus (); - </script> </body> </html>หลังจากเขียนให้เริ่มเซิร์ฟเวอร์ Tomcat จากนั้นเยี่ยมชม http: // localhost: 8080/chat/index.jsp แล้วคุณจะเห็นอินเทอร์เฟซต่อไปนี้
3. เขียนรหัสพื้นหลัง
สร้างแพ็คเกจใหม่ของ com.shiyanlou.chat สร้างชั้นเรียนที่เรียกว่าแชทเซิร์ฟเวอร์ในแพ็คเกจ WebSocket API ได้รับการรวมเป็นหนึ่งตั้งแต่ javaee 7 ดังนั้นไม่ว่าเซิร์ฟเวอร์จะเป็นอะไรรหัสที่เขียนใน Java นั้นเหมือนกันและรหัสมีดังนี้:
แพ็คเกจ com.shiyanlou.chat; นำเข้า java.text.simpledateFormat; นำเข้า java.util.date; นำเข้า javax.websocket.onclose; นำเข้า javax.websocket.onerror; นำเข้า Javax.websocket.onmessage; javax.websocket.server.serverendpoint; นำเข้า net.sf.json.jsonObject;/** * คลาสเซิร์ฟเวอร์แชท * @author shiyanlou * */ @serverendpoint ("/websocket") คลาสสาธารณะแชท @Onopen โมฆะสาธารณะเปิด (เซสชันเซสชัน) {// เพิ่มการดำเนินการเริ่มต้น} / *** ยอมรับข้อความของลูกค้าและส่งข้อความไปยังเซสชันที่เชื่อมต่อทั้งหมด* @param ข้อความจากไคลเอนต์* @param เซสชันเซสชันของลูกค้า* / @OnMessage โมฆะ public Joid) // เพิ่มวันที่ส่งในข้อความ jsonobject.put ("วันที่", date_format.format (วันที่ใหม่ ())); // ส่งข้อความไปยังเซสชันที่เชื่อมต่อทั้งหมดสำหรับ (เซสชัน opensession: session.getOpenSessions ()) {// เพิ่มธงว่าข้อความนี้เป็นเซสชันปัจจุบันตัวเอง jsonobject.put ("isself", opensession.equals (เซสชัน)); // ส่งข้อความ json-formatted opensession.getasyncremote (). sendtext (jsonobject.toString ()); }} @onclose โมฆะสาธารณะปิด () {// เพิ่มการดำเนินการเมื่อปิดเซสชัน} @onerror ข้อผิดพลาดโมฆะสาธารณะ (throwable t) {// เพิ่มการดำเนินการเพื่อจัดการข้อผิดพลาด}}}4. การโต้ตอบด้านหน้าและหลังเวที
หลังจากเขียนพื้นหลังแผนกต้อนรับจะต้องใช้ WebSocket เพื่อเชื่อมต่อกับพื้นหลัง คุณต้องสร้างวัตถุ WebSocket ใหม่จากนั้นคุณสามารถโต้ตอบกับเซิร์ฟเวอร์ส่งข้อความจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์และในขณะเดียวกันก็ตรวจสอบว่าเนื้อหาของกล่องอินพุตว่างเปล่าจากนั้นรับข้อความที่ส่งโดยเซิร์ฟเวอร์
var um = um.getEditor ('myeditor'); $ ('#nickname') [0] .focus (); // สร้างวัตถุ WebSocket ใหม่และสุดท้าย/websocket สอดคล้องกับ @ServerendPoint เซิร์ฟเวอร์ ("/webSocket") var socket = new WebSocket ('ws: // $ {pageContext.request.getServername ()}: $ {pageContext.request.getServerport ()} $ {pageContext.Request.ContextPath}/webSocket'); // ข้อมูลกระบวนการที่ส่งโดยซ็อกเก็ตฝั่งเซิร์ฟเวอร์ onMessage = ฟังก์ชั่น (เหตุการณ์) {addMessage (Event.data); - // action $ ('#send'). on ('คลิก', function () {var nickname = $ ('#nickname'). val (); ถ้า (! um.hascontents ()) {// กำหนดว่ากล่องอินพุตข้อความว่างเปล่า // settimeout ("$ ('. edui-container'). removeClass ('am-animation-shake')", 1000); $ ('#message-input-nickname'). addclass ('am-animation-shake'); กล่องอินพุตข้อความ um.setContent (''); // เพิ่มข้อความไปยังฟังก์ชั่นเนื้อหาการแชท addMessage (ข้อความ) {message = json.parse (ข้อความ); var messageItem = '<li>' + '<a href = "javaScript: void (0)"> <img src = "ทรัพย์สิน/ภาพ/' + (ข้อความ. message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $ (MessageItem) .appendto ('#message-list'); // เลื่อนแถบเลื่อนไปที่ $ ด้านล่าง (". แชท-คอนติเทนเนอร์"). scrolltop ($ (". แชท-คอนเนอร์คอนเนอร์") [0] .Scrollheight); -ณ จุดนี้ห้องแชทบนเว็บที่เรียบง่ายจะเสร็จสมบูรณ์ คุณสามารถเปิดหน้าต่างอีกหลายบานหรือเชิญเพื่อนมาทดสอบด้วยกันบน LAN
6. สรุป
คลาสโครงการนี้ใช้ WebSocket เพื่อใช้ห้องแชทบนเว็บอย่างง่าย ในความเป็นจริง WebSocket ไม่เพียง แต่สามารถนำไปใช้กับเบราว์เซอร์เท่านั้น แต่ยังรวมถึงลูกค้าเดสก์ท็อปด้วย
7. การคิดคำถาม
คลาสโครงการนี้เป็นเพียงการใช้งานห้องสนทนาอย่างง่าย ในความเป็นจริงมีฟังก์ชั่นมากมายที่สามารถเพิ่มได้เช่นฟังก์ชั่นการอัปโหลด Avatar ฟังก์ชั่นการแชทแบบหนึ่งต่อหนึ่ง ฯลฯ ให้ปรับปรุงห้องแชทด้วยกัน
คุณอยากลองทันทีถ้าคุณเห็นสิ่งนี้หรือไม่? คลิกที่นี่ --- ให้สภาพแวดล้อมการรวบรวมออนไลน์ฟรีเพื่อให้คุณไม่ต้องกังวลเกี่ยวกับการสร้างสภาพแวดล้อมอีกต่อไป
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับการใช้ Java และ Websocket เพื่อใช้รหัสตัวอย่างห้องแชทเว็บแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!