Antes de apresentar o texto principal, deixe -me apresentar os antecedentes e os princípios do WebSocket para você:
fundo
Apenas a comunicação unidirecional pode ser alcançada através do HTTP no navegador. O COMET pode simular a comunicação bidirecional até certo ponto, mas é baixa em eficiência e requer um bom suporte do servidor; O soquete e o XMLSocket no Flash podem realizar a verdadeira comunicação bidirecional, e essas duas funções podem ser usadas no JavaScript através da Flex Ajax Bridge. Pode ser previsível que, se o WebSocket for implementado no navegador, ele substituirá as duas tecnologias acima e será amplamente utilizado. Diante dessa situação, o HTML5 define o protocolo WebSocket, que pode salvar melhor os recursos do servidor e a largura de banda e obter comunicação em tempo real.
O protocolo WebSocket também é implementado em Javaee7.
princípio
Protocolo WebSocket.
Atualmente, para realizar uma comunicação instantânea, muitos sites usam pesquisas. A pesquisa é enviar uma solicitação HTTP ao servidor em um intervalo de tempo específico (como cada 1 segundo), e o servidor retorna os dados mais recentes ao navegador do cliente. Esse padrão de solicitação HTTP tradicional traz desvantagens óbvias. O navegador precisa fazer continuamente solicitações ao servidor. No entanto, o cabeçalho da solicitação HTTP é muito longo, e os dados úteis contidos nela podem ser apenas um valor pequeno, que ocupará muita largura de banda.
O efeito de uma tecnologia mais recente para fazer a pesquisa é que o cometa usa o Ajax. No entanto, embora essa tecnologia possa atingir a comunicação duplex completa, ela ainda requer uma solicitação.
Na API do WebSocket, o navegador e o servidor precisam apenas apertar as mãos e, em seguida, um canal rápido é formado entre o navegador e o servidor. Os dados podem ser transmitidos diretamente entre os dois. Neste protocolo da WebSocket, temos dois grandes benefícios para implementar o serviço instantâneo:
1. Cabeçalho
O cabeçalho que se comunica é muito pequeno - provavelmente apenas 2 bytes
2. Push do servidor
Ao empurrar pelo servidor, o servidor não recebe mais passivamente a solicitação do navegador antes de retornar os dados, mas o empurra ativamente para o navegador quando novos dados estão disponíveis.
1. Introdução ao projeto
O WebSocket é um novo protocolo no HTML5. Ele implementa a comunicação duplex completa entre o navegador e o servidor. Aqui, o WebSocket será usado para desenvolver salas de bate -papo na web. A estrutura do front-end usará Amazeui, Java em segundo plano e umeditor no editor.
2. Envolvendo pontos de conhecimento
Front-end da web (html+css+js) e java
3. Ambiente de software Tomcat 7 JDK 7 Eclipse Javaee Modern Browser
4. Captura de tela de efeito
Efeito 1
Efeito 2
5. Projeto Combate Prático
1. Crie um novo projeto
Abra o Eclipse Javaee, crie um novo projeto dinâmico da Web chamado Chat e, em seguida, importe os pacotes necessários para processar strings de formato JSON, coloque comns-beanutils-1.8.0.jar, commons-collections-3.2.1.jar, comns-lang-2.5.Jar, Commonns-Logging-1.1.Jar, ezmorph-1.0.0..Jar. Outros pacotes são colocados no diretório WebContent/Web-Inf/Lib e, finalmente, publicam o projeto no servidor Tomcat. Neste ponto, o projeto vazio é concluído.
2. Escreva a página do front-end
Crie uma nova página chamada Index.jsp no diretório do WebContent. A estrutura Amazeui é usada aqui. É uma estrutura front-end adaptativa em tela cruzada. A caixa de entrada da mensagem usa a UMEDITOR, que é um editor on -line de texto rico que pode tornar nosso conteúdo de mensagem colorido.
Primeiro, faça o download do pacote compactado no site oficial da Amazeui e descompacte a pasta de ativos e copie o diretório do WebContent, para que possamos usar o Amazeui.
Em seguida, faça o download da mini versão do pacote de compactação da versão JSP do site oficial da Uediter, descubra o diretório inteiro no diretório da webContent e, em seguida, você pode escrever o código do front-end, o código é o seguinte (você pode escrevê-lo de acordo com sua preferência):
<%@ página linguagem = "java" contentType = "text/html; charset = utf-8" pageEncoding = "utf-8"%> <! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <tena http-mequiv "> name = "viewport" content = "width = largura do dispositivo, escala inicial = 1, escala máxima = 1, scalable = no"> <title> shiyanlou chat </title> <!-defina o mecanismo de renderização para o navegador 360-> <meta name = "renderer" = "webkit" <!-não http-equiv = "cache-control" content = "no-siteApp"/> <link rel = "Icon alternativo" href = "Assets/i/favicon.ico"> <link rel = "Stylesheet" href = "Assets/css/Amazeui.min.css"> <link href = "Assets/css/app.css"> <!-umeditor css-> <link href = "umeditor/temas/default/css/umeditor.css" rel = "stylesheet"> <estilo> .title {text-align: center;}. Overflow-y: rolagem; Border: 1px Sill Sill Sill;} </style> </ad Head> <body> <!-Título Iniciar-> <div> <div> <div> <div> <h1> shiyanlou chat </h1> </div> </div> </div> <//div> <!!-title end-> <div> <div> </Div> <list> Conteúdo do bate-papo Iniciar-> <!-Entrada de mensagem Iniciar-> <div> <div> <form> <div> <script type = "text/plana" id = "myeditor"> </script> </div> </fort> </div> </divplaname <npan> <div> <div> <div> <div> <div> </i/me mensagem </npin> <npan> <div> <div> type = "text" placeholder = "digite o apelido"/> </div> </div> <div> <script src = "Assets/js/jQuery.min.js"> </script> <!-<!-[se lte ie 8]> <fript> <! 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"> </cript> <cript> src = "umeditor/lang/zh-cn/zh-cn.js"> </script> <cript> $ (function () {// inicialize a caixa de entrada da mensagem var um = um.getEditor ('myeditor'); // Faça a caixa de apelido obter foco $ ('#apelido') [0] .focus (); }); </script> </body> </html>Depois de escrever, inicie o servidor Tomcat e visite http: // localhost: 8080/chat/index.jsp e você verá a seguinte interface.
3. Escreva o código de fundo
Crie um novo pacote de com.shiyanlou.chat, crie uma classe chamada ChatServer no pacote. A API do WebSocket foi unificada desde o Javaee 7. Portanto, não importa qual seja o servidor, o código escrito em Java é o mesmo, e o código é o seguinte:
pacote com.shiyanlou.chat; importar java.text.simpledEformat; importe java.util.date; importar javax.websocket.onclose; importar javax.websocket.onerror; import javax.webocket.onMessage; importocket.webesock.ononer; javax.websocket.server.serverendpoint; importar net.sf.json.jsonObject;/** * Classe de servidor de bate-papo * @author shiyanlou * */ @serverEnDPoint ("/webSocket") public class (static stickFormat-TeNtAtMat)/webSocketMatsMatsMatsTATATATATATATATATATATATATEMY; @Onopen public void Open (sessão de sessão) {// Adicione a operação de inicialização} / *** Aceite a mensagem do cliente e envie a mensagem para todas as sessões conectadas* @param mensagem mensagem do cliente* @param sessão da sessão do cliente* / @onmessage public void getMessage (string message) {// parse o cliente em um cliente do cliente JSONOB (String Message) {// Parse do cliente em um JSON em um JSON OBJETO JSONO // Adicione a data de envio na mensagem jsonObject.put ("date", date_format.format (new date ())); // Envie a mensagem para todas as sessões conectadas para (Sessão OpenSession: session.getOnSessions ()) {// Adicione os sinalizadores de se essa mensagem é a própria sessão atual jsonObject.put ("isSelf", OpenSession.Equals (Sessão)); // Envie uma mensagem JSON formatada openSession.Getasyncremote (). SendText (jsonObject.toString ()); }} @Onclose public void Close () {// Adicione uma operação ao fechar a sessão} @ONerror Public Void Erro (Throwable T) {// Adicione uma operação para lidar com o erro}}4. Interação frontal e nos bastidores
Depois de escrever o plano de fundo, a recepção precisa usar o WebSocket para se conectar ao plano de fundo. Você precisa criar um novo objeto WebSocket e, em seguida, interagir com o servidor, enviar mensagens do navegador para o servidor e, ao mesmo tempo
var um = um.getEditor ('myeditor'); $ ('#apelido') [0] .focus (); // cria um novo objeto websocket, e o último/websocket corresponde ao servidor @serverendpoint ("/websocket") Websocket ('ws: // $ {PagEContext.request.getServerName ()}: $ {PagEContext.request.getServerport ()} $ {PageContext.request.ContextPath}/websocket'); // Processar dados enviados pelo soquete do servidor.onmessage = function (event) {addMessage (event.data); }; // Action $ ('#send'). On ('clique', function () {var apelido = $ ('#apelido'). Settimeout ("$ ('. Edui-container'). $ ('#Message-Input-NickName'). AddClass ('AM-Animação-S-SHAKE'); // caixa de entrada CLARE MENSAGEM UM.SETCONTENT (''); // Adicione a mensagem à função de conteúdo de bate -papo addMessage (message) {message = json.parse (mensagem); var messageItem = '<li>' + '<a href = "javascript: void (0)"> <img src = "Assets/Images/' + (message.issefl? message.nickname + '</a> <time>' + message.date + '</time> </div> </header>' + '<div>' + message.content + '</div> </div> </li>'; $ (MessageItem) .AppendTo ('#Lista de mensagens'); // role a barra de rolagem até o $ (". Chat-content-container"). Scrolltop ($ (". Chat-content-container") [0] .ScrolHeight); }Neste ponto, uma simples sala de bate -papo na web é concluída. Você pode abrir várias janelas ou convidar amigos para testar juntos na LAN.
6. Resumo
Esta classe de projeto usa o WebSocket para implementar uma sala de bate -papo simples. De fato, o WebSocket pode não apenas ser aplicado ao navegador, mas também a clientes de mesa.
7. Perguntas de pensamento
Esta aula de projeto é apenas uma implementação simples da sala de bate -papo. De fato, existem muitas funções que podem ser adicionadas, como a função de upload de avatar, função de bate-papo individual, etc. Vamos melhorar a sala de bate-papo juntos.
Você quer experimentar imediatamente se vir isso? Clique aqui --- fornecer a você um ambiente gratuito de compilação on-line para que você não precise mais se preocupar em criar um ambiente
O exposto acima é o conhecimento relevante sobre o uso de Java e WebSocket para implementar o código de exemplo de sala de bate -papo na web introduzido a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!