javascript jQuery 与 WebSocket
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29962125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery With WebSocket
提问by ARNAB2012
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.
我在以下代码段中有些困惑。我正在尝试使用用户输入数据制作 jQuery 放置效果。这是有效的，但只有给定的第一个值会在其余的点击中保持不变。
Here are the snippets
这是片段
index.html
索引.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
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?
什么是解决方案？
回答by Hunter Frazier
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);
回答by yahya el fakir
I think its because you are using same Id for your dropDivs:
我认为这是因为您为 dropDivs 使用了相同的 ID：
<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>
here :
这里 ：
var $dropDiv = $('#dropDiv');
var mythis = $('#holder a');
You excpect that all your dropDivs would get the drop annimation, Unfortunately only the first element with id "dropDiv" will be animated.
您希望您的所有 dropDiv 都会获得放置动画，不幸的是，只有 ID 为“dropDiv”的第一个元素会被动画化。
Try to use class instead for selecting your html elements.
尝试使用 class 来选择您的 html 元素。
