0

WebSocket is working well for ws://echo.websocket.org/ but not working on localhost

I have working example, where WebSocket works for ws://echo.websocket.org/
As follows,

<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>WebSocket Test</title>
  <meta charset = "UTF-8" />
  <style type = "text/css">
  h1 {
    text-align: center;
  }
  .error {
    color: red;
  } 
  .response {
    color: blue;
  }
  fieldset {
    width: 80%;
    margin: auto;
    text-align: center;
    -moz-box-shadow: 10px 10px 10px #000000;
    -webkit-box-shadow: 10px 10px 10px #000000;
  }
  #output {
    font-family: monospace;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    background-color: #eeeeee;
    padding: 1em;
    border: 5px groove #cccccc;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-box-shadow: 10px 10px 10px #000000;
    -webkit-box-shadow: 10px 10px 10px #000000;
  } 
  </style>
  <script language="javascript" type="text/javascript">
  var output;
  var websocket;
  function init(){
    output = document.getElementById("output");
  } // end init
  function connect(){
    //open socket
    if ("WebSocket" in window){
      websocket = new WebSocket("ws://echo.websocket.org/");
      //note this server does nothing but echo what was passed
      //use a more elaborate server for more interesting behavior

      output.innerHTML = "connecting..." ;

      //attach event handlers
      websocket.onopen = onOpen;
      websocket.onclose = onClose;
      websocket.onmessage = onMessage;
      websocket.onerror = onError;
    } else {
      alert("WebSockets not supported on your browser.");
    } // end if
  } // end connect
  function onOpen(evt){
    //called as soon as a connection is opened
    output.innerHTML = "<p>CONNECTED TO SERVER</p>";
  } // end onOpen
  function onClose(evt){
    //called when connection is severed
    output.innerHTML += "<p>DISCONNECTED</p>";
  } // end onClose;
  function onMessage(evt){
    //called on receipt of message
    output.innerHTML += "<p class = 'response'>RESPONSE: " 
      + evt.data + "</p>";
  } // end onMessage
  function onError(evt){
    //called on error
    output.innerHTML += "<p class = 'error'>ERROR: " 
      + evt.data + "</p>";
  } // end onError
  function sendMessage(){
    //get message from text field
    txtMessage = document.getElementById("txtMessage");
    message = txtMessage.value;
    //pass message to server
    websocket.send(message);
    output.innerHTML += "<p>MESSAGE SENT: " + message + "</p>";
  } // end sendMessage

  </script>
</head>
<body onload = "init()">
  <h1>Web Socket Echo Chamber</h1>
  <form action = "">
    <fieldset>
      <button type = "button"
              onclick = "connect()">
        connect to server
      </button>
      <label for = "txtMessage">
        <input type = "text"
               id = "txtMessage"
               value = "HTML5 Quick Reference For Dummies" />
      </label>
      <button type = "button"
              onclick = "sendMessage()">
        send message
      </button>
      <button type = "button"
              onclick = "websocket.close()">
        disconnect
      </button>
    </fieldset>
  </form>
  <div id="output">Click 'connect' button to connect</div>
</body>
</html>
3
Contributors
3
Replies
15
Views
2 Years
Discussion Span
Last Post by imti321
0

Do you have any host running on your local machine? If so, check the port your server is listening as well.

0

Your may have some setting to be changed in wamp.I used same code as you posted and it got connected.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.