0.推荐阅读

由于国庆前后实在是太多事了，导致这篇文章更新的比较慢，忘记了的同学可以先阅读下上篇文章，本篇文章将在上篇的基础上进行。

  • spring boot+ websocket 推送

1.配置类

上篇文章我们提到过stomp.js 和 sockjs，下面我将基于stomp上层协议编写配置类，与上篇文章中的配置类有所不同。好了，不多比比，直接上代码

@Configuration@EnableWebSocketMessageBrokerpublic class WebsocketConfig implements WebSocketMessageBrokerConfigurer {    @Override    public void registerStompEndpoints(StompEndpointRegistry registry) {        registry.addEndpoint("/broadcast","/p2p").setAllowedOrigins("*").withSockJS();    }    @Override    public void configureMessageBroker(MessageBrokerRegistry registry) {        registry.enableSimpleBroker("/topic","/user");    }}
  • 通过注解@EnableWebSocketMessageBroker 开启基于stomp的消息代理，此时浏览器支持使用@MessageMapping。
  • 这里重写了2个方法，即registerStompEndpoints 和 configureMessageBroker。
  • 在registerStompEndpoints 中，注册了2个端点，一个是广播，一个是点对点，并允许以sockjs协议连接。
  • 在configureMessageBroker中，对应的配置了2个消息代理。

2.编写消息控制器

@Controllerpublic class MessagController {    @Autowired    private SimpMessagingTemplate messagingTemplate;    @MessageMapping("/subcrib")    public void subcrib(ReveiceMsg reveiceMsg) { //ReveiceMsg 是简单的自定义的消息类        messagingTemplate.convertAndSend("/topic/response",reveiceMsg.getName());    }    @MessageMapping("/queue")    public void queue(ReveiceMsg reveiceMsg) { // 这里指定发送给zs        messagingTemplate.convertAndSendToUser("zs","/message",reveiceMsg.getName());    }}

3.客户端广播页面



Connect Disconnect




名字Send






  • var socket = new SockJS("http://localhost:8080/broadcast") 这里的url 好像必须要写全，大家可以自行去测试下，看写成new SockJS("/broadcast") 有没有效果。‘/broadcast’ 这里的 正是我们之前在配置类里注册的端点，忘记的可以往上看一看。
  • stompClient.subscribe('/topic/response', {}),我们订阅的路径正是控制器中编写的路径，待会我们就测试往/subcrib 中发送消息，看能不能接收到。

4.客户端点对点页面

其实这个页面和广播的那个页面区别不大，我下面只展示核心部分，其他的可以参考上面的广播页面。

function connect() {  var socket = new SockJS("http://localhost:8080/p2p");  stompClient = Stomp.over(socket);  stompClient.connect({}, function(frame) {    setConnected(true);    console.log('Connected: ' + frame);    stompClient.subscribe('/user/'+document.getElementById('user').value+'/message', function(response){      console.log("resp  user 消息：" + response.body);      var response1 = document.getElementById('response');      response1.innerHTML = "

订阅：" + response.body + "


"; }); });}function sendName() { var name = document.getElementById('name').value; stompClient.send("/queue", {}, JSON.stringify({ 'name': name }));}


  • 注意，此时订阅的地址为 /user/{userId}/message,说明只有userId这个能收到。

5.测试运行

  • 测试topic，我们开2个窗口，访问/index(这个controller我没放上去，只是一个跳转的)，进入到 topic页面，分别点击Connect 按钮，然后在下面输入框中输入消息“诗意凌风”，可以看到，2个窗口都接受到了消息。



测试topic



  • 测试点对点，同样开2个窗口，访问/index1，进入到queue页面，然后输入用户名称(这里就相当于userId了)，点击连接按钮，发送“诗意凌风” ，可以看到只有用户为zs 的收到了消息。



测试点对点



小结

好了，今天就分享到这了，有需要这个demo的，可以关注一下小编，后续小编会抽时间把代码上传到gitee，https://gitee.com/bigqianqian/springboot-websocket。喜欢的朋友请一键三连[奋斗][奋斗][奋斗]，最后祝大家中秋国庆节日快乐。关注小编，与你共同成长！