Avant d'introduire le texte principal, permettez-moi de vous présenter l'arrière-plan et les principes de WebSocket:
arrière-plan
Seule une communication unidirectionnelle peut être réalisée via HTTP dans le navigateur. La comète peut simuler la communication bidirectionnelle dans une certaine mesure, mais elle est faible en efficacité et nécessite un bon support du serveur; Socket et XMLSocket dans Flash peuvent réaliser une véritable communication bidirectionnelle, et ces deux fonctions peuvent être utilisées dans JavaScript via Flex Ajax Bridge. Il peut être prévisible que si WebSocket est implémenté dans le navigateur, il remplacera les deux technologies ci-dessus et sera largement utilisé. Face à cette situation, HTML5 définit le protocole WebSocket, qui peut mieux économiser les ressources du serveur et la bande passante et réaliser une communication en temps réel.
Le protocole WebSocket est également mis en œuvre dans Javaee7.
principe
Protocole WebSocket.
De nos jours, afin de réaliser une communication instantanée, de nombreux sites Web utilisent des sondages. Le sondage consiste à envoyer une demande HTTP au serveur à un intervalle de temps spécifique (comme toutes les 1 secondes), et le serveur renvoie les dernières données au navigateur du client. Ce modèle de demande HTTP traditionnel entraîne des inconvénients évidents. Le navigateur doit faire des demandes en continu au serveur. Cependant, l'en-tête de la demande HTTP est très long, et les données utiles qui y sont contenues peuvent être juste une petite valeur, qui occupera beaucoup de bande passante.
L'effet d'une technologie plus récente à faire est que la comète utilise l'Ajax. Cependant, bien que cette technologie puisse atteindre une communication complète, elle nécessite toujours une demande.
Dans l'API WebSocket, le navigateur et le serveur n'ont qu'à se serrer la main, puis un canal rapide est formé entre le navigateur et le serveur. Les données peuvent être transmises directement entre les deux. Dans ce protocole WebSocket, nous avons deux avantages majeurs pour mettre en œuvre un service instantané:
1. En-tête
L'en-tête qui communique entre eux est très petit - probablement seulement 2 octets
2. Pousser le serveur
Lorsque vous poussez le serveur, le serveur ne reçoit plus passivement la demande du navigateur avant de renvoyer les données, mais la pousse activement au navigateur lorsque de nouvelles données sont disponibles.
1. Introduction du projet
WebSocket est un nouveau protocole dans HTML5. Il implémente la communication duplex complète entre le navigateur et le serveur. Ici, WebSocket sera utilisé pour développer des salles de discussion Web. Le framework frontal utilisera Amateui, Java en arrière-plan et Umeditor dans l'éditeur.
2. Impliquer des points de connaissance
Web frontal (HTML + CSS + JS) et Java
3. Environnement logiciel Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. Capture d'écran de l'effet
Effet 1
Effet 2
5. Combat pratique du projet
1. Créez un nouveau projet
Open Eclipse Javaee, créez un nouveau projet Web dynamique nommé CHAT, puis importez les packages requis pour traiter les chaînes de format JSON, Place Commons Beanutils-1.8.0.jar, Commons-Collections-3.2.1.jar, Commons-Lang-2.5.Jar, Commons-Logging-1.1.jar, ezmorph-1.0.6.jar et json-lib-2.4-jdk D'autres packages sont placés dans le répertoire WebContent / Web-Inf / Lib et publient enfin le projet sur le serveur Tomcat. À ce stade, le projet vide est terminé.
2. Écrivez la page frontale
Créez une nouvelle page nommée index.jsp dans le répertoire WebContent. Le framework Amateui est utilisé ici. Il s'agit d'un cadre frontal adaptatif à écran croisé. La boîte d'entrée de message utilise UMEditor, qui est un éditeur en ligne de texte riche qui peut rendre notre contenu de message coloré.
Tout d'abord, téléchargez le package compressé à partir du site officiel d'Amateui, puis déziptez le dossier Assets et copiez le répertoire WebContent, afin que nous puissions utiliser Amateui.
Ensuite, téléchargez la version mini du package de compression de version JSP à partir du site officiel d'Uediter, dézip tout le répertoire dans le répertoire WebContent, puis vous pouvez écrire le code frontal, le code est le suivant (vous pouvez l'écrire en fonction de votre préférence):
<% @ page Language = "Java" contentType = "Text / html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html> <html lang = "zh"> <adre> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatble" contenu = "ie =" name = "Viewport" contenu = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no"> <ititle> shiyanlou chat </title> <! - Définir le moteur de rendu pour 360 Browser -> <meta name = "renderer" contenu = "webkit"> <! - no baidu siteapp -> <méta " http-equiv = "cache-control" contenu = "no-siteApp" /> <link rel = "alternative icon" href = "actifs / i / favicon.ico"> <link rel = "Stylesheet" href = "actets / css / amatEui.min.css"> <link rel = "Stylesheet" HREF = "Assets / CSS / App.css"> <! - UMEditor CSS -> <Link Href = "UMEditor / Themes / Default / CSS / UMEditor.css" rel = "Stylesheet"> <style> .Title {Text-Align: Center;}. Chat-Content-Con-Con-Conainer {Height: 29rem; débordement-y: faites défiler; Border: 1px Solid Silver;} </ Style> </ Head> <Body> <! - Titre Start -> <div> <div> <div> <div> <h1> Shiyanlou Chat </h1> </div> </ div> </div> </div> <! - Title end -> <v> <v> <ul id = "DIVS"> </ul> </ ul> Contenu de chat Démarrer -> <! - Démarrage de l'entrée du message -> <div> <div> <form> <div> <script type = "text / plain" id = "MyEditor"> </ script> </ div> </ form> </ div> <v> <div> <div> <div> <v> <div> <div id = "Message-nickname"> <pander> <i> </ I> </ i> </ id> <pansed id = "nickname"> <pander> <i> </ I> </ I> </ Irpan type = "text" placeholder = "Veuillez entrer surnom" /> </ div> </ div> <div> <script src = "actifs / js / jQuery.min.js"> </ script> <! - <! - [If lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </ script> <! - <! - <! - [If lte ie 8]> <script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </ script> <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! - <! " UMEditor js -> <script charset = "utf-8" src = "umdiditor / umdiditor.config.js"> </ script> <script charset = "utf-8" src = "umdiditor / umeditor.min.js"> </ script> <script src = "umditor / lang / zh-cn / zh-cn.js"> </ script> $ (function (function (function () {// Initialiser la boîte d'entrée de message var um = um.getEditor ('MyEditor'); // Faire la boîte de surnom Get focus $ ('# naussul') [0] .focus (); }); </cript> </ body> </html>Après avoir écrit, démarrez le serveur Tomcat, puis visitez http: // localhost: 8080 / chat / index.jsp et vous verrez l'interface suivante.
3. Écrivez le code d'arrière-plan
Créez un nouveau package de com.shiyanlou.chat, créez une classe appelée Chatserver dans le package. L'API WebSocket a été unifiée depuis Javaee 7. Par conséquent, quel que soit le serveur, le code écrit en Java est le même, et le code est le suivant:
package com.shiyanlou.chat; import java.text.simpledateformat; import java.util.date; import javax.websocket.onclose; import javax.websocket.onerror; import javax.websocket.onmessage; javax.websocket.server.serverendpoint; import net.sf.json.jsonObject; / ** * Classe de serveur de chat * @author shiyanlou * * / @ seserverendpoint ("/ Websocket") Classe publique Chatserver {private static final simpledateformat date_format = newmpleformat ("yyyym-mm-dd hh: mm"); @Onopen public void open (Session Session) {// Ajouter une opération d'initialisation} / ** * Acceptez le message du client et envoyez le message à toutes les sessions connectées * @param Message du Client * @param Session Session du client * / @onMessage public Void getMessage (String Message, session session) {// Parse le message du client); // Ajouter la date d'envoi dans le message jsonObject.put ("Date", date_format.format (new Date ())); // Envoyez le message à toutes les sessions connectées pour (Session OpenSession: session.getOpensessions ()) {// Ajoutez les indicateurs de si ce message est la session actuelle elle-même JSONObject.put ("Iself", OpenSession.equals (Session)); // Envoi un message JSON formaté OpenSession.getAsynCremote (). SendText (jsonObject.ToString ()); }} @Onclose public void close () {// ajouter une opération lors de la fermeture de la session} @onerror public void error (throwable t) {// ajouter une opération pour gérer l'erreur}}4. Interaction avant et dans les coulisses
Après avoir écrit l'arrière-plan, la réception doit utiliser WebSocket pour se connecter à l'arrière-plan. Vous devez créer un nouvel objet WebSocket, puis vous pouvez interagir avec le serveur, envoyer des messages du navigateur au serveur et vérifier en même temps si le contenu de la zone d'entrée est vide, puis accepter les messages envoyés par le serveur, les ajouter dynamiquement à la zone de contenu de chat,
var um = um.getEditor ('MyEditor'); $ ('# nauel') [0] .focus (); // Créer un nouvel objet WebSocket, et le dernier / WebSocket correspond au serveur @ServerendPoint ("/ WebSocket") var socket = new WebSocket ('ws: // $ {pagecontext.request.getServerName ()}: $ {pageContext.request.getServerport ()} $ {pageContext.request.contextPath} / WebSocket'); // Processus Données envoyées par le serveur Socket.OnMessage = fonction (événement) {addMessage (event.data); }; // Action $ ('# send'). On ('click', function () {var nunkname = $ ('# nonom'). Val (); if (! Um.hascontents ()) {// déterminer si la boîte d'entrée de message est vide // la boîte d'entrée de message obtient une mise au point um.focus (); // ajouter la jitter effect ('.. setTimeout ("$ (.. $ ('# message-input-nickName'). addClass ('am-animation-shake'); // Effacer la boîte d'entrée um.setContent (''); // Ajouter un message à la fonction de contenu de chat addMessage (message) {message = json.parse (message); var messageItem = '<li>' + '<a href="javascript:void(0)" ><img src="assets/images/' + (message.isSelf ? 'self.png' : 'others.jpg') + '"//</a>' + '<div><header><div>' + '<a href="javascript:void(0)">' + message.nickName + '</a> <morde>' + message.date + '</mure> </div> </diant>' + '<div>' + message.content + '</div> </div> </li>'; $ (messageItem) .appendto ('# message-list'); // Faites défiler la barre de défilement vers le bas $ (". Chat-Content-Container"). ScrollTop ($ (". Chat-Content-Container") [0] .ScrollHeight); }À ce stade, une simple salle de discussion sur le Web est terminée. Vous pouvez ouvrir plusieurs autres fenêtres ou inviter des amis à tester ensemble sur le LAN.
6. Résumé
Cette classe de projet utilise WebSocket pour implémenter une simple salle de chat Web. En fait, WebSocket peut non seulement être appliqué au navigateur, mais aussi aux clients de bureau.
7. Questions de réflexion
Cette classe de projet n'est qu'une simple implémentation de la salle de chat. En fait, il existe de nombreuses fonctions qui peuvent être ajoutées, telles que la fonction de téléchargement d'avatar, la fonction de chat un à un, etc. Amélilons la salle de chat ensemble.
Voulez-vous l'essayer tout de suite si vous voyez cela? Cliquez ici --- vous fournir un environnement de compilation en ligne gratuit afin que vous n'ayez plus à vous soucier de créer un environnement
Ce qui précède est les connaissances pertinentes sur l'utilisation de Java et WebSocket pour implémenter l'exemple d'exemple de salle de chat qui vous est présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!