jQuery With WebSocket

javascript jquery html websocket

28,735

try changing these:

<input type="submit" value="Send Message to Server" onclick="start()" />


function start() {
    var text = document.getElementById("userinput").value;
    webSocket.send(text);
    return false;
}

to:

<input id="submitButton" type="submit" value="Send Message to Server" />


function start() {
    var text = document.getElementById("userinput").value;
    webSocket.send(text);
    return false;
}

var subm = document.getElementById("submitButton");
subm.addEventListener("click", start, false);

28,735

Author by

ARNAB2012

Updated on July 28, 2020

Comments

ARNAB2012 almost 4 years

I have a little confusion in the following snippet. I am trying to make a jQuery drop effect with user input data. This is working but only the first value given stays for rest of the click.

Here are the snippets

index.html

<!DOCTYPE html>
<html>
<head>
<title>Pretech blog testing web sockets</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var webSocket = new WebSocket('ws://localhost:8080/jqueryWebTest/websocket2');

        webSocket.onerror = function(event) {
            onError(event)
        };

        webSocket.onopen = function(event) {
            onOpen(event)
        };

        webSocket.onmessage = function(event) {
            onMessage(event)
        };

        function onMessage(event) {
            alert(event.data);
            document.getElementById('messages').innerHTML += '<br />'                    + event.data;
           // var myDiv = document.getElementById('dropDiv');
           // document.createElement(myDiv);

            $(function() {
                setTimeout (function() {
              var $dropDiv = $('#dropDiv');
              var mythis = $('#holder a');
              // get position of the element we clicked on
              var offset = mythis.offset();

              // get width/height of click element
              var h = mythis.outerHeight();
              var w = mythis.outerWidth();

              // get width/height of drop element
              var dh = $dropDiv.outerHeight();
              var dw = $dropDiv.outerWidth();

              // determine middle position
              var initLeft = offset.left + ((w/2) - (dw/2));

              // animate drop
              $dropDiv.css({
                      left: initLeft,
                      top: $(window).scrollTop() - dh,
                      opacity: 0,
                      display: 'block'
                  }).animate({
                      left: initLeft,
                      top: offset.top - dh,
                      opacity: 1
                  }, 300, 'easeOutBounce');
             },1500);
            });

        }

        function onOpen(event) {
            document.getElementById('messages').innerHTML = 'Now Connection established';
        }

        function onError(event) {
            alert(event.data);
        }

        function start() {
            var text = document.getElementById("userinput").value;

            webSocket.send(text);
            return false;
        }
    </script>

    <script type="text/javascript">



</script>

<style type="text/css">

#holder {
 position: absolute;
 top: 200px;
 left: 100px;   
}

#dropDiv {
 display: none;
 position: absolute;
 top: -20px;
 background: #ccc; 
}


</style>
</head>
<body>

 <div>
        <input type="text" id="userinput" /> <br> <input type="submit"
            value="Send Message to Server" onclick="start()" />
    </div>
<div id="messages"></div>
<div id="holder"><a href="javascript:void(0);" id="main">Which ring?</a></div>

<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>
</body>
</html>

websocket2.java

package com.test.websockets;

import java.io.IOException;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.SendResult;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket2")
public class WebSocketTest2 {

    @OnMessage
    public void onMessage(String message, Session s) throws IOException,InterruptedException {

        System.out.println(message);

       // session.getBasicRemote().sendText(message);

        for (Session session : s.getOpenSessions()) {
            session.getBasicRemote().sendText("<div id='dropDiv'>"+message+" </div>");           }

        // Sending message to client each 1 second

    }

    @OnOpen
    public void onOpen() {
        System.out.println("Client connected");
    }

    @OnClose
    public void onClose() {
        System.out.println("Connection closed");
    }
}

What would be a solution?

ARNAB2012 about 9 years

in browser console it is giving . Uncaught TypeError: Cannot read property 'addEventListener' of null
Hunter Frazier about 9 years

I noticed I forgot a closing semicolon on the last statement, did you see that as well? Here's a working example of the base idea jsfiddle.net/7yzuLfxj The problem is, you're setting the text input value once on load, then when you rerun the start function, it's not regenerating the new value- it's using the old, original value. The method I linked above creates a listener for the submit button and recaptures the text input value on each click.
ARNAB2012 about 9 years

No Man. That's not giving the desired result.