1

I am trying to implement HTML5 web socket using Netbeans and Apache server..

the implementation is working fine in my laptop but when i am trying to access the same program on other machines connected in LAN using IP address ...i get the error "connection closed" in other machine.

here is my index.html file :

<!DOCTYPE html>

<html>
    <head>
        <title>Echo Chamber</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
    <center>
        <div>
            <input type="text" id="messageinput"/>
        </div>
        <br>
        <div>
            <button type="button" onclick="openSocket();" >Open</button>
            <button type="button" onclick="send();" >Send</button>
            <button type="button" onclick="closeSocket();" >Close</button>
        </div>
        <br>
        <hr>
        <br>
        <!-- Server responses get written here -->
        <div id="messages"></div>
    </center>
        <!-- Script to utilise the WebSocket -->
        <script type="text/javascript">

            var webSocket;
            var messages = document.getElementById("messages");


            function openSocket(){
                // Ensures only one connection is open at a time
                if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
                   writeResponse("WebSocket is already opened.");
                    return;
                }
                // Create a new instance of the websocket
                webSocket = new WebSocket("ws://localhost:8080/HTML_5_Socket_Appache/echo");

                /**
                 * Binds functions to the listeners for the websocket.
                 */
                webSocket.onopen = function(event){
                    // For reasons I can't determine, onopen gets called twice
                    // and the first time event.data is undefined.
                    // Leave a comment if you know the answer.
                    if(event.data === undefined)
                        return;

                    writeResponse(event.data);
                };

                webSocket.onmessage = function(event){
                    writeResponse(event.data);
                };

                webSocket.onclose = function(event){
                    writeResponse("Connection closed");
                };
            }

            /**
             * Sends the value of the text input to the server
             */
            function send(){
                var text = document.getElementById("messageinput").value;
                webSocket.send(text);
            }

            function closeSocket(){
                webSocket.close();
            }

            function writeResponse(text){
                messages.innerHTML += "<br/>" + text;
            }

        </script>

    </body>
</html>

and here is my java file :

import java.io.IOException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 /**
   * @ServerEndpoint gives the relative name for the end point
   * This will be accessed via ws://localhost:8080/EchoChamber/echo
   * Where "localhost" is the address of the host,
   * "EchoChamber" is the name of the package
   * and "echo" is the address to access this class from the server
   */
@ServerEndpoint("/echo")  public class EchoServer
{
/**
 * @OnOpen allows us to intercept the creation of a new session.
 * The session class allows us to send data to the user.
 * In the method onOpen, we'll let the user know that the handshake was 
 * successful.
 */
@OnOpen
public void onOpen(Session session){
    System.out.println(session.getId() + " has opened a connection"); 
    try {
        session.getBasicRemote().sendText("Connection Established");
    } catch (IOException ex) {
        ex.printStackTrace();
    }
}

/**
 * When a user sends a message to the server, this method will intercept the message
 * and allow us to react to it. For now the message is read as a String.
 */
@OnMessage
public void onMessage(String message, Session session){
    System.out.println("Message from " + session.getId() + ": " + message);
    try {
        session.getBasicRemote().sendText(message);
    } catch (IOException ex) {
        ex.printStackTrace();
    }
}

/**
 * The user closes the connection.
 * 
 * Note: you can't send messages to the client from this method
 */
@OnClose
public void onClose(Session session){
    System.out.println("Session " +session.getId()+" has ended");
} }

please help me as to where i am getting wrong which prevents the code to run only in my machine and no other machines connected in the network.

Pavel Bucek
  • 5,304
  • 27
  • 44

1 Answers1

0

The problem here is with Origin verification - you need to set your server to actually serve the (static) html page - not just deployed websocket endpoint.After that, Origin header will be added with the same host (by browser runtime) and everything should work as expected.

You should use something similar to [how to construct a websocket uri relate to the page uri], which would let you use relative uri for your websocket endpoint (compared to hardcoded value you have now).

Community
  • 1
  • 1
Pavel Bucek
  • 5,304
  • 27
  • 44