【WebSocket】の接続は確認されているが、メッセージを送信するとエラーが出る

Question

JavaScriptとJavaを用いてWebアプリを作成しているのですが、
WebSocketの通信のところでエラーが出て困っております。

OSはLinuxでApacheとTomcatを連携させております。
簡易なWebSocketでは通信が確認できたため、
JavaScriptのコードの間違いではないかと考えております。

JavaScriptのソースコードは以下のようになっております。

var webSocket;
window.onload = function() {
   //アノテーションでwebsocketを指定
    webSocket = new WebSocket("ws://FQDN:8080/アプリ名/websocket");
    var messageArea = document.getElementById("message-list");
    var sessionid = document.getElementById("sessionID").value;
    var photo = document.getElementById("yourphoto").value;
    var youruserid = document.getElementById("youruserid").value;
    
    var appendMessage = function(value, session , yourid) {
        var messageElement = document.createElement("message-list");
        var time = new Date();
        var month = time.getMonth() + 1;
        if(month < 10) { month = "0" + month; }
        var day = time.getDate();
        if(day < 10) { day = "0" + day; }
        var hour = time.getHours();
        if(hour < 10) { hour = "0" + hour; }
        var minute = time.getMinutes();
        if(minute < 10) { minute = "0" + minute; }
        var now = month + "/" + day + " " + hour + ":" + minute;
        if(youruserid == yourid && session != sessionid){
        	messageElement.innerHTML = '<li class="msg_recieve"><a><img src="' + photo + '" alt="メッセージ相手写真" class="c-message_photo img-circle c-photo_mini"></a><div class="inner-box2"><p class="balloon_left">' + value + '</p></div></li><p class="time_recieve text10">' + now + '</p>';
        }else if(session == sessionid && youruserid != yourid){
        	messageElement.innerHTML = '<li class="msg_send"><div class="inner-box"><p class="balloon_right" id="messageArea">' + value + '</p></div></li><p class="time_send text10">' + now + '</p>';
        }
        messageArea.appendChild(messageElement);
        var message_box = document.getElementById("message_box");
        message_box.scrollTop = message_box.scrollHeight;
    }
    webSocket.onopen = function() {
    	console.log("open")
    }
    webSocket.onclose = function() {
		console.log("close")
	}
     webSocket.onmessage = function(message) {
            var data = JSON.parse(message.data);
            appendMessage(data.text, data.sessionid , data.youruserid);
        }
    
     var messageInput = document.getElementById("c-btn_chenge");
     var messageText = document.getElementById("messageInput");
     messageText.onkeypress = function(e) {
			if (13 == e.keyCode) {
				var message = messageText.value;
				if (webSocket && "" != message) {
					webSocket.send(message);
					messageText.value = "";
					return false;
				}
			}
		}
     
     messageInput.onclick = function() {
             var message = messageText.value;
             if (webSocket && "" != message) {
                 webSocket.send(message);
                 messageText.value = "";
             }
     }
}

このページを表示した時はエラーは出ていないのですが、
何かしらのテキストを送信しようとするとエラーが出てしまいます。

Chromeのデベロッパーツールでエラー箇所を確認いたしますと、

Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

のようなエラーが出ています。

また、https://www.websocket.org/echo.html
でブラウザの通信状態を確認いたしましたが、
接続は確立されておりました。

ソースコードにおかしな点がございましたらご教授お願い致します。
（色々突っ込みどころはあるコードだと思いますが・・・）

ご教授のほどよろしくお願いいたします。

Answer 1

前回の続きであれば、

    webSocket = new WebSocket("ws://FQDN:8080/アプリ名/websocket"); 

でwsでなくhttpで、:8080が不要と思います。

    webSocket = new WebSocket("http://FQDN/アプリ名/websocket"); 

Comments

[Sfidante]

ご回答ありがとうございます。

試してみたのですが、
HTTPのスキームでは対応していないらしく、
Uncaught SyntaxError: Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss'. 'http' is not allowed.
といったエラーになってしまいました。

[eripong]

httpでなくwsにするとどうでしょうか？

[eripong]

少なくとも、8080は開いていないはずなので、
80番ポートにする事はあっていると思います。
Apacheでwsを受け取れるかを知らないので、
ちょっと調べてみます。

[Sfidante]

すみません、色々調査していった結果、
やはり、ソースコードがおかしいのではなくて、
Tomcatの設定のようです。

ローカルでは問題なく接続できているので、
改めてTomcatの設定を見なおしてみます。

また、何かありましたらよろしくお願い致します。

[eripong]

あれから設定を変えたのでなければ、
LBが8080ポートを受け付ける設定になっていないので、
Tomcatにも問題があるかも知れませんが、Tomcatだけ直しても、
動くようにはならないと思います。