Essayons WebSocket avec Java et javascript!

Utiliser Java et javascript (en utilisant jQuery)

1. Écrivez le côté serveur en Java. Si vous lisez les commentaires dans le code, vous pouvez comprendre l'explication du contenu.

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;

//Avec cela, WebSocket Server
//L'URL peut être générique
@ServerEndpoint("/WebSocketServer")
public class WebSocketServer {

	//Session(la communication)Carte à enregistrer
	private static Map<String, Session> session = new HashMap<>();

	//Variable pour stocker votre identifiant
	 String myId = "";

	 //Variable pour stocker votre nom
	 String myName = "";

	/**
	 *Méthode appelée lors de la connexion
	 */
	@OnOpen
	public void onOpen(final Session client, final EndpointConfig config) {
		/*Traitement lors de l'établissement d'une session*/
		String log = client.getId() + " Was connected.";
		System.out.println(log);

	}

	/**
	 *Méthode appelée en cas d'erreur
	 */
	@OnError
	public void onError(final Session client, final Throwable error) {
		/*Traitement lorsqu'une erreur se produit*/
		String log = client.getId() + " was error. [" + error.getMessage() + "]";
		System.out.println(log);
	}

	/**
	 *Méthode appelée lors de la déconnexion
	 */
	@OnClose
	public void onClose(final Session client, final CloseReason reason) throws IOException {
		/*Traitement lors de la libération d'une session*/
		String log = client.getId() + " was closed by " + reason.getCloseCode() + "[" + reason.getCloseCode().getCode()
				+ "]";
		System.out.println(log);
	}

	/**
	 *La méthode appelée lorsque le message est appelé
	 */
	@OnMessage
	public void onMessage(final String text, final Session client) throws IOException {
		/*Traitement lors de la réception d'un message*/
		System.out.println("Réception WebSocket:" + text);

		//On suppose que le contenu du message est exploité séparément par des sauts de ligne et que l'identifiant est décrit.
		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":
			//Enregistrer la session dans HashMap
			session.put(id, client);
			//Stockez l'ID dans une variable.
			myId = id;

			//Découpez le nom
			int strSize = id.length();
			int cutLength = 4;
			int nameCut = strSize - cutLength;
			//Enregistrer uniquement le nom dans la variable
			myName = id.substring(0,nameCut);
			System.out.println("Nom découpé:" + myName);

			//Envoyer une chaîne à la session enregistrée par identifiant
			Session mySession = session.get(id);
			mySession.getBasicRemote().sendText("Welcom to " + myName + " !!");
			System.out.println("login:" + id);
			break;

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

		case "close":
			//Supprimer de la liste des sessions
			System.out.println("ID à supprimer:" + myId);
			//Supprimer la session enregistrée
			session.remove(myId);
			System.out.println("close:Supprimer la session");
			break;
		}
	}
}

2. Écrivez le javascript côté client. J'apprécierais que vous lisiez également les commentaires ici.

script.js

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

		//Variables pour générer des nombres aléatoires à 4 chiffres
		var min = 1000;
		var max = 9999;

		//Code Salt à attacher au nom et à le convertir en ID
		var saltCode;

    //Appuyez sur le bouton initButton et il fonctionnera ici
      $('#login').on("click",function() {
        if (ws == null) {
            inputId = $('#box1').find('input').val();
             //Si l'ID est vide, ne vous enregistrez pas
             if(inputId != "") {
            //Initialiser Websocket
             ws = new WebSocket(url);
            //Inscription du gestionnaire d'événements
             ws.onopen = onOpen;
             ws.onmessage = onMessage;
             ws.onclose = onClose;
             ws.onerror = onError;
             console.log("ID:" + inputId);
            } else {
                alert("Veuillez saisir votre identifiant!!");
            }
        }

      });

    //WebSocket open
    function onOpen(event) {
       $("#log").prepend("&lt;onopen&gt; " + "<br/>");
        console.log("Établissement de la connexion WebSocket");
				//Générer un entier aléatoire à 4 chiffres
				saltCode = Math.floor(Math.random() * (max + 1 - min)) + min;
				//Cast explicitement en chaîne
				String(saltCode);
				//Créer un identifiant en joignant un code salt
				inputId = inputId + saltCode;
				console.log('ID avec code sel:' + inputId);
       ws.send("login\n" + inputId);
    };

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

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

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


    //fenêtre fermée(Exemple:Fermé le navigateur)Définir l'événement de temps
    $(window).on("beforeunload",function() {
        ws.onclose(); //WebSocket close
    });

    //Envoyer un message au serveur à l'aide de WebSocket
   $('#send').on('click',function() {
       var sendMessage = $('#message').val();
       console.log("message:" + sendMessage);
       if(sendMessage != "") {
       ws.send("commit\n" + sendMessage);
           $('#message').val("");
       } else {
           console.log("Je ne l'enverrai pas car il est vide");
       }
   });
});

3. Préparez un simple HTML.

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>

Je pense que ça marche comme ça.

Connectez-vous en tant qu'autre utilisateur et envoyez un message.

Vous recevrez un message. !! !!

Je peux lire le message correctement.

En utilisant webSocket de cette manière, nous avons pu créer un système de chat simple. Il semble que des choses intéressantes peuvent être créées en établissant des liens avec une base de données ou en construisant un système. Ce qui précède est une simple implémentation Websocket.

Merci d'avoir lu jusqu'au bout.