Vorwort
HTML5 WebSocket implementiert eine Zwei-Wege-Kommunikation zwischen Server und Browser. Durch die wechselseitige Kommunikation wird die Entwicklung der Servernachricht vereinfacht. Die häufigsten sind sofortige Kommunikation und Anwendungen, für die Echtzeit hochwertiger Informationen erfordern. Der größte Teil der vorherigen Servermeldung überschreitet die verwendeten "Umfragen" und "Long Connection" -Technologien, die beide auf dem Server beträchtlicher Overhead entstehen, und die Echtzeitleistung war nicht besonders hoch. Die Websocket -Technologie wird nur einen kleinen Overhead entstehen und ist in Echtzeit besonders hoch. Lassen Sie uns zunächst erläutern, wie die WebSocket -Technologie verwendet wird, um Chatrooms zu entwickeln. In diesem Beispiel wird der Tomcat7 -Server verwendet. Jeder Server verfügt über unterschiedliche Implementierungen von WebSocket, sodass diese Instanz nur auf dem Tomcat -Server ausgeführt werden kann. Spring hat jedoch die WebSocket -API gestartet, die mit der Implementierung jedes Servers kompatibel ist. Sie können die relevanten Informationen konsultieren, um sie zu verstehen. Ich werde es hier nicht vorstellen. Das folgende Bild ist das Rendern des Chatraums:
In diesem Beispiel wird Echtzeit-Push von Nachrichten implementiert, und es werden auch Online- und Offline-Benachrichtigungen von Chat-Benutzern implementiert. Erklären wir ausführlich, wie es implementiert wird.
Backend -Verarbeitung
Tomcat implementiert hauptsächlich WebSocket, indem sie auf die org.apache.catalina.websocket.messageInbound -Klasse stützt. Diese Klasse befindet sich in {tomcat_home} /lib/catalina.jar. Wenn Sie sich also entwickeln, müssen Sie Catalina.jar und tomcat-coyote.jar vorstellen. Der folgende Code ist der Servlet -Adresse des Kunden ausgesetzt:
Paket com.ibcio; import javax.servlet.annotation.webservlet; importieren javax.servlet.http.httpServletRequest; import org.apache.catalina.websocket.streaminbound; @WebServlet(urlPatterns = { "/message"}) //If you want to receive requests from the browser's ws:// protocol, you must implement the WebSocketServlet class public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet { private static final long serialVersionUID = 1L; public static int online_user_count = 1; public String getUser (httpServletRequest -Anforderung) {return (String) request.getSession (). getAtTribute ("Benutzer"); } // Im Gegensatz zu gewöhnlichen Servlets muss Createwebsocketinbound implementiert werden, und das benutzerdefinierte WebSocket -Verbindungsobjekt wird hier initialisiert. }} Dieses Servlet unterscheidet sich etwas von gewöhnlichen Servlets. Es erbt die WebSocketServlet -Klasse und muss die Methode createWebsocketinbound überschreiben. Das Benutzerattribut in der Sitzung in dieser Klasse wird festgelegt, wenn der Benutzer index.jsp eingibt, und zeichnet den Spitznamen des aktuellen Benutzers auf. Das Folgende ist der Code der WebSocketMessageInbound -Klasse, die von Ihnen selbst implementiert ist:
Paket com.ibcio; importieren java.io.ioException; Import Java.nio.ByTebuffer; Import Java.nio.CharBuffer; import net.sf.json.jsonObject; import org.apache.catalina.websocket.messageInbound; import org.apache.catalina.websocket.wsoutbound; Public Class WebSocketMessageInbound erweitert MessageInbound {// Der Benutzername der aktuellen Verbindung ist private endgültige String -Benutzer; public WebSocketMessageInbound (String -Benutzer) {this.user = user; } public String getUser () {return this.user; } // Ereignis ausgelöst durch Erstellen einer Verbindung @Override Protected void onopen (WSoutbound -Outbound) {// das Verbindungsereignis auslösen und die Verbindung im Verbindungspool jSonObject result = new JsonObject () hinzufügen; result.element ("type", "user_join"); result.element ("user", this.user); // Drücken Sie die Nachricht, dass der aktuelle Benutzer online zu allen Online -Benutzern WebSocketMessageInBoundPool.sendMessage (result.toString ()) ist. result = new JsonObject (); result.element ("Typ", "get_online_user"); result.element ("Liste", WebSocketMessageInBoundPool.getOnLineUser ()); // Fügen Sie das aktuelle Verbindungsobjekt zum Verbindungspool WebSocketMessageInboundpool.AddMessageInbound (this) hinzu; // Senden Sie die aktuelle Online -Benutzerliste an die aktuelle Verbindung WebSocketMessageInBoundPool.sendMessAgetouser (this.user, result.toString ()); } @Override Protected void Onclose (int Status) {// das Schließereignis auslösen und die Verbindung aus dem Verbindungspool WebSocketMessageInboundpool.RemovemessageInbound (this) entfernen; JsonObject Ergebnis = new JSONObject (); result.element ("type", "user_leave"); result.element ("user", this.user); // Senden Sie die Nachricht an den Online -Benutzer, dass der aktuelle Benutzer WebSocketMessageInBoundPool.sendMessage (result.toString ()) beendet; } @Override Protected void onBinaryMessage (ByteBuffer -Nachricht) löst ioException aus {neue nicht unterstützte OperationException ("Binärnachricht nicht unterstützt."); } // Das Ereignis wird ausgelöst, wenn der Client eine Nachricht an den Server @Override Protected void OnTextMessage (Charbuffer Message) sendet, löst IOException {// Nachricht an alle Online -Benutzer WebSocketMessageInboundpool.sendmessage (Message.toString ()) aus. }} Der Code implementiert hauptsächlich Onopen-, Onclose- und OnTextMessage -Methoden, die die Online-, Offline- und Senden von Nachrichten von Benutzern verarbeiten. In dieser Klasse gibt es eine WebSocketMessageInboundpool -Verbindungspoolklasse. Diese Klasse wird verwendet, um die Verbindungen derzeit Online -Benutzer zu verwalten. Das Folgende ist der Code dieser Klasse:
Paket com.ibcio; importieren java.io.ioException; Import Java.nio.CharBuffer; import Java.util.hashMap; import Java.util.map; Java.util.set importieren; öffentliche Klasse WebSocketMessageInBoundPool {// den Map -Container für Verbindungen speichern. // Fügen Sie dem Verbindungspool Public static void addMessageInbound eine Verbindung hinzu (WebSocketMessageInbound Inbound) {// Verbindungssystem hinzufügen. Connectionss.put (inbound.getUser (), inbound); } // Alle Online -Benutzer öffentliche statische statische Set <String> getOnlineUser () {return Connections.keyset (); } public static void removemessageInbound (WebSocketMessageInbound Inbound) {// Verbindungssystem entfernen.out.println ("Benutzer:" + inbound.getUser () + "Exit .."); Connectionss.remove (inbound.getUser ()); } public static void sendMessAgetouser (String -Benutzer, String -Nachricht) {try {// Daten an bestimmte Benutzer system.out.println ("Meldung an Benutzer senden:" + user + ", Nachrichteninhalt:" + Nachricht); WebSocketMessageInbound inbound = Connections.get (Benutzer); if (inbound! }} catch (ioException e) {e.printstacktrace (); }} // Senden Sie eine Nachricht an alle Benutzer public static void sendMessage (String -Nachricht) {try {set <string> keyset = connectionss.keyset (); für (String -Schlüssel: Keyset) {WebSocketMessageInbound inbound = Connections.get (Schlüssel); if (inbound! inbound.getWSoutBound (). WriteTextMessage (charBuffer.wrap (message)); }}} catch (ioException e) {e.printstacktrace (); }}} Rezeption Display
Der obige Code ist der Code des Chatraum -Backends, der hauptsächlich aus 3 Objekten, Servlet, Verbindungsobjekt und Verbindungspool besteht. Das Folgende ist der Code der Rezeption. Der Code der Rezeption implementiert hauptsächlich die Verbindung mit dem Server und zeigt die Benutzerliste und die Informationsliste an. Die Anzeige der Rezeption verwendet das EXT -Framework. Schüler, die mit EXT nicht vertraut sind, können ein vorläufiges Verständnis von Ext haben. Das Folgende ist der Code von Index.jsp:
<%@ page Language = "java" pageCoding = "utf-8" import = "com.ibcio.websocketMessageServlet"%> <%String user = (String) session.getAtTribute ("user"); if (user == null) {// generieren Sie einen Spitznamen für user user = "guden" + webocketMessageServlet.online_user_count; WebSocketMessageServlet.online_User_Count ++; Session.SetAttribute ("Benutzer", Benutzer); } pageContext.setAttribute ("Benutzer", Benutzer); %> <html> <Head> <titels> WebSocket-Chatraum </title> <!-CSS-Dateien einführen-> <link rel = "styleSheet" type = "text/cs rel = "stylesheet" type = "text/css" href = "css/webocket.css"/> <!- Eingabes EXT-JS-Entwicklungspaket und sein eigenes implementiertes WebScoket. -> <script type = "text/javaScript" src = "ext4/ext-all-debug.js"> </script> <script type = "text/javascript" src = "webSocket.js"> </script> <script type = "text/javascript"> var user = "$ {user}}"; </script> </head> <body> <h1> WebSocket-Chatraum </h1> <p> Die vom HTML5-Standard bereitgestellte API wird mit dem optimalen Client-Framework kombiniert, um den Chat-Raum zu implementieren, der die folgenden Eigenschaften enthält: </p> <ul style = "padding-links: 10px; data communication, which is different from technologies such as polling and long connection, and saves server resources</li> <li>Combined with Ext for page display</li> <li>User online and offline notification</li> </ul> <div id="websocket_button"></div> </body> </html> Die Anzeige der Seite wird hauptsächlich in Websocket.js gesteuert. Das Folgende ist der Code von WebSocket.jsd:
// Wird verwendet, um die Chat-Informationen des Benutzers aus ext. {Überlauf: 'Auto', HintergrundColor: '#fff'}, TPL: ['<Div> Vertrauen Sie keine Überweisungen, Informationen oder unbekannte Telefonanrufe. '<div> {content} </div>', '</div>', '</tpl>'], Nachrichten: [], initcomponent: function () {var me = this; 'Quelle']}); message ['timestamp'] = ext.date.format (neues Datum (Message ['Timestamp']), 'H: i: s'); if (message.from == user) {message.source = 'self'; } else {message.source = 'remote'; } me.store.add (Nachricht); if (me.el.dom) {me.el.dom.scrolltop = me.el.dom.scrollHeight; }}}); Dieser Code implementiert hauptsächlich den Container, der die Nachricht anzeigt. Das Folgende ist der Code, mit dem nach dem Laden der Seite ausgeführt wird:
Ext.onReady (function () {// Erstellen Sie das Benutzereingangsfeld var input = ext.create ('ext.form.field.htmleditor', {Region: 'South', Höhe: 120, enableFont: false, EnableSourectreeT: False, Enable Realignments: Falses: {Initialize: Funktion () {EXT.Event.on.on.on. Funktion (e) {if (e.ctrlkey === true && e.KeyCode == 13) {e.preventDefault (); Ext.create ('ext.panel.panel', {Region: 'Center', Layout: 'Border', Elemente: [Eingabe, Ausgabe], Schaltflächen: [{text: 'send', Handler: Senden}]}; WebSocket (Encodeuri ('WS: // localhost: 8080/webocket/message'); } webocket.onclose = function () {// Verbindungsbetragsbetriebswin.Settitle (Titel + '(getrennt)'); } // Nachrichtenempfang WebSocket.onMessage = Funktion (Nachricht) {var message = json.parse (message.data); // Nachrichten erhalten, die vom Benutzer gesendet werden, if (message.type == 'meldung') {output.receive (message); } else if (message.type == 'get_online_user') {// Online -Benutzerliste var root = onlineuser.getRootnode (); Ext.each (Message.List, Funktion (Benutzer) {var node = root.createNode ({id: user, text: user, iconcls: 'user', Leaf: true}); root.appendchild (Knoten);}); } else if (message.type == 'user_join') {// Der Benutzer geht online var root = onlineuser.getRootnode (); var user = message.user; var node = root.createNode ({id: user, text: user, iconcls: 'user', Leaf: true}); Root.AppendChild (Knoten); } else if (message.type == 'user_leave') {// Der Benutzer geht offline var root = onlineuser.getRootnode (); var user = message.user; var node = root.findchild ('id', Benutzer); Root.removechild (Knoten); }}}}}; // Online-Benutzerbaum var onlineuser = ext.create ('ext.tree.panel', {title: 'online', rootvisible: false, Region: 'East', Width: 150, Zeilen: false, usearrows: true, autoscroll: true, trul: true, iconcls: 'user-online', store: ext.creat ('ext. Benutzer ', erweitert: true, Kinder: []}})}); var title = 'Willkommen:' + Benutzer; // Fenster anstellen var win = ext.create ('ext.window.window', {title: title + '(nicht angeschlossen)', Layout: 'Border', Iconcls: 'User-Win', Minwidth: 650, Minhoht: 460, Breite: 650, inimatetarget: 'wachsheiser: 460, 460. : {render: function () {initWebsocket (); win.show (); // Nachrichtenfunktion senden send () {var message = {}; if (WebSocket! WebSocket.Send (JSON.Stringify (Nachricht)); //output.Receive(Message); input.setValue (''); }} else {ext.msg.alert ('Tipp', 'Sie wurden getrennt und können keine Nachrichten senden!'); }}}});Der obige Code ist der Code, der nach dem Laden der Seite automatisch eine Verbindung zum Server herstellt und die Anzeigeschnittstelle erstellt.
Beachten
Zwei Punkte zu beachten: Nach Abschluss der Bereitstellung müssen Catalina.jar und Tomcat-Coyote.jar im Lib-Verzeichnis im Tomcat-Anwendungsverzeichnis gelöscht werden. Das LIB-Verzeichnis des Projekts ist beispielsweise d:/wortspace/webocket/webroot/web-inf/lib/lib und das bereitgestellte Anwendung LIB-Verzeichnis ist d: /tools/apache-tomcat-7.0.32/webapps/webocket/web-inf/lib. Löschen Sie einfach das Lib -Verzeichnis des Bereitstellungsverzeichnisses und verbinden Sie zwei Gläser. Andernfalls kann der Fehler nicht initialisiert werden. Erinnern.
Wenn die Verbindung noch nicht möglich ist, laden Sie bitte den neuesten Tomcat herunter. Ich habe vergessen, dass die Version von TomcatCreateWebsocketinbound keinen Anforderungsparameter hat. Der aktuelle Code hat diesen Parameter. Die 7.0.3xx -Versionen sind alle mit diesem Parameter ausgestattet, denken Sie daran.
Zusammenfassen
Die Verwendung von WebSocket zur Entwicklung von Server -Push ist sehr bequem. Dies ist eine einfache Anwendung. Tatsächlich kann es auch WebRTC kombinieren, um Video -Chat und Voice -Chat zu realisieren.
Beispiel Download
Download -Adresse: Demo
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.