
###前提・実現したいこと
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
###該当のソースコード
Java
1サーバーサイドのディレクトリ構造 2WebsocketBoot 3|-src 4 |-main 5 |-java 6 |-com.hal.springboot 7 |-WebsocketBootApplication.java 8 |-ServletInitializer.java 9 |-controller 10 |-WebController.java 11 |-filter 12 |-SimpleCORSFilter.java 13 |-websocket 14 |-Greeting.java 15 |-Message.java 16 |-SampleWebsocket.java 17 |-WebSocketConfig.java
Java
1package com.hal.springboot; 2 3import org.springframework.boot.SpringApplication; 4import org.springframework.boot.autoconfigure.SpringBootApplication; 5 6@SpringBootApplication 7public class WebsocketBootApplication{ 8 9 public static void main(String[] args) { 10 SpringApplication.run(WebsocketBootApplication.class, args); 11 } 12}
java
1package com.hal.springboot.controller; 2 3@Controller 4public class WebController { 5 6 /** 7 * メッセージテンプレートです。 8 */ 9 @Autowired 10 private SimpMessagingTemplate simpMessagingTemplate; 11 12@RequestMapping(value = "/",method=RequestMethod.GET) 13 @ResponseBody 14 /** 15 * @RequestParam String nameは送られてくる名前と一緒でなければならない 16 * @param name 17 * @param kind 18 * @param sex 19 * @param character 20 * @return 21 * @throws IOException 22 * @throws ServletException 23 */ 24 public String index(@RequestParam String name, 25 @RequestParam String kind,@RequestParam String sex, 26 @RequestParam String character) throws IOException, ServletException{ 27 // TODO 自動生成されたメソッド・スタブ 28 System.out.println(name); 29 Gson gson = new Gson(); 30 ArrayList<String> strList = new ArrayList<String>(); 31 strList.add(name); 32 strList.add(kind); 33 return gson.toJson(strList); 34 } 35 36 37 @MessageMapping("http://192.168.0.2/hello") // エンドポイントの指定 38 @SendTo("http://192.168.0.3/topic/greetings") // メッセージの宛先を指定 39 public Greeting greeting(Message message) throws InterruptedException { 40 TimeUnit.SECONDS.sleep(3); 41 return new Greeting("Hello, " + message.getName() + "!"); 42 } 43 44} 45
Java
1package com.hal.springboot.filter; 2 3/** 4 * Servlet Filter implementation class SimpleCORSFilter 5 */ 6//@WebFilter("/SimpleCORSFilter") 7@Component 8public class SimpleCORSFilter implements Filter { 9 10 /** 11 * Default constructor. 12 */ 13 public SimpleCORSFilter() { 14 // TODO Auto-generated constructor stub 15 } 16 17 /** 18 * @see Filter#destroy() 19 */ 20 @Override 21 public void destroy() { 22 // TODO Auto-generated method stub 23 } 24 25 /** 26 * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain) 27 */ 28 @Override 29 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 30// System.out.println("done"); 31 req.setCharacterEncoding("utf-8"); 32 HttpServletResponse response = (HttpServletResponse) res; 33 response.setHeader("Access-Control-Allow-Origin", "*");//http://localhost 34 response.setHeader("Access-Control-Allow-Credentials", "true"); 35 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 36 response.setHeader("Access-Control-Max-Age", "3600"); 37 response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 38 // pass the request along the filter chain 39 chain.doFilter(req, response); 40 } 41 42 /** 43 * @see Filter#init(FilterConfig) 44 */ 45 @Override 46 public void init(FilterConfig fConfig) throws ServletException { 47 // TODO Auto-generated method stub 48 } 49 50} 51
Java
1package com.hal.springboot.websocket; 2 3public class Greeting { 4 private String content; 5 public Greeting(String content) { 6 this.content = content; 7 } 8 public String getContent() { 9 return content; 10 } 11} 12
java
1package com.hal.springboot.websocket; 2 3public class Message { 4 private String name; 5 6 public String getName() { 7 return name; 8 } 9 public void setName(String name) { 10 this.name = name; 11 } 12 13} 14
java
1package com.hal.springboot.websocket; 2 3import javax.websocket.OnMessage; 4import javax.websocket.server.ServerEndpoint; 5 6@ServerEndpoint("/echo") 7public class SampleWebSocket { 8 @OnMessage 9 public String echo(String message) { 10 System.out.println(message); 11 return message; 12 } 13} 14
java
1package com.hal.springboot.websocket; 2 3/** 4 * WebSocket用のコンフィグです。 5 */ 6@Configuration 7@EnableWebSocketMessageBroker 8public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { 9 10 @Override 11 public void registerStompEndpoints(StompEndpointRegistry registry) { 12 registry.addEndpoint("/hello").withSockJS(); // WebSocketのエンドポイント (接続時に指定するエンドポイント)を指定 13 } 14 15 @Override 16 public void configureMessageBroker(MessageBrokerRegistry registry) { 17 registry.setApplicationDestinationPrefixes("/app"); // アプリケーション(Controller)でハンドリングするエンドポイントのプレフィックス 18 registry.enableSimpleBroker("/topic", "/queue"); // Topic(Pub-Sub)とQueue(P2P)を有効化 >>> メッセージブローカーがハンドリングする 19 } 20 21} 22
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Hello WebSocket</title> 5 <script src="assets/js/vender/sockjs.js"></script> 6 <script src="assets/js/vender/stomp.min.js"></script> 7 <script type="text/javascript"> 8 var stompClient = null; 9 10 function setConnected(connected) { 11 document.getElementById('connect').disabled = connected; 12 document.getElementById('disconnect').disabled = !connected; 13 document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; 14 document.getElementById('response').innerHTML = ''; 15 } 16 17 function connect() { 18 var socket = new SockJS('http://192.168.0.2/hello'); // WebSocketに接続 19 stompClient = Stomp.over(socket); 20 stompClient.connect({}, function (frame) { 21 setConnected(true); 22 console.log('Connected: ' + frame); 23 stompClient.subscribe('/topic/greetings', function (greeting) { // 挨拶の応答(/topic/greetings)を購読する 24 showGreeting(JSON.parse(greeting.body).content); 25 }); 26 }); 27 } 28 29 function disconnect() { 30 if (stompClient != null) { 31 stompClient.disconnect(); 32 } 33 setConnected(false); 34 console.log("Disconnected"); 35 } 36 37 function sendName() { 38 var name = document.getElementById('name').value; 39 stompClient.send("/app/hello", {}, JSON.stringify({'name': name})); // メッセージを送信 40 } 41 42 function showGreeting(message) { 43 var response = document.getElementById('response'); 44 var p = document.createElement('p'); 45 p.style.wordWrap = 'break-word'; 46 p.appendChild(document.createTextNode(message)); 47 response.appendChild(p); 48 } 49 </script> 50</head> 51<body onload="disconnect()"> 52<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being 53 enabled. Please enable 54 Javascript and reload this page!</h2></noscript> 55<div> 56 <div> 57 <button id="connect" onclick="connect();">Connect</button> 58 <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> 59 </div> 60 <div id="conversationDiv"> 61 <label>What is your name?</label><input type="text" id="name"/> 62 <button id="sendName" onclick="sendName();">Send</button> 63 <p id="response"></p> 64 </div> 65</div> 66</body> 67</html>
###補足情報(言語/FW/ツール等のバージョンなど)
spring側のipアドレス:192.168.0.2
webサーバー側(html)のipアドレス:192.168.03(vagrant)
ソースのimport部分は文字数制限のため省略箇所あり



回答1件
あなたの回答
tips
プレビュー