Probieren wir WebSocket mit Java und Javascript aus!

Verwenden Sie Java und Javascript (mit jQuery)

1. Schreiben Sie die Serverseite in Java. Wenn Sie die Kommentare im Code lesen, können Sie die Erklärung des Inhalts verstehen.

WebSocketServer.java

package main.java;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

//Damit WebSocket Server
//URL kann mit einem Platzhalter versehen werden
@ServerEndpoint("/WebSocketServer")
public class WebSocketServer {

	//Session(Kommunikation)Karte zum Speichern
	private static Map<String, Session> session = new HashMap<>();

	//Variable zum Speichern Ihrer ID
	 String myId = "";

	 //Variable zum Speichern Ihres Namens
	 String myName = "";

	/**
	 *Methode beim Verbinden aufgerufen
	 */
	@OnOpen
	public void onOpen(final Session client, final EndpointConfig config) {
		/*Verarbeitung beim Einrichten einer Sitzung*/
		String log = client.getId() + " Was connected.";
		System.out.println(log);

	}

	/**
	 *Methode bei Fehler aufgerufen
	 */
	@OnError
	public void onError(final Session client, final Throwable error) {
		/*Verarbeitung, wenn ein Fehler auftritt*/
		String log = client.getId() + " was error. [" + error.getMessage() + "]";
		System.out.println(log);
	}

	/**
	 *Methode, die beim Trennen aufgerufen wird
	 */
	@OnClose
	public void onClose(final Session client, final CloseReason reason) throws IOException {
		/*Verarbeitung beim Freigeben einer Sitzung*/
		String log = client.getId() + " was closed by " + reason.getCloseCode() + "[" + reason.getCloseCode().getCode()
				+ "]";
		System.out.println(log);
	}

	/**
	 *Die Methode, die aufgerufen wird, wenn die Nachricht aufgerufen wird
	 */
	@OnMessage
	public void onMessage(final String text, final Session client) throws IOException {
		/*Verarbeitung beim Empfang einer Nachricht*/
		System.out.println("WebSocket-Empfang:" + text);

		//Es wird angenommen, dass der Inhalt der Nachricht durch Zeilenumbrüche getrennt betrieben wird und die ID beschrieben wird.
		String[] t = text.split("\n");
		String event = t[0];
		String id = t[1];

		System.out.println("EVENT:" + event);
		System.out.println("ID:" + id);
		switch (event) {

		case "login":
			//Speichern Sie die Sitzung in HashMap
			session.put(id, client);
			//Speichern Sie die ID in einer Variablen.
			myId = id;

			//Schneiden Sie den Namen aus
			int strSize = id.length();
			int cutLength = 4;
			int nameCut = strSize - cutLength;
			//Speichern Sie nur den Namen in der Variablen
			myName = id.substring(0,nameCut);
			System.out.println("Name ausschneiden:" + myName);

			//Senden Sie eine Zeichenfolge an die durch id gespeicherte Sitzung
			Session mySession = session.get(id);
			mySession.getBasicRemote().sendText("Welcom to " + myName + " !!");
			System.out.println("login:" + id);
			break;

		case "commit":
			//Übertragung
			for (Session s : session.values()) {
				s.getBasicRemote().sendText(myName + ": " + t[1]);
			}
			System.out.println("commit:" + t[1]);
			break;

		case "close":
			//Aus der Sitzungsliste entfernen
			System.out.println("ID zu löschen:" + myId);
			//Gespeicherte Sitzung löschen
			session.remove(myId);
			System.out.println("close:Sitzung löschen");
			break;
		}
	}
}

2. Schreiben Sie das Javascript auf der Client-Seite. Ich würde mich freuen, wenn Sie die Kommentare auch hier lesen könnten.

script.js

