Cómo utilizar Java Web y WebSocket para implementar mensajería instantánea en red

Principio

Protocolo WebSocket.

La técnica que utilizan muchas webs para implementar la mensajería instantánea es el sondeo. El sondeo es un proceso en el que el navegador envía solicitudes HTTP al servidor a intervalos específicos (por ejemplo, cada segundo) y luego el servidor devuelve los datos más recientes al navegador del cliente. Este modelo de solicitud HTTP tradicional tiene desventajas obvias: el navegador necesita enviar solicitudes continuamente al servidor, pero los encabezados de las solicitudes HTTP son muy largos y pueden contener solo una pequeña cantidad de datos útiles, por lo que ocupan mucho ancho de banda.

Una tecnología de sondeo más nueva es Comet, que utiliza AJAX, pero aunque esta tecnología permite la comunicación full-duplex, aún requiere realizar una solicitud.

En la API WebSocket, el navegador y el servidor solo necesitan realizar un protocolo de enlace y luego se forma un canal rápido entre el navegador y el servidor. Luego, los dos pueden enviarse datos directamente entre sí. En este protocolo WebSocket, la implementación del servicio instantáneo tiene dos beneficios principales:

1. Encabezado

El encabezado utilizado para la comunicación mutua es muy pequeño: alrededor de 2 bytes

Server push significa que el servidor ya no recibe pasivamente solicitudes del navegador antes de devolver datos, sino que envía nuevos datos al navegador cuando están disponibles.

I. Introducción al proyecto

WebSocket es un nuevo protocolo en HTML5 que implementa comunicación full-duplex entre el navegador y el servidor. Usaremos WebSocket para desarrollar una sala de chat en red. el marco de front-end usa AmazeUI, el back-end usa Java y el editor usa UMEditor.

2. Puntos de conocimiento involucrados

Frontal de página web (HTML CSS JS) y Java

3. Navegador moderno Tomcat 7 JDK 7 Eclipse JavaEE.

4. Capturas de pantalla de efectos

Efecto 1

Efecto 2

5 Proyecto de combate real

1. Nuevo proyecto

Abra Eclipse JavaEE, cree un nuevo proyecto web dinámico llamado Chat y luego importe los paquetes necesarios para procesar cadenas en formato JSON, a saber, commons-beanutils-1.8.0.jar, commons-collections-. 3.2 .1.jar, commons-lang-2.5.jar, commons-logging-1.1.1.jar, ezmorph-1.0.6.jar y json-lib-2.4-jdk15.jar Estos paquetes se colocan en WebContent/WEB. -Directorio INF / lib, finalmente publique el proyecto en el servidor Tomcat y coloque este proyecto vacío en el servidor Tomcat después de completar la compilación.

2. Escriba la página de inicio

Cree una nueva página llamada index.jsp en el directorio WebContent. Aquí se utiliza el marco AmazeUI, que es un frente adaptable entre pantallas. -end framework El cuadro de entrada del mensaje utiliza UMEditor, que es un editor de texto enriquecido en línea que hará que el contenido de nuestro mensaje sea rico y colorido.

Primero, descargue el paquete comprimido del sitio web oficial de AmazeUI, descomprímalo y copie la carpeta de activos en el directorio WebContent, para que podamos usar AmazeUI.

Y luego, desde el sitio web oficial de UEditer, descargue la versión Mini de la versión JSP del paquete zip, descomprima la copia del directorio completo en el directorio WebContent y luego podrá escribir el código de interfaz, el El código es el siguiente (puedes escribirlo según tus preferencias):

1234567891011121314151617181920212223242526272829303132334353637383940414243444546474849505152535 45 55657585960616263646566676869707172737475767778798081828384858687888990919293 lt; @ idioma de página="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF - 8"gt;lt;lt;!DOCTYPE htmlgt;lt;html lang="zh"gt; lt;headgt;lt;meta charset="utf-8"gt;lt;meta /zh-cn.js"gt ; lt;/scriptgt;? lt;scriptgt;?$(function() {//Inicializa el cuadro de entrada del mensaje var um = UM.getEditor('myEditor'); // Activa el cuadro de apodo $('#nickname' )[ 0].focus();?}) ;?lt;/scriptgt;lt;/bodygt;lt;/htmlgt;

