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

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

ただいまの
回答率

91.34%

  • JavaScript

    11219questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    10463questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • Spring Boot

    244questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

  • WebSocket

    138questions

    WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

spring bootでwebsocketを繋ぐ際にエラーが出ます。

解決済

回答 1

投稿 2017/12/02 20:09

  • 評価
  • クリップ 1
  • VIEW 63

RyoM

score 78

前提・実現したいこと

websocketを使って双方向通信を実現したい。

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

GET http://192.168.0.2/hello/info?t=1512211666507 net::ERR_CONNECTION_REFUSED
AbstractXHRObject._start @ abstract-xhr.js:132
(anonymous) @ abstract-xhr.js:21
setTimeout (async)
AbstractXHRObject @ abstract-xhr.js:20
XHRCorsObject @ xhr-cors.js:8
InfoAjax @ info-ajax.js:19
InfoReceiver._getReceiver @ info-receiver.js:39
InfoReceiver.doXhr @ info-receiver.js:56
(anonymous) @ info-receiver.js:25
setTimeout (async)
InfoReceiver @ info-receiver.js:24
SockJS @ main.js:121
connect @ socket.html:18
onclick @ socket.html:57

該当のソースコード

サーバーサイドのディレクトリ構造
WebsocketBoot
|-src
   |-main
      |-java
         |-com.hal.springboot
                |-WebsocketBootApplication.java
                |-ServletInitializer.java
                |-controller
                    |-WebController.java
                |-filter
                    |-SimpleCORSFilter.java
                |-websocket
                    |-Greeting.java
                    |-Message.java
                    |-SampleWebsocket.java
                    |-WebSocketConfig.java
package com.hal.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebsocketBootApplication{

    public static void main(String[] args) {
        SpringApplication.run(WebsocketBootApplication.class, args);
    }
}
package com.hal.springboot.controller;

@Controller
public class WebController {

    /**
     * メッセージテンプレートです。
     */
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

@RequestMapping(value = "/",method=RequestMethod.GET)
    @ResponseBody
    /**
     * @RequestParam String nameは送られてくる名前と一緒でなければならない
     * @param name
     * @param kind
     * @param sex
     * @param character
     * @return
     * @throws IOException
     * @throws ServletException
     */
    public String index(@RequestParam String name,
            @RequestParam String kind,@RequestParam String sex,
            @RequestParam String character) throws IOException, ServletException{
        // TODO 自動生成されたメソッド・スタブ
        System.out.println(name);
        Gson gson = new Gson();
        ArrayList<String> strList = new ArrayList<String>();
        strList.add(name);
        strList.add(kind);
        return gson.toJson(strList);
    }


    @MessageMapping("http://192.168.0.2/hello") // エンドポイントの指定
    @SendTo("http://192.168.0.3/topic/greetings") // メッセージの宛先を指定
    public Greeting greeting(Message message) throws InterruptedException {
        TimeUnit.SECONDS.sleep(3);
        return new Greeting("Hello, " + message.getName() + "!");
    }

}
package com.hal.springboot.filter;

/**
 * Servlet Filter implementation class SimpleCORSFilter
 */
//@WebFilter("/SimpleCORSFilter")
@Component
public class SimpleCORSFilter implements Filter {

    /**
     * Default constructor. 
     */
    public SimpleCORSFilter() {
        // TODO Auto-generated constructor stub
    }

    /**
     * @see Filter#destroy()
     */
    @Override
    public void destroy() {
        // TODO Auto-generated method stub
    }

    /**
     * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
     */
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
//        System.out.println("done");
        req.setCharacterEncoding("utf-8");
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");//http://localhost
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        // pass the request along the filter chain
        chain.doFilter(req, response);
    }

    /**
     * @see Filter#init(FilterConfig)
     */
    @Override
    public void init(FilterConfig fConfig) throws ServletException {
        // TODO Auto-generated method stub
    }

}
package com.hal.springboot.websocket;

public class Greeting {
    private String content;
    public Greeting(String content) {
        this.content = content;
    }
    public String getContent() {
        return content;
    }
}
package com.hal.springboot.websocket;

public class Message {
    private String name;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

}
package com.hal.springboot.websocket;

import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class SampleWebSocket {
    @OnMessage
    public String echo(String message) {
        System.out.println(message);
        return message;
    }
}
package com.hal.springboot.websocket;

/**
 * WebSocket用のコンフィグです。
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends  AbstractWebSocketMessageBrokerConfigurer  {

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

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

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

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS('http://192.168.0.2/hello'); // WebSocketに接続
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function (greeting) { // 挨拶の応答(/topic/greetings)を購読する
                    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';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body onload="disconnect()">
<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>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</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>

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

spring側のipアドレス:192.168.0.2
webサーバー側(html)のipアドレス:192.168.03(vagrant)
ソースのimport部分は文字数制限のため省略箇所あり

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • asahina1979

    2017/12/02 21:06

    ステータス102だからファイアウォール、プロキシの設定を見直しましょう

    キャンセル

  • asahina1979

    2017/12/02 21:10

    参考までにおおざっぱに言えば 5xx サーバー/4xx クライアント/3xx 転送など/2xx 正常/1xx ネットワーク

    キャンセル

回答 1

checkベストアンサー

0

CORSっぽいです。

CORSで検索してみてください。

spring-bootの場合、下記で。
https://github.com/liguofeng29/spring-boot-demo/blob/master/spring-boot-demo-web-cors/spring-boot-demo-web-cors-1/src/main/java/org/lee/spring/boot/demo/config/MyConfiguration.java

か直接指定可能っぽい。
https://qiita.com/syukai/items/4e88749d1d62f1148e45

投稿 2017/12/05 11:52

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

ただいまの回答率

91.34%

関連した質問

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

  • JavaScript

    11219questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    10463questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • Spring Boot

    244questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

  • WebSocket

    138questions

    WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。