首页 > 解决方案 > 无法从 Java WebSocket 向 JS 客户端发送消息

问题描述

我是 Java WebSocket 的新手,正在尝试简单的 WebSocket 客户端-服务器通信。我能够将消息从客户端发送到服务器端点。我也可以在服务器端点接收消息,但无法发送给客户端。

我的服务器端点看起来像 -

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

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;

@ServerEndpoint(value = "/satya")
public class TesWS {

    Session gSession;
    Map<String, Session> sessions = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("New Session got connected");
        this.gSession = session;
        System.out.println("onOpen Session -  " + session.toString());
        sessions.put(session.toString(), session);

    }

    @OnClose
    public void onClose() {

    }

    @OnMessage
    public void onMessage(String s, Session session) {
        System.out.println("New Text Message Received : " + s);
        for (Session sess : session.getOpenSessions()) {
            if (sess.isOpen()) {
                System.out.println("onMessage Session - " + session.toString());
                session.getAsyncRemote().sendText("Message From Java");
                System.out.println("Messgae Sent from Java");
            }
        }
    }

    @OnError
    public void onError(Throwable e) {
        e.printStackTrace();
    }
}

我的 JS 客户端代码是 -

<html>
<head>
    <style>
        #messages {
            text-align: left;
            width: 50%;
            padding: 1em;
            border: 1px solid black;
        }
    </style>
    <title>Sample WebSocket Client</title>
</head>
<body>
<div class="container">
    <div id="messages" class="messages"></div>
    <div class="input-fields">
        <p>Type a message and hit send:</p>
        <input id="message"/>
        <button id="send">Send</button>

        <p>Select an image and hit send:</p>
        <input type="file" id="file" accept="image/*"/>

        <button id="sendImage">Send Image</button>
    </div>
</div>
</body>
<script>
    const messageWindow = document.getElementById("messages");

    const sendButton = document.getElementById("send");
    const messageInput = document.getElementById("message");

    const fileInput = document.getElementById("file");
    const sendImageButton = document.getElementById("sendImage");

    const socket = new WebSocket("ws://localhost:9090/jERRY/satya");
    socket.binaryType = "arraybuffer";

    socket.onopen = function (event) {
        addMessageToWindow("Connected");
    };

    socket.onmessage = function (event) {
        alert("GOT MESSAGE");
        addMessageToWindow(`Got Message: ${event.data}`);
        if (event.data instanceof ArrayBuffer) {
            addMessageToWindow('Got Image:');
            addImageToWindow(event.data);
        } else {
            addMessageToWindow(`Got Message: ${event.data}`);
        }
    };

    sendButton.onclick = function (event) {
        sendMessage(messageInput.value);
        messageInput.value = "";
    };

    sendImageButton.onclick = function (event) {
        let file = fileInput.files[0];
        sendMessage(file);
        fileInput.value = null;
    };

    function sendMessage(message) {
        socket.send(message);
        addMessageToWindow("Sent Message: " + message);
    }

    function addMessageToWindow(message) {
        messageWindow.innerHTML += `<div>${message}</div>`
    }

    function addImageToWindow(image) {
        let url = URL.createObjectURL(new Blob([image]));
        messageWindow.innerHTML += `<img src="${url}"/>`
    }
</script>
</html>

JAVA 输出-

New Session got connected
onOpen Session -  org.apache.tomcat.websocket.WsSession@21bca102
New Text Message Received :   xz x cx c
onMessage Session - org.apache.tomcat.websocket.WsSession@21bca102
Messgae Sent from Java

客户端输出

在此处输入图像描述

标签: javajakarta-eewebsocketjava-websocket

解决方案


推荐阅读