質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

springでWebSocketの接続が行えない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,293

pokemn

score 16

前提・実現したいこと

いつもお世話になっております。
現在、springでwebsockeを使用したチャットアプリを作成しようとしています。
WebSocket接続をしようとしたところ下記、画像の「■コンソールログ」が出力され、接続することがでず何故接続が
できないのか調べたり検索したりしたのですが、まったくわからない状態です。
初歩的な質問でしたら申し訳ありません。
どなたか原因が分かる方ご教授お願い致します。

発生している問題・エラーメッセージ

■コンソールログ
sockjs-0.3.min.js:27 * SockJS CDN is being retired on Dec 1st * Please transition to a public CDN. See https://github.com/sockjs/sockjs-client/issues/198 for more information.
chatscreen.js:12 stompClient:[object Object]
chatscreen.js:13 endpoint:http://localhost:8080/chat/hello
stomp.min.js:9 Opening Web Socket...
stomp.min.js:9 Web Socket Opened...
stomp.min.js:9 >>> CONNECT
accept-version:1.2,1.1,1.0
heart-beat:10000,10000

stomp.min.js:9 Whoops! Lost connection to undefined

該当のソースコード

package jp.co.chat.bean;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@EnableWebSocketMessageBroker 
@Configuration
public class ChatWebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/hello").withSockJS(); // WebSocketのエンドポイント (接続時に指定するエンドポイント)を指定
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/chat"); // アプリケーション(Controller)でハンドリングするエンドポイントのプレフィックス
        registry.enableSimpleBroker("/topic", "/queue"); // Topic(Pub-Sub)とQueue(P2P)を有効化 >>> メッセージブローカーがハンドリングする
    }
package jp.co.chat.controller;

import java.util.concurrent.TimeUnit;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ChatWebSocketController {

    String test = "テスト";
    @MessageMapping("/hello") // エンドポイントの指定
    @SendTo("/topic/greetings") // メッセージの宛先を指定
    public String greeting(String test) {
        return test;
    }

}
function setConnected(connected) {
    document.getElementById('connection').disabled = connected;
}

function connection() {
    var endpoint = 'http://' + location.host + '/chat/hello';
    var socket = new SockJS(endpoint);
    stompClient = Stomp.over(socket);
    console.log('stompClient:' + socket);
    console.log('endpoint:' + endpoint);
    stompClient.connect({} , function (name) {
        setConnected(true)
        console.log('匿名関数:' + name);
        stompClient.subscribe('/chat/topic/greetings' , function (test) {
            console.log('匿名関数:' + test);
            showTest(JSON.parse(test.body).content);
        })
    })

}

function send() {
    var name = document.getElementById('textinput').value;
    stompClient.send("/chat/hello", {}, JSON.stringify({'send': name})); // メッセージを送信
}

function showTest(message) {
    var response = document.getElementById('response');
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(message));
    response.appendChild(p);
}
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"  %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  session="false" %>
<!DOCTYPE html>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/chatscreen.css" />" rel="stylesheet">
</head>
<body>

    <div class="flexside">
        <button id="connection" onclick="connection()">ルーム作成</button>
        <div class="flexcontainer">
            <div class="flexmain">
                <p id="response"></p>
            </div>

            <div class="flexfutter">
                <input type="text" id="textinput">
                <button id="send" onclick="send();">送信</button>    
            </div>
        </div>
    </div>

<script src="<c:url value="/resources/js/jquery-3.3.1.min.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
<script src="<c:url value="/resources/js/stomp.min.js" />"></script>
<script src="<c:url value="/resources/js/sockjs-0.3.min.js" />"></script>
<script src="<c:url value="/resources/js/chatscreen.js" />"></script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

springframework:4.2.4.RELEASE

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/04/08 07:06

    エラーログはテキストで

    キャンセル

  • pokemn

    2019/04/08 08:25

    申し訳ありません。
    ログをテキストに変更しました。

    キャンセル

回答 1

checkベストアンサー

0

エラーログの内容はJavascriptのエラーのようです。
sockjs-0.3.min.jsはどのように入手されたものでしょうか?

最新版 sockjs-client v1.3.0 を使用してはいかがでしょうか?

ちなみに、私もWebSocket使用していますが、下記のバージョン構成で問題なく使用できています。

  • SpringBoot 1.5.6
  • sockjs-client:1.1.1
  • stomp-websocket:2.3.4

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/21 11:30

    解決致しました。
    「sockjs-0.3.min.js」の入手場所がよろしくなかったようです。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る