鍍金池/ 問(wèn)答/HTML5  Java  HTML/ SpringBoot 寫(xiě)好后端的 WebSocket 代碼之后前端應(yīng)該怎么調(diào)用呢

SpringBoot 寫(xiě)好后端的 WebSocket 代碼之后前端應(yīng)該怎么調(diào)用呢?(不在同一個(gè)項(xiàng)目)

后端使用 SpringBoot 集成的 WebSocket 服務(wù)

Java 代碼如下:

配置 WebSocket

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}

WebSocket 控制器

@Controller
public class WsController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getResponse")
    public ResponseMessage say(RequestMessage message) {
        System.out.println(message.getName());
        return new ResponseMessage("welcome," + message.getName() + " !");
    }
}

現(xiàn)在前端進(jìn)行連接時(shí)會(huì)拋出異常

var ctx = 'ws://localhost:8080'
// 創(chuàng)建一個(gè) Scoket 端點(diǎn)連接
var socket = new SockJS(`${ctx}/endpointSang`)
var stompClient = Stomp.over(socket)
// 鏈接到端點(diǎn)
stompClient.connect({}, frame => {
  console.log('連接到:', frame)
  stompClient.subscribe(`${ctx}/topic/getResponse`, response => {
    console.log('訂閱的主題發(fā)送了消息:', JSON.parse(response.body).responseMessage)
  })
})
// 通過(guò)端點(diǎn)客戶端發(fā)送一個(gè)消息到服務(wù)器
stompClient.send(`${ctx}/welcome`, {}, JSON.stringify({ name: 'rx' }))

// 拋出的異常
main.js:73 Uncaught SyntaxError: The URL's scheme must be either 'http:' or 'https:'. 'ws:' is not allowed.
    at new SockJS (main.js:73)
    at simple-websocket.html:17

但如果是在后端項(xiàng)目下的話就可以使用下面的代碼進(jìn)行調(diào)用

// 這里是空的,不需要指定前綴
var ctx = ''
// 創(chuàng)建一個(gè) Scoket 端點(diǎn)連接
var socket = new SockJS(`${ctx}/endpointSang`)
var stompClient = Stomp.over(socket)
// 鏈接到端點(diǎn)
stompClient.connect({}, frame => {
  console.log('連接到:', frame)
  stompClient.subscribe(`${ctx}/topic/getResponse`, response => {
    console.log('訂閱的主題發(fā)送了消息:', JSON.parse(response.body).responseMessage)
  })
})
// 通過(guò)端點(diǎn)客戶端發(fā)送一個(gè)消息到服務(wù)器
stompClient.send(`${ctx}/welcome`, {}, JSON.stringify({ name: 'rx' }))

所以,發(fā)生了什么?吾輩應(yīng)該怎么做呢?

回答
編輯回答
久不遇

異常里已經(jīng)說(shuō)明了,應(yīng)該用http的地址去鏈接,既然是sockjs,就不能用ws和wss地址了。

2018年7月5日 14:07
編輯回答
墻頭草

推測(cè)是java的配置沒(méi)有做好,鑒于java已經(jīng)忘光了,樓主參考一下https://blog.csdn.net/wobuaiz...
https://blog.csdn.net/Mars_we... 此篇里面說(shuō)了注意導(dǎo)入socketjs時(shí)要使用地址全稱,并且連接使用的是http而不是websocket的ws

2018年6月2日 23:23
編輯回答
蝶戀花

最近寫(xiě)過(guò)類似的,自定義配置攔截器和廣播消息前綴

clipboard.png

然后業(yè)務(wù)層使用消息模板,其他照常

@Autowired
private SimpMessagingTemplate messagingTemplate;


messagingTemplate.convertAndSend("/topic/notice", string);

2018年5月7日 14:43