Antes de presentar el texto principal, permítame presentarle los antecedentes y los principios de WebSocket:
fondo
Solo se puede lograr una comunicación unidireccional a través de HTTP en el navegador. Comet puede simular la comunicación bidireccional hasta cierto punto, pero es de baja eficiencia y requiere un buen soporte del servidor; Socket y XMLSocket en Flash pueden realizar una verdadera comunicación bidireccional, y estas dos funciones se pueden usar en JavaScript a través del puente Flex Ajax. Se puede previsir que si WebSocket se implementa en el navegador, reemplazará las dos tecnologías anteriores y se utilizará ampliamente. Ante esta situación, HTML5 define el protocolo WebSocket, que puede guardar mejor los recursos del servidor y el ancho de banda y lograr la comunicación en tiempo real.
El protocolo WebSocket también se implementa en Javaee7.
principio
Protocolo de WebSocket.
Hoy en día, para realizar una comunicación instantánea, muchos sitios web usan encuestas. La encuesta es enviar una solicitud HTTP al servidor a un intervalo de tiempo específico (como cada 1 segundo), y el servidor devuelve los últimos datos al navegador del cliente. Este patrón de solicitud HTTP tradicional trae desventajas obvias. El navegador necesita hacer solicitudes continuamente al servidor. Sin embargo, el encabezado de la solicitud HTTP es muy largo, y los datos útiles contenidos en él pueden ser solo un valor pequeño, que ocupará mucho ancho de banda.
El efecto de una tecnología más nueva para hacer encuestas es que Comet usa AJAX. Sin embargo, aunque esta tecnología puede lograr una comunicación dúplex, todavía requiere una solicitud.
En la API de WebSocket, el navegador y el servidor solo necesitan estrechar la mano, y luego se forma un canal rápido entre el navegador y el servidor. Los datos se pueden transmitir directamente entre los dos. En este protocolo WebSocket, tenemos dos beneficios principales para implementar el servicio instantáneo:
1. Encabezado
El encabezado que se comunica entre sí es muy pequeño, probablemente solo 2 bytes
2. Push del servidor
Al presionar por el servidor, el servidor ya no recibe pasivamente la solicitud del navegador antes de devolver los datos, pero lo empuja activamente al navegador cuando hay nuevos datos disponibles.
1. Introducción del proyecto
WebSocket es un nuevo protocolo en HTML5. Implementa la comunicación dúplex completa entre el navegador y el servidor. Aquí, WebSocket se utilizará para desarrollar salas de chat web. El marco frontal utilizará Amazeui, Java en segundo plano y Umeditor en el editor.
2. Involucrar puntos de conocimiento
Front-end (HTML+CSS+JS) y Java
3. Software Environment Tomcat 7 JDK 7 Eclipse Javaee Browser moderno
4. Efecto captura de pantalla
Efecto 1
Efecto 2
5. Proyecto de combate práctico
1. Crea un nuevo proyecto
Abra Eclipse Javaee, cree un nuevo proyecto web dinámico llamado CHAT e importe los paquetes requeridos para procesar cadenas de formato JSON, colocar 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 y json-lib-2. Otros paquetes se colocan en el directorio WebContent/Web-INF/LIB, y finalmente publican el proyecto al servidor Tomcat. En este punto, se completa el proyecto vacío.
2. Escribir la página front-end
Cree una nueva página llamada index.jsp en el directorio webcontent. El marco de Amazeui se usa aquí. Es un marco frontal adaptativo de pantalla cruzada. El cuadro de entrada de mensajes utiliza Umeditor, que es un editor en línea de texto rico que puede hacer que nuestro contenido de mensaje sea colorido.
Primero, descargue el paquete comprimido del sitio web oficial de AmazeUI y luego descomprima la carpeta de activos y copie el directorio de contenido web, para que podamos usar AmazeUi.
Luego, descargue la versión mini del paquete de compresión de la versión JSP del sitio web oficial de UEDITER, descomprima todo el directorio en el directorio de contenido web, y luego puede escribir el código front-end, el código es el siguiente (puede escribirlo de acuerdo con sus preferencias):
<%@ page lenguaje = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> <! DocType html> <html lang = "zh"> <lEd> <s meta charset = "utf-8"> <meta http-equiv = "x-uacompatible" Content "iE" ande "> ande". name = "Viewport" Content = "Width = Device-Width, Initial-Scale = 1, Maximum-Scale = 1, User-Scalable = no"> <title> Shiyanlou chat </title> <!-Establezca el motor para el motor 360-> <meta name = "renderer" content = "webkit"> <!-No baidu siteS http-equiv = "cache-confontrol" content = "no-siteApp"/> <link rel = "alternate icon" href = "activos/i/favicon.ico"> <link rel = "Stylesheet" href = "Assets/css/amazeui.min.css"> <Link rel = "Stylesheet-geet" href = "assets/css/app.css"> <!-Umeditor css-> <link href = "Umeditor/themes/default/css/uMeditor.css" rel = "Stylesheet"> <style> .title {Text-align: Center;}. Content-Content-Content-Continer {Height: 29Rem; Overflow-y: desplazarse; border: 1px sólido plateado;} </style> </head> <body> <!-title start-> <div> <div> <div> <div> <h1> shiyanlou chat </h1> </div> </div> </div> </div> <!-Title End-> <div> <iv> <uld = "Message-list"> </ul> </ul> </Div> <Div> <Div> <Div> <Div> Inicio de contenido de chat-> <!-Inicio de entrada de mensaje-> <div> <div> <form> <div> <script type = "text/sencillo" id = "myEditor"> </script> </div> </orm> </div> </div> <viv> <div> <div> <div> <div> <div Id = "-Input-NickName"> <pane> </i> </i> <pan> <pinte ID <Div Id = "Diviñón" type = "Text" PlaceHolder = "Por favor ingrese el apodo"/> </div> </div> <div> <script src = "activos/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="umeditor/umeditor.config.js"></script> <script charset="utf-8" src="umeditor/umeditor.min.js"></script> <script src="umeditor/lang/zh-cn/zh-cn.js"></script> <script> $(function() {// Inicializar el cuadro de entrada del mensaje var um = um.getEditor ('myEditor'); // hacer que el cuadro de apodo obtenga foco $ ('#Nickname') [0] .focus (); }); </script> </body> </html>Después de escribir, inicie el servidor Tomcat y luego visite http: // localhost: 8080/chat/index.jsp y verá la siguiente interfaz.
3. Escribir código de fondo
Cree un nuevo paquete de com.shiyanlou.chat, cree una clase llamada chatserver en el paquete. La API de WebSocket se ha unificado desde Javaee 7. Por lo tanto, no importa qué servidor sea, el código escrito en Java es el mismo, y el código es el siguiente:
paquete com.shiyanlou.chat; import java.text.simpledateFormat; import java.util.date; import javax.websocket.onclose; import javax.websocket.onerror; import javax.websocket.onmessage; import javax.websocket.onopen; import javax.websocket.sesion; javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/** * Chat Server Class* @author shiyanlou * */@ServerEndpoint("/websocket")public class ChatServer { private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm");// Date formatting @Onopen public void Open (sesión de sesión) {// Agregar operación de inicialización} / *** Acepte el mensaje del cliente y envíe el mensaje a todas las sesiones conectadas* @param Mensaje Mensaje del Cliente* @Param Session La sesión del cliente* / @OnMessage public Void getMessage (mensaje de cadena, sesión Session) {// Parse en el Mensaje del cliente en un objeto JSON JSONOBject JSonObject = JSonObject = jSonObject. // Agregue la fecha de envío en el mensaje jsonObject.put ("date", date_format.format (nueva fecha ())); // Envíe el mensaje a todas las sesiones conectadas para (Session Opensession: Session.getOpensessions ()) {// Agregue los indicadores de si este mensaje es la sesión actual JSONObject.put ("ISSOLF", OpenSession.equals (Session)); // Enviar un mensaje en forma de JSON opensession.getAsyncremote (). SendText (jsonObject.ToString ()); }} @Onclose public void Close () {// Agregue una operación al cerrar la sesión} @onerror Public void Error (showable t) {// Agregue una operación para manejar el error}}4. Interacción frontal y detrás del escenario
Después de escribir el fondo, la recepción debe usar WebSocket para conectarse al fondo. Debe crear un nuevo objeto WebSocket, y luego puede interactuar con el servidor, enviar mensajes desde el navegador al servidor y, al mismo tiempo, verificar si el contenido del cuadro de entrada está vacío, luego aceptar mensajes enviados por el servidor, agréguelos dinámicamente al cuadro de contenido de chat,
var um = um.getEditor ('myEditor'); $ ('#Nickname') [0] .focus (); // Cree un nuevo objeto WebSocket, y el último/WebSocket corresponde al lado del servidor @ServerEndpoint ("/WebSocket") var Socket = nuevo WebSocket ('ws: // $ {pageContext.request.getServerName ()}: $ {pageContext.Request.getServerPort ()} $ {PageContext.Request.ContextPath}/WebSocket'); // Procesar datos enviados por el servidor Socket.onmessage = function (event) {addMessage (event.data); }; // Action $ ('#send'). On ('click', function () {var Nickname = $ ('#Nickname'). Val (); if (! Um.hascontents ()) {// Determinar si el cuadro de entrada del mensaje está vacío // el cuadro de entrada de mensaje obtiene foco um.focus (); // Agregar efecto jitter $ ('. setTimeOT ("$ ('. edui-continer'). removeClass ('am-animation-shake')", 1000); $ ('#Message-Input-Name'). AddClass ('AM-Animation-shake'); // Borrar cuadro de entrada Mensaje UM.SetContent (''); // Agregar mensaje a la función de contenido de chat addMessage (mensaje) {mensaje = json.parse (mensaje); 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> <bear>' + Message.Date + '</bear> </div> </header>' + '<div>' + Message.Content + '</div> </div> </li>'; $ (MessageItem) .AppendTo ('#Message-List'); // Desplácese la barra de desplazamiento a los $ (". Chat-contenent-contener"). ScrollTop ($ (". Chat-contenent-contener") [0] .scrollHeight); }En este punto, se completa una simple sala de chat web. Puede abrir varias ventanas más o invitar a amigos a probar juntos en la LAN.
6. Resumen
Esta clase de proyecto utiliza WebSocket para implementar una sala de chat web simple. De hecho, WebSocket no solo se puede aplicar al navegador, sino también a los clientes de escritorio.
7. Preguntas de pensamiento
Esta clase de proyecto es solo una simple implementación de la sala de chat. De hecho, hay muchas funciones que se pueden agregar, como la función de carga Avatar, la función de chat uno a uno, etc., mejoremos la sala de chat.
¿Quieres probarlo de inmediato si ves esto? Haga clic aquí --- proporcionarle un entorno de compilación en línea gratuito para que ya no tenga que preocuparse por construir un entorno
Lo anterior es el conocimiento relevante sobre el uso de Java y WebSocket para implementar el código de ejemplo de la sala de chat web que se le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!