$(function() {
	var url = 'ws://' + window.location.host + '/SampleServer/WebSocketServer';
    var ws = null;
    var inputId;
    console.log('Ort:' + window.location.host);

		//Variablen zur Erzeugung von 4-stelligen Zufallszahlen
		var min = 1000;
		var max = 9999;

		//Salt-Code zum Anhängen an den Namen und Konvertieren in ID
		var saltCode;

    //Drücken Sie den initButton und es wird hier ausgeführt
      $('#login').on("click",function() {
        if (ws == null) {
            inputId = $('#box1').find('input').val();
             //Wenn die ID leer ist, registrieren Sie sich nicht
             if(inputId != "") {
            //Websocket initialisieren
             ws = new WebSocket(url);
            //Registrierung des Event-Handlers
             ws.onopen = onOpen;
             ws.onmessage = onMessage;
             ws.onclose = onClose;
             ws.onerror = onError;
             console.log("ID:" + inputId);
            } else {
                alert("Bitte geben Sie Ihren ID-Namen ein!!");
            }
        }

      });

    //WebSocket open
    function onOpen(event) {
       $("#log").prepend("&lt;onopen&gt; " + "<br/>");
        console.log("Aufbau einer WebSocket-Verbindung");
				//Generieren Sie eine 4-stellige zufällige Ganzzahl
				saltCode = Math.floor(Math.random() * (max + 1 - min)) + min;
				//Explizit in String umwandeln
				String(saltCode);
				//Erstellen Sie eine ID, indem Sie den Salt-Code anhängen
				inputId = inputId + saltCode;
				console.log('ID mit Salzcode:' + inputId);
       ws.send("login\n" + inputId);
    };

    //WebSocket message
    function onMessage(receive) {
       $("#log").prepend(receive.data + "<br/><br/>");
        console.log("Antwortnachricht:" + receive.data);
    };

    //WebSocket error
    function onError() {
        $("#log").prepend("&lt;onerror&gt; " + "<br/>");
        console.log("Fehlerbehandlung");
        alert("error");
    };

    //WebSocket close
    function onClose() {
        $("#log").prepend("&lt;onclose&gt; " + "<br/>");
        ws.send("close\ndelete")
        ws = null;
        console.log("WebSocket-Trennung");
    };


    //Fenster geschlossen(Beispiel:Den Browser geschlossen)Zeitereignis einstellen
    $(window).on("beforeunload",function() {
        ws.onclose(); //WebSocket close
    });

    //Senden Sie mit WebSocket eine Nachricht an den Server
   $('#send').on('click',function() {
       var sendMessage = $('#message').val();
       console.log("Botschaft:" + sendMessage);
       if(sendMessage != "") {
       ws.send("commit\n" + sendMessage);
           $('#message').val("");
       } else {
           console.log("Ich werde es nicht senden, weil es leer ist");
       }
   });
});

3. Bereiten Sie ein einfaches HTML vor.

index.html

<!DOCTYPE html>

<html>
<head>
    <title>WebSocket Server Sample</title>
    <meta charset="utf-8"/>
    <script src="js/lib/jquery-3.4.1.min.js"></script>


    </head>
<body>
    <div id="box1">
    <input type="text" id="id" placeholder="inputID" />
    <button id="login">login</button>
        </div>
    <br/>
    <div id="box2">
    <input type="text" id="message" placeholder="inputMessage" />
        <button id="send">send</button>
        </div>
    <br/>
    <div id="log"></div>
    <script src="js/script.js"></script>
    </body>
</html>

Ich denke es funktioniert so.

Melden Sie sich als anderer Benutzer an und senden Sie eine Nachricht.

Sie erhalten eine Nachricht. !! !!

Ich kann die Nachricht richtig lesen.

Mit webSocket konnten wir auf diese Weise ein einfaches Chat-System erstellen. Es scheint, dass interessante Dinge durch Verknüpfung mit einer Datenbank oder Aufbau eines Systems erstellt werden können. Das Obige ist eine einfache Websocket-Implementierung.

Vielen Dank für das Lesen bis zum Ende.