spring boot websocket广播式

1、配置websocket

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

@Configuration
//通过该注解开启使用STMP协议来传输基于代理（message broker）的消息，
//这时控制器支持使用@MessageMapping,就像使用@RequestMapping一样
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {


    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {//注册STOMP协议的节点（endpoint）,并映射的指定的URL
        registry.addEndpoint("/endpointWisely").withSockJS();//注册一个STOMP的endpoint，并指定使用Sockjs协议
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {//配置消息代理（Message Broker）
        registry.enableSimpleBroker("/topic");//广播式应配置一个/topic消息代理

    }
}
复制代码

2、消息类的定义

package com.yijialuo.websocket.domain;
//浏览器向服务器发送的消息用此类接受
public class WiselyMessage {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
复制代码

//服务端向浏览器发送此类消息
public class WiselyResponse {
    private String responseMessage;
    public WiselyResponse(String responseMessage){
        this.responseMessage=responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }

    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }
}复制代码

3、控制器

import com.yijialuo.websocket.domain.WiselyMessage;
import com.yijialuo.websocket.domain.WiselyResponse;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class Wscontroller {
    @MessageMapping("/welcome")//当浏览器向服务端发送请求时，通过@MessageMapping映射/welcome这个地址，类似于@RequestMapping
    @SendTo("/topic/getResponse")//当服务端有消息时，会对订阅了@SendTo中的路径的浏览器发送消息
    public WiselyResponse say(WiselyMessage message) throws Exception{
        Thread.sleep(3000);
        return new WiselyResponse("Welcome,"+message.getName()+"!");
    }
}
复制代码

4、配置viewController，为前端提供便捷的路径映射

public class WebMvcConfig extends WebMvcConfigurerAdapter{
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/ws").setViewName("/ws");
    }
}
复制代码

前端：

引入sockjs.min.js和stomp.min.js

连接代码：

var socket = new SocketJS('/endpointWisely');

//和后台的registry.addEndpoint("/endpointWisely").withSockJS();对应

stompClient =Stomp.over(socket)//使用STOMP子协议的WebSocket客户端

stompClient.connect({}, function(fram) ) {//连接WebSocket服务器

     stompClient.subscribe('/topic/getResponse' ,  function(respnose) {

       //订阅/topic/getResponse（控制器的@SendTo）,接收到消息触发function，数据在            //respnose.body

  }

 )

}

发送数据代码：

stompClient send("/welcome",{},JSON.stringify({'name':name}));  

 //welcome和后台Controller对应

转载于:https://juejin.im/post/5b63f13af265da0f8a14ba7d