带有 WebSocket 的 jQuery
Posted
技术标签:
【中文标题】带有 WebSocket 的 jQuery【英文标题】：jQuery With WebSocket 【发布时间】：2015-04-30 07:56:36 【问题描述】：我对下面的sn-p有点困惑。我正在尝试使用用户输入数据制作 jQuery 拖放效果。这是有效的，但只有给定的第一个值会保留在其余的点击中。
这里是sn-ps
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");
什么是解决方案？
【问题讨论】：
可能与您的 setTimeout 函数有关，在单击后没有给输入值足够的时间来更新。没有一个有效的例子很难说。您能否进一步解释“这是有效的，但只有给定的第一个值会保留在其余的点击中” 当在输入字段中给出一个值（例如 xyz ）并第一次单击提交按钮时，它会给出“xyz”作为下拉动画效果。但是如果在第二次 xyz 变为 abc 时，它不会将 abc 作为动画效果字符串。它给 xyz 作为动画效果字符串。 【参考方案1】：尝试更改这些：
<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);
【讨论】：
在浏览器控制台中给出 .未捕获的类型错误：无法读取 null 的属性“addEventListener” 我注意到我忘记了最后一个语句的结束分号，你也看到了吗？这是基本思想jsfiddle.net/7yzuLfxj 的一个工作示例，问题是，您在加载时设置了一次文本输入值，然后当您重新运行启动函数时，它不会重新生成新值 - 它使用的是旧的原始值。我上面链接的方法为提交按钮创建了一个侦听器，并在每次单击时重新捕获文本输入值。 没有人。这并没有给出预期的结果。【参考方案2】：我认为这是因为您在 dropDivs 中使用了相同的 ID：
<div id="dropDiv">The one ring to rule them all. </div>
<div id="dropDiv">The one ring to rule them all. </div>
这里：
var $dropDiv = $('#dropDiv');
var mythis = $('#holder a');
你期望你所有的 dropDivs 都会得到 drop 动画，不幸的是只有第一个 id 为“dropDiv”的元素会被动画。
尝试使用 class 来选择您的 html 元素。
【讨论】：
以上是关于带有 WebSocket 的 jQuery的主要内容，如果未能解决你的问题，请参考以下文章
带有 Angular 和 Spring 的 Websocket