Bevor Sie den Haupttext vorstellen, lassen Sie mich Ihnen den Hintergrund und die Prinzipien von Websocket vorstellen:
Hintergrund
Über HTTP im Browser kann nur eine Einweg-Kommunikation erreicht werden. Comet kann die wechselseitige Kommunikation in gewissem Maße simulieren, ist jedoch eine geringe Effizienz und erfordert eine gute Unterstützung durch den Server. Socket und XMLSocket in Flash können eine echte Zwei-Wege-Kommunikation realisieren, und diese beiden Funktionen können in JavaScript über Flex Ajax Bridge verwendet werden. Es kann vorhersehbar sein, dass, wenn WebSocket im Browser implementiert ist, die beiden oben genannten Technologien ersetzt und weit verbreitet ist. Angesichts dieser Situation definiert HTML5 das WebSocket-Protokoll, das die Serverressourcen und die Bandbreite besser speichern und eine Echtzeitkommunikation erreichen kann.
Das WebSocket -Protokoll wird auch in Javaee7 implementiert.
Prinzip
Websocket -Protokoll.
Um sofortige Kommunikation zu realisieren, verwenden viele Websites die Umfragen. Umfragen müssen in einem bestimmten Zeitintervall (z. B. alle 1 Sekunden) eine HTTP -Anforderung an den Server senden, und der Server gibt die neuesten Daten an den Browser des Clients zurück. Dieses traditionelle HTTP -Anforderungsmuster bringt offensichtliche Nachteile. Der Browser muss kontinuierlich Anfragen an den Server stellen. Der Header der HTTP -Anfrage ist jedoch sehr lang, und die darin enthaltenen nützlichen Daten können nur ein kleiner Wert sein, der viel Bandbreite einnimmt.
Die Auswirkung einer neueren Technologie zur Umfrage hat, dass Comet Ajax verwendet. Obwohl diese Technologie eine Voll-Duplex-Kommunikation erreichen kann, erfordert sie dennoch eine Anfrage.
In der WebSocket -API muss der Browser und der Server nur die Hand geben, und dann wird zwischen dem Browser und dem Server ein schneller Kanal gebildet. Daten können direkt zwischen den beiden übertragen werden. In diesem WebSocket -Protokoll haben wir zwei wichtige Vorteile für die Implementierung des Sofortdienstes:
1. Kopfball
Der Kopfball, der miteinander kommuniziert, ist sehr klein - wahrscheinlich nur 2 Bytes
2. Serverschub
Wenn der Server auf dem Server drückt, empfängt der Server die Anforderung des Browsers vor der Rückgabe von Daten nicht mehr, sondern drückt ihn aktiv in den Browser, wenn neue Daten verfügbar sind.
1. Projekteinführung
WebSocket ist ein neues Protokoll in HTML5. Es implementiert die vollständige Duplex -Kommunikation zwischen dem Browser und dem Server. Hier wird Websocket verwendet, um Web -Chat -Räume zu entwickeln. Das Front-End-Framework verwendet Amazeui, Java im Hintergrund und Umeditor im Herausgeber.
2. Einbeziehung von Wissenspunkten
Web-Front-End (HTML+CSS+JS) und Java
3. Software Umgebung Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. Effekt Screenshot
Effekt 1
Effekt 2
5. Projekt Praktischer Kampf
1. Erstellen Sie ein neues Projekt
Öffnen Sie die Eclipse Javaee, erstellen Sie ein neues dynamisches Webprojekt mit dem Namen Chat und importieren Sie dann die Pakete, die für die Verarbeitung von JSON-Format-Saiten erforderlich sind. Andere Pakete werden im Verzeichnis webcontent/web-inf/lib platziert und veröffentlichen das Projekt schließlich auf dem Tomcat-Server. Zu diesem Zeitpunkt ist das leere Projekt abgeschlossen.
2. Schreiben Sie Front-End-Seite
Erstellen Sie eine neue Seite mit dem Namen index.jsp im Webcontent -Verzeichnis. Das Amazeui -Framework wird hier verwendet. Es ist ein adaptives Front-End-Framework mit Crosscreen. Das Message -Eingabefeld verwendet Umeditor, ein reicher Text -Online -Editor, der unseren Nachrichteninhalt farbenfroh machen kann.
Laden Sie zuerst das komprimierte Paket von der Amazeui Official -Website herunter und entpacken Sie dann den Ordner "Assets" und kopieren Sie das Webcontent -Verzeichnis, damit wir Amazeui verwenden können.
Laden Sie dann die Mini-Version des JSP-Versionskomprimierungspakets von der offiziellen Website von Uediter herunter, entpacken Sie das gesamte Verzeichnis in das Webcontent-Verzeichnis und dann können Sie den Front-End-Code schreiben, der Code lautet wie folgt (Sie können ihn nach Ihrer Präferenz schreiben):
<%@ page Language = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> <! docType html> <html Lang = "zh"> <head> <meta-charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" ily yeta http-äquiv = "x-ua-compatible" idtp-egh. name = "viewPort" content = "width = Gerätebreite, initial-scale = 1, maximal scale = 1, Benutzer-scalable = no"> <title> shiyanlou chat </title> <!-Render Engine für 360 Browser-<meta name = "renderer" content = "webkit"> <! http-äquiv = "cache-control" content = "no-siteApp"/> <link rel = "Alternates icon" href = "assets/i/favicon.ico"> <link rel = "styleSheet" href = "assets/css/Amazeui.min.css href = "assets/css/app.css"> <!-Umeditor CSS-> <link href = "Umeditor/Themen/Standard/CSS/Umeditor.css" rel = "Stylesheet"> <style> .title {textalign: center;}. Überlauf-y: Scroll; Rand: 1PX Solid Silver;} </style> </head> <body> <!-Titelstart-> <div> <div> <div> <h1> Shiyanlou Chat </h1> </div> </div> </div> </div> </div> </div> </div> </div> </! CHAT-Inhalt starten-> <!-Nachrichteneingabe starten-> <div> <div> <form> <div> <script type = "text/plain" id = "myeditor"> </script> </div> </form> </div> </div> <div> <div> <div> <div> <div> <div id = "message-input-nickname" </i> </i> </i> </iNAME "</i> </i> </iNa" </i> </iNa "</i> </iNAnname" type = "text" placeholder = "Bitte geben Sie den Spitznamen ein"/> </div> </div> <div> <script src = "assets/js/jquery.min.js"> </script> <!-<!-[wenn lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </script> <!-<!-<!-[wenn lte ie 8]> <script Src = "http Umeditor js-> <script charset = "utf-8" src = "Umeditor/Umeditor.config.js"> </script> <script charset = "utf-8" src = "Umeditor/Umeditor.min.js"> </script src = "script/script/lang/zh-cn/zH-zh (ZH-zh (zhcn/zhcn/zhcn/zhcn) (zh-cn/zH-zh (zhcn) (zhcn/zh-zh (zhcn) (zhcn/zhcn/zhcn/zh-cn. {// Initialisieren Sie das Nachrichteneingangsfeld var um = um.geteditor ('myeditor'); // Machen Sie den Spitznamen Box Get Focus $ ('#Spitzname') [0] .focus (); }); </script> </body> </html>Starten Sie nach dem Schreiben den Tomcat -Server und besuchen Sie dann http: // localhost: 8080/chat/index.jsp und Sie sehen die folgende Schnittstelle.
3. Schreiben Sie Hintergrundcode
Erstellen Sie ein neues Paket aus com.shiyanlou.chat und erstellen Sie eine Klasse namens ChatServer im Paket. Die WebSocket -API ist seit Javaee 7 einheitlich. Daher ist der Code, der in Java geschrieben wurde, der gleiche und der Code wie folgt:
Paket com.shiyanlou.chat; import Java.Text.SimpledateFormat; Import Java.util.date; Import Javax.Websocket.onclose; javax.websocket.server.serverendpoint; import net.sf.json.jsonObject;/** * CHAT-Serverklasse * @author shiyanlou * */ @Serverendpoint ("/webocket") öffentliche Klasse Chatserver {private static enddeformat/dodformat = newn. Formatieren @onopen public void open (Sitzungssitzung) {// Initialisierungsoperation hinzufügen} / *** Akzeptieren Sie die Nachricht des Clients und senden Sie die Nachricht an alle vernetzten Sitzungen* @param -Nachrichtennachricht aus dem Client* @param Sitzung Die Sitzung des Clients* / @onMessage public void GetMessage (String -Message, Sitzung) {// Die Clients -Nachricht in einer JSON -Objekt -Json -Objekt -Json -Objekte -Json -Objekte -Json -Objekte -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Json -Message =/ // Parse. JsonObject.fromObject (Nachricht); // das Datum des Sendens in der Nachricht fügen jsonObject.put ("Datum", DATE_FORMAT.FORMAT (New Date ())); // Senden Sie die Nachricht an alle verbundenen Sitzungen für (Sitzung openSession: session.getOpensesions ()) {// Fügen Sie die Flags hinzu, ob diese Nachricht die aktuelle Sitzung selbst ist. // Senden Sie eine json-formatierte Nachricht openSession.getAsyncremote (). SendText (jsonObject.toString ()); }} @Onclose public void close () {// Fügen Sie eine Operation hinzu, wenn Sie die Sitzung schließen} @onError public void Fehler (Throwable T) {// Fügen Sie einen Operation hinzu, um Fehler zu verarbeiten}}4. Interaktion vorne und Backstage
Nach dem Schreiben des Hintergrunds muss die Rezeption WebSocket verwenden, um eine Verbindung zum Hintergrund herzustellen. Sie müssen ein neues WebSocket -Objekt erstellen und dann mit dem Server interagieren, Nachrichten aus dem Browser an den Server senden und gleichzeitig überprüfen, ob der Inhalt des Eingabefelds leer ist, und akzeptieren Sie dann Nachrichten, die vom Server gesendet werden, sie dynamisch zum Chat -Inhaltsfeld hinzufügen.
var um = um.geteditor ('myeditor'); WebSocket ('ws: // $ {pageContext.request.getSerVername ()}: $ {pageContext.request.getServerport ()} $ {pageContext.Request.ContextPath}/WebSocket'); // Daten verarbeiten, die vom serverseitigen Socket gesendet wurden. }; // Aktion $ ('#send'). On ('click', function () {var fickname = $ ('#fickname'). Val (); if (! Um.hascontents ()) {// Bestimmen Sie, ob das Nachrichteneingangsfeld leer ist. setTimeout ("$ ('. Edui-Container'). $ ('#message-input-nickname'). // Message -Eingabefeld um.setContent (''); // Meldung zur Chat -Inhaltsfunktion hinzufügen addMessage (message) {message = json.parse (message); var messageItem = '<li>' + '<a href = "javaScript: void (0)"> <img src = "assets/images/' + (message.isself? 'self.png': 'Andere.jpg') + '" // </a>' + '<div> <div> <div>' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' <A. message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $ (MessageItem) .AppendTo ('#message-list'); // Die Bildlaufleiste nach unten scrollen (". Chat-Content-Container"). Scrolltop ($ (". Chat-Content-Container") [0] .ScrollHeight); }Zu diesem Zeitpunkt ist ein einfacher Web -Chatraum abgeschlossen. Sie können mehrere weitere Fenster öffnen oder Freunde einladen, gemeinsam auf der LAN zu testen.
6. Zusammenfassung
Diese Projektklasse verwendet WebSocket, um einen einfachen Web -Chat -Raum zu implementieren. Tatsächlich kann WebSocket nicht nur auf den Browser, sondern auch auf Desktop -Clients angewendet werden.
7. Fragen denken
Diese Projektklasse ist nur eine einfache Implementierung des Chatraums. Tatsächlich gibt es viele Funktionen, die hinzugefügt werden können, z.
Möchten Sie es sofort ausprobieren, wenn Sie dies sehen? Klicken Sie hier-Stellen Sie Ihnen eine kostenlose Online-Kompilierungsumgebung zur Verfügung, damit Sie sich keine Sorgen mehr um den Aufbau einer Umgebung machen müssen
Das obige ist das relevante Wissen über die Verwendung von Java und WebSocket, um Ihnen den Ihnen vorgestellten Web -Chat -Raum -Beispielcode zu implementieren. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!