Fatal编程技术网
  • javascript/
  • Javascript 为什么没有一种连接和发送websocket的方法？

Javascript 为什么没有一种连接和发送websocket的方法？

javascript spring websocket

Javascript 为什么没有一种连接和发送websocket的方法？,javascript,spring,websocket,spring-websocket,java-websocket,Javascript,Spring,Websocket,Spring Websocket,Java Websocket,我是新的websocket，参考下面的SpringWebSocket教程，它在我的系统中运行良好。我还使用stomp.js和sockjs-0.3.4.js 如果html和javascript有如下两种不同的方法，它就可以工作 function connect() { var socket = new SockJS('/app/hello'); stompClient = Stomp.over(socket); stompClient.connec

我是新的websocket，参考下面的SpringWebSocket教程，它在我的系统中运行良好。我还使用stomp.js和sockjs-0.3.4.js

如果html和javascript有如下两种不同的方法，它就可以工作

function connect() {
    var socket = new SockJS('/app/hello');
    stompClient = Stomp.over(socket);            
    stompClient.connect({}, function(frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function(greeting) {
            //showGreeting(greeting);
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function sendName() {
    var name = document.getElementById('name').value;
    stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
}
如果我像下面给出的那样编写一个javascript函数，它将不起作用，并且错误为uncaughterror:INVALID\u STATE\u ERR

function startAndSend() {
            connect();
            sendName();
        }
我想知道为什么它不起作用。这可能是个愚蠢的问题，请在这方面帮助我。我在下面提供完整的html文件。是否总是需要像SpringWebSocket示例中给出的那样为connect编写html按钮并将信息发送到websocket？是否不可能单击一个按钮，它将连接并向websocket发送信息？这对我来说似乎很特别，我需要你的帮助

<!DOCTYPE html>
<html>
<head>
<title>Hello WebSocket</title>
<script src="sockjs-0.3.4.js"></script>
<script src="stomp.js"></script>
<script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS('/app/hello');
            stompClient = Stomp.over(socket);            
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function(greeting) {
                    //showGreeting(greeting);
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            console.log(message);
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }


        //Does not work
        function startAndSend() {
            connect();
            sendName();
        }
    </script>

</head>
<body>
    <noscript>
        <h2 style="color: #ff0000">Seems your browser doesn't support
            Javascript! Websocket relies on Javascript being enabled. Please
            enable Javascript and reload this page!</h2>
    </noscript>
    <div>
        Stomp Over Websocket using Spring
        <div>
            <button id="connect" onclick="connect();">Connect</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
            <button id="check" onclick="startAndSend();">StartAndSend</button>
        </div>
        <div id="conversationDiv">
            <label>What is your name?</label><input type="text" id="name" />
            <button id="sendName" onclick="sendName();">Send</button>
            <p id="response"></p>
        </div>

    </div>
</body>
</html>


你好WebSocket
var stompClient=null；
功能设置已连接（已连接）{
document.getElementById（'response'）。innerHTML=''；
}
函数连接（）{
var socket=newsockjs（'/app/hello'）；
stompClient=Stomp.over（套接字）；
stompClient.connect（{}，函数（框架）{
setConnected（true）；
console.log（'Connected:'+frame）；
stompClient.subscribe（'/topic/greetings'，函数（greeting）{
//展示问候语（问候语）；
showGreeting（JSON.parse（greeting.body.content）；
});
});
}
功能断开（）{
if（stompClient！=null）{
stompClient.disconnect（）；
}
设置连接（假）；
控制台日志（“断开”）；
}
函数sendName（）{
var name=document.getElementById（'name'）。值；
stompClient.send（“/app/hello”，{}，JSON.stringify（{'name'：name}））；
}
功能显示问候语（信息）{
var response=document.getElementById（'response'）；
var p=document.createElement（'p'）；
p、 style.wordWrap='break word'；
控制台日志（消息）；
p、 appendChild（document.createTextNode（message））；
反应。儿童（p）；
}
//不起作用
函数startAndSend（）{
connect（）；
sendName（）；
}
您的浏览器似乎不支持
Javascript！Websocket依赖于启用Javascript。请
启用Javascript并重新加载此页面！
用弹簧踩踏网箱
连接
断开
开始发送
你的名字叫什么？
发送
这是因为
stompClient.connect（）
方法是异步的，当您在
connect（）之后调用
sendName（）
时，连接尚未建立

您应该在
stompClient.connect（）
回调中调用
sendName（）
，以确保在
sendName（）
调用时建立连接

例如：


function connect() {
    var socket = new SockJS('/app/hello');
    stompClient = Stomp.over(socket);            
    stompClient.connect({}, function(frame) {
        setConnected(true);
        sendName();
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function(greeting) {
            //showGreeting(greeting);
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}



不熟悉Stomp（所以只是一个猜测）：实际的stompClient.connect调用将回调作为第二个参数。这表明它是异步运行的。然后，尝试使用连接失败，因为它是在实际建立连接之前执行的。尝试将调用放入connect函数的回调时会发生什么。
@OlegKurbatov这是我在过去2天和1/2天中一直在寻找的，我做了同样的事情mistake@OlegKurbatov你可以把答案贴出来，我会接受的