Una vez completada la escritura, inicie el servidor Tomcat y luego acceda al Paquete .shiyanlou.chat. Cree una clase denominada ChatServer en el paquete y unifíquela con JavaEE 7.WebSocket API.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 paquete com.shiyanlou.chat; websocket.OnOpen; importar javax.websocket.Session; importar javax.websocket.server.ServerEndpoint; importar net.sf..JSONObject; ;/**?Punto final del servidor; import net.sf.json .JSONObject;/**?* @author shiyanlou?*/@ServerEndpoint("/websocket") clase pública ChatServer {?//Formato de fecha@OnOpen?public void open(Session session) { // ¿Agregar una operación de inicialización?｝?/**?* Acepta mensajes del cliente y los envía a todas las sesiones conectadas.

* @param mensaje ¿Mensaje del cliente? * @param sesión ¿Sesión de cliente? */?@OnMessage?public void getMessage(String message, Session session) { // Analizar el mensaje del cliente en un objeto JSON JSONObject jsonObject = JSONObject.fromObject(message);?// Agregar la fecha de envío al mensaje?jsonObject. put("date", DATE_FORMAT.format(new Date());?// ¿Enviar un mensaje a todas las sesiones conectadas?for (Session openSession: session.getOpenSessions()) {// Si el mensaje proviene de la sesión actual , luego agregue la etiqueta jsonObject.put("isSelf", openSession.equals( session)); // Enviar mensaje en formato JSON openSession.getAsyncRemote().sendText(jsonObject.toString()); ?

4.

4. Interacción entre el front-end y el back-end

Cuando se escribe el back-end, el front-end utilizará WebSocket para conéctese al back-end y es necesario crear un nuevo objeto WebSocket, luego puede interactuar con el lado del servidor enviando un mensaje desde el navegador al lado del servidor, mientras verifica que el contenido del cuadro de entrada esté vacío. y luego aceptar el mensaje enviado por el lado del servidor y agregarlo dinámicamente al cuadro de contenido del chat

1234567891011121314151617181920212223242526272829303132333435363739404142434445464748495051525354 var um = UM.contextPath}/ websocket'); // Procesa los datos enviados desde el socket del lado del servidor. .onmessage = function(event) {addMessage(event.data);} // Acciones al hacer clic en el botón Enviar $('#send').on('click', function() { var apodo = $('# apodo').val(); if (!um.hasContents()) { // Determinar si el cuadro de entrada del mensaje está vacío // ¿Obtener el foco del cuadro de mensaje? // ¿Agregar efecto de inquietud? $('.edui-container').addClass('am-animation-shake');?setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000); } else if (nickname == '') { // ¿Comprueba si el cuadro de apodo está vacío? // ¿Se enfoca el cuadro de apodo? $('#nickname')[0].focus();?// ¿Agregar efecto de inquietud? $('#message-input-apodo').addClass('am-animatio

n-shake');?setTimeout("$('#message-input-nickname').removeClass('am-animation-shake')", 1000); else {? (JSON.stringify({?content: um.getContent(), ?apodo: apodo?}));?// ¿Borrar cuadro de mensaje? // ¿Obtener foco en el cuadro de mensaje? um.focus(); }}); // Agregar el mensaje a la función de chat addMessage(message) {message = JSON.parse(messageItem = 'lt; ="soy-comentario '? (message.isSelf ? 'soy-comentario-flip' : 'soy-comentario')? '"gt;'? 'lt;a href="javascript:void(0)" gt;lt ;img src="assets/images/?'? (message.isSelf ? 'self.png' : 'otros.jpg')? '" alt="" width="48" height="48"/gt;lt; /agt;'? 'lt;divgt;lt;headergt;lt;divgt;'? 'lt;a href="javascript:void(0)"gt;'? mensaje.apodo 'lt;/agt;lt;timegt ;' mensaje.fecha? 'lt;/timegt;lt;/divgt;lt;/divgt;'? 'lt;divgt;' mensaje.contenido? ';$(messageItem).appendTo('#message-list'); // Desplaza la barra de desplazamiento hasta el final $(".chat -content-container").scrollTop($(".chat-content-container" ) [0].scrollHeight);}

En este punto, puede seleccionar "..." en la pestaña "...".

En este punto, la sencilla sala de chat en línea está completa. Puede abrir algunas ventanas más o invitar a sus amigos a probar juntos en la LAN.

6. Resumen

Esta clase de proyecto utiliza WebSocket para implementar una sala de chat en línea simple. De hecho, WebSocket se puede aplicar no solo a navegadores, sino también a clientes de escritorio.