Fatal编程技术网

Javascript 带WebSocket的jQuery

javascript jquery html websocket

Javascript 带WebSocket的jQuery,javascript,jquery,html,websocket,Javascript,Jquery,Html,Websocket,我在下面的片段中有点困惑。我正在尝试使用用户输入数据创建jquerydrop效果。这是可行的，但只有给定的第一个值会保留到单击的其余部分 以下是片段 index.html <!DOCTYPE html> <html> <head> <title>Pretech blog testing web sockets</title> <script type="text/javascript" src="http://ajax.goog

我在下面的片段中有点困惑。我正在尝试使用用户输入数据创建jquerydrop效果。这是可行的，但只有给定的第一个值会保留到单击的其余部分

以下是片段

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>


预测博客测试web套接字
var webSocket=newwebsocket（'ws://localhost:8080/jqueryWebTest/websocket2'）；
webSocket.onerror=函数（事件）{
onError（事件）
};
webSocket.onopen=函数（事件）{
onOpen（活动）
};
webSocket.onmessage=函数（事件）{
onMessage（事件）
};
函数onMessage（事件）{
警报（事件数据）；
document.getElementById（'messages'）.innerHTML+='
'+event.data；
//var myDiv=document.getElementById（'dropDiv'）；
//document.createElement（myDiv）；
$（函数（）{
setTimeout（函数（）{
var$dropDiv=$（“#dropDiv”）；
var mythis=$（“#持有人a”）；
//获取我们单击的元素的位置
var offset=mythis.offset（）；
//获取单击元素的宽度/高度
var h=mythis.outerHeight（）；
var w=mythis.outerWidth（）；
//获取放置元素的宽度/高度
var dh=$dropDiv.outerHeight（）；
var dw=$dropDiv.outerWidth（）；
//确定中间位置
var initLeft=offset.left+（（w/2）-（dw/2））；
//动画下降
$dropDiv.css({
左：左，
顶部：$（窗口）.scrollTop（）-dh，
不透明度：0，
显示：“块”
}).制作动画({
左：左，
顶部：offset.top-dh，
不透明度：1
}，300，'easeOutBounce'）；
},1500);
});
}
开启功能（事件）{
document.getElementById（'messages'）.innerHTML='Now Connection-builded'；
}
函数onError（事件）{
警报（事件数据）；
}
函数start（）{
var text=document.getElementById（“userinput”）.value；
发送（文本）；
返回false；
}
#持有者{
位置：绝对位置；
顶部：200px；
左：100px；
}
#落差{
显示：无；
位置：绝对位置；
顶部：-20px；
背景：#ccc；
}


一个戒指统治着他们所有人。
一个戒指统治着他们所有人。
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");
    }
}

package com.test.websockets；
导入java.io.IOException；
导入javax.websocket.OnClose；
导入javax.websocket.OnMessage；
导入javax.websocket.OnOpen；
导入javax.websocket.SendResult；
导入javax.websocket.Session；
导入javax.websocket.server.ServerEndpoint；
@ServerEndpoint（“/websocket2”）
公共类WebSocketTest2{
@OnMessage
public void onMessage（字符串消息，会话）引发IOException、InterruptedException{
System.out.println（消息）；
//session.getBasicRemote（）.sendText（消息）；
对于（会话：s.getOpenSessions（））{
session.getBasicRemote（）.sendText（“+message+”）；}
//每1秒向客户端发送一次消息
}
@奥诺彭
公共开放（）{
System.out.println（“客户端连接”）；
}
@一次
公开作废{
System.out.println（“连接关闭”）；
}
}
什么是解决方案？

我认为这是因为您对DropDiv使用相同的Id：

<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>
您希望所有的dropDiv都能获得DropAnnation，不幸的是，只有id为“dropDiv”的第一个元素会被设置动画

尝试使用类来选择html元素。

尝试更改以下内容：

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


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


函数start（）{
var text=document.getElementById（“userinput”）.value；
发送（文本）；
返回false；
}
致：


函数start（）{
var text=document.getElementById（“userinput”）.value；
发送（文本）；
返回false；
}
var subm=document.getElementById（“submitButton”）；
子M.addEventListener（“单击”，开始，错误）；
可能与setTimeout函数在单击后没有给输入值足够的更新时间有关。没有一个有效的例子很难说。当输入字段中给出一个值（例如xyz）并且第一次单击提交按钮时，它会给出“xyz”作为下拉动画效果，您能否进一步解释“这是可行的，但只有第一个给定的值会保留在其余的单击中”。但如果在第二次xyz更改为abc，则不会将abc作为动画效果字符串。它将xyz作为动画效果字符串提供。在浏览器控制台中，它将提供。未捕获的TypeError:无法读取Null的属性'addEventListener'，我注意到我在上一条语句中忘记了一个结束分号，您也看到了吗？下面是一个基本思想的工作示例问题是，您在加载时设置文本输入值，然后当您重新运行start函数时，它不会重新生成新值—而是使用旧的原始值。我上面链接的方法为submit按钮创建了一个侦听器，并在每次单击时重新捕获文本输入值。这并没有达到预期的效果。 
<input type="submit" value="Send Message to Server" onclick="start()" />


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

<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);