Implementazione di una connessione WebSocket basata su Tomcat 7.0 in HTML5 e implementazione di una chat in tempo reale semplice

1) Cos'è WebSocket?

WebSocket è una connessione naturale full-duplex, bidirezionale e a singolo socket. Utilizzando WebSocket, la tua richiesta HTTP diventa una singola richiesta per aprire una connessione WebSocket (WebSocket o WebSocket over TLS (Transport Layer Security, sicurezza del livello di trasporto, noto anche come SSL)), e riutilizza la stessa connessione sia dal client al server che dal server al client. WebSocket riduce i ritardi perché una volta stabilita la connessione WebSocket, il server può inviare i messaggi quando sono disponibili. Ad esempio, diversamente dal polling, WebSocket invia solo una richiesta. Il server non deve aspettare richieste dal client. Allo stesso modo, il client può inviare messaggi al server in qualsiasi momento. In contrasto con il polling, che invia una richiesta ogni tanto indipendentemente dalla disponibilità di messaggi, una singola richiesta riduce significativamente i ritardi.

2) API WebSocket

L'API WebSocket ti permette di stabilire una comunicazione bidirezionale e full-duplex tra l'applicazione client e il processo server-side tramite il Web. L'interfaccia WebSocket specifica i metodi disponibili per il client e il modo in cui il client interagisce con la rete.

3) Costruttore WebSocket

Per stabilire una connessione WebSocket con il server, utilizzare l'interfaccia WebSocket, puntando a un URL che rappresenta il punto di connessione desiderato, per istanziare un oggetto WebSocket. Il protocollo WebSocket definisce due schemi di URL (URL scheme) - ws e wss, rispettivamente per il traffico non crittografato e crittografato tra client e server.

Esempio: var ws = new WebSocket("ws://www.websocket.org");

4) Eventi WebSocket

L'API WebSocket è completamente驱动的 da eventi. Il codice dell'applicazione ascolta gli eventi dell'oggetto WebSocket per gestire i dati di input e le modifiche allo stato della connessione. Anche il protocollo WebSocket è驱动的 da eventi.

L'oggetto WebSocket gestisce 4 eventi diversi:

A) Evento open:

Una volta che il server ha risposto alla richiesta di connessione WebSocket, viene attivato l'evento open e si stabilisce una connessione. La funzione di callback corrispondente all'evento open si chiama onopen

Esempio:

ws.onopen = function(e) {
console.log("Connessione aperta...");
};

B, evento messagess:

L'evento message viene attivato quando si riceve un messaggio, la funzione di callback corrispondente all'evento message è onmessage.

Esempio:

ws.onmessage = function(e) {
if(typeof e.data === "string"){
console.log("Messaggio in stringa ricevuto", e, e.data);
} else {
console.log("Altri messaggi ricevuti", e, e.data);
}
};

C, evento error:

L'evento error viene attivato quando si verifica un guasto inaspettato. La funzione di callback corrispondente all'evento error è onerror.
Esempio:

ws.onerror = function(e){
console.log('errore websocked');
handerError();
}

D, evento close:

L'evento close viene attivato quando la connessione WebSocket viene chiusa. La funzione di callback corrispondente all'evento close è onclose.

Esempio:

ws.onclose = function(e) {
console.log("Connessione chiusa", e);
};

5, Metodi WebSocket

L'oggetto WebSocket ha due metodi: send() e close().

A, metodo send():

Dopo aver stabilito una connessione full-duplex bidirezionale tra client e server tramite WebSocket, è possibile chiamare il metodo send() quando la connessione è aperta. Utilizzando il metodo send() è possibile inviare messaggi dal client al server. Dopo aver inviato un messaggio o più messaggi, è possibile mantenere aperta la connessione o chiamare il metodo close() per terminare la connessione.

Esempio:

ws.send("Hello WebSocket!");

B, metodo close():

Utilizzando il metodo close(), è possibile chiudere la connessione WebSocket o interrompere il tentativo di connessione. Se la connessione è già stata chiusa, il metodo non fa nulla. Dopo aver chiamato close(), non è possibile inviare alcun dato sulla WebSocket già chiusa. È possibile passare due parametri opzionali a close(): code (un codice di stato numerico) e reason (una stringa di testo). Passare questi parametri consente di trasmettere informazioni al server riguardo al motivo per cui il cliente ha chiuso la connessione.

Nota: La seguente è una breve introduzione a WebSocket, seguita da un esempio di applicazione di chat web in tempo reale per illustrare come utilizzare WebSocket

A: Prima di tutto, creare un nuovo progetto chiamato chatroom, quindi creare una directory e creare una classe per implementare la connessione del server, il cui nome è ChatWebSocketServlet.Java;

Configurazione del progetto dettagliata come illustrato di seguito:

　

B: Scrivere la classe di implementazione del server ChatWebSocketServlet.java come segue:

package com.yc.chat.Servlet;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound: Implementazione WebSocket basata su stream (con stream interni), l'applicazione deve estendere questa classe e implementare i suoi metodi astratti onBinaryData e onTextData.
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound: Implementazione WebSocket basata su messaggi (con messaggi interni), l'applicazione deve estendere questa classe e implementare i suoi metodi astratti onBinaryMessage e onTextMessage.
@Override
protected void onOpen(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super.onOpen(outbound);
}
@Override
protected void onClose(int status) {
map.remove(getWsOutbound().hashCode());
super.onClose(status);
}
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer buffer) throws IOException {
String msg = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
msg = "<font color=green>Utente Anonimo</font><br/>" + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set<Integer> set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

C: Implementare la pagina front-end index.jsp (per illustrare le funzionalità, non è stata ottimizzata e sembra rudimentale) Il codice specifico è il seguente:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sala di chat WebSocket</title>
<style type="text/css">
#chat {
text-align: left;
width: 600px;
height: 500px;
width: 600px;
}
#up {
text-align: left;
width: 100%;
height: 400px;
border: 1px solid green;
OVERFLOW-Y: auto;
}
#down {
text-align: left;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<h2 align="center">Sala di chat basata su HTML5</h2>
<div align="center" style="width: 100%; height: 700px;">
<div id="chat">
<div id="up"></div>
<div id="down">
<textarea type="text" style="width: 602px; height: 100%;" id="send"></textarea>
</div>
</div>
<input type="button" value="Connettiti" onclick="chat(this);"> <input
type="button" value="invia" onclick="send(this);" disabled="disabled"
id="send_btn" title="[#1#]">
</div>
</body>
<script type="text/javascript">
var socket;
var receive_text = document.getElementById("up");
var send_text = document.getElementById("send");
function addText(msg) {
receive_text.innerHTML += "<br/>" + msg;
receive_text.scrollTop = receive_text.scrollHeight;
}
var chat = function(obj) {
obj.disabled = "disabled";
socket = new WebSocket('ws://localhost:8080/chatroom/chat');
receive_text.innerHTML += "<font color=green>正在连接服务器……</font>";
//打开Socket 
socket.onopen = function(event) {
addText("<font color=green>连接成功！</font>");
document.getElementById("send_btn").disabled = false;
send_text.focus();
document.onkeydown = function(event) {
if (event.keyCode == 13 && event.ctrlKey) {
send();
}
}
};
socket.onmessage = function(event) {
addText(event.data);
};
socket.onclose = function(event) {
addText("<font color=red>连接断开！</font>");
obj.disabled = "";
};
if (socket == null) {}}
addText("<font color=red>Connessione fallita!</font>");
}
};
var send = function(obj) {
if (send_text.value == "") {
return;
}
socket.send(send_text.value);
send_text.value = "";
send_text.focus();
}
</script>
</html>

Ecco una semplice pagina di chat in tempo reale pronta. Ora,部署项目 su server Tomcat 7.0 e avvia il server per abilitare la chat.

Visualizzazione dei risultati:

1. Inserisci l'indirizzo del server nella barra degli indirizzi:

http://127.0.0.1:8080/chatroom/index.jsp

Cliccando su 'Connetti al server' i risultati sono i seguenti:

　

2. Apri due browser diversi e invia messaggi l'uno all'altro (qui utilizzo Google e Firefox) con i risultati seguenti:

Come descritto sopra, l'editor ha introdotto agli utenti come implementare la connessione WebSocket basata su Tomcat 7.0 e realizzare una semplice chat in tempo reale. Spero che sia utile agli utenti. Se avete domande, lasciate un messaggio e l'editor risponderà tempestivamente. Ringrazio anche tutti i sostenitori del sito web tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.