SpringBoot---Web Socket（广播式、点对点）

介绍

WebSocket为浏览器和服务器提供了全双工异步通信的功能，即浏览器可以向服务段发送消息，服务端也可以向浏览器发送消息，WebSocket需要浏览器的支持，如IE10+、Chrome13+ 。。。等，同时Spring Boot为WebSocket提供了starter pom 。

广播式

广播式即服务端有消息时，会将消息发送给所有连接了当前endpoint的浏览器。

  1. 添加依赖 
    <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
</dependency>
  2. domain 
    //浏览器消息
@Data
public class WiselyMessage {
    private String name;
}

//服务器端消息
@Data
public class WiselyResponse {

    private String responseManage;


    public WiselyResponse(String s) {
        this.responseManage = s;
    }
}
  3. WebSocket设置 
    @Configuration
@EnableWebSocketMessageBroker//开启使用STOMP协议传输，基于代理message broker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {


    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        //配置一个/topic消息代理
        config.enableSimpleBroker("/topic");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //注册STOMP协议的节点,并映射指定的URL
        registry.addEndpoint("/endpointWisely").withSockJS();
    }
}
  4. Controller 
    @Controller
public class WsController {

    @MessageMapping("/welcome")//和RequestMapping作用相似
    @SendTo("/topic/getResponse")//浏览器监听的地址
    public WiselyResponse say(WiselyMessage message) throws InterruptedException {
        Thread.sleep(3000);
        return new WiselyResponse("Welcome, " + message.getName() + "!");
    }
}
  5. Config 
     @Configuration
 public class WebMvcConfig extends WebMvcConfigurerAdapter {

     @Override
     public void addViewControllers(ViewControllerRegistry registry) {
       registry.addViewController("/ws").setViewName("/ws");
     }
 }
  6. html 
     <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
   <meta charset="UTF-8"/>
   <title>Spring Boot + WebSocket +广播</title>

 </head>
 <body>
 <noscript><h2 style="color: #ff0000;">貌似你的浏览器不支持websocket</h2></noscript>
 <div>
   <div>

     <button id="connect" onclick="connect();">链接</button>
     <button id="disconnect" disabled="disabled" onclick="disconnect()">断开</button>
   </div>
   <div id="conversationDiv">
     <label>输入你的名字</label><input type="text" id="name"/>
     <button id="sendName" onclick="sendName()">发送</button>
     <p id="response"></p>
   </div>

 </div>
 <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
 <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.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';

     $('#response').html();
   }

   function connect() {
     var socket = new SockJS('/endpointWisely');
     stompClient = Stomp.over(socket);
     stompClient.connect({}, function (fream) {
       setConnected(true);
       console.log("Conected" + fream);
       stompClient.subscribe("/topic/getResponse", function (response) {
         showResponse(JSON.parse(response.body).responseManage);
       });
     });
   }

   function disconnect() {
     if (stompClient != null) {
       stompClient.disconnect();
     }
     setConnected(false);
   }

   function sendName() {
     var name = $('#name').val();
     stompClient.send("/welcome", {}, JSON.stringify({'name': name}))
   }

   function showResponse(message) {
     var response = $("#response");
     response.html(message);
   }
 </script>
 </body>
 </html>

    自此，发一个消息所有的链接都可以接受的到，广播式完成

点对点

  1. 添加依赖(身份校验) 
     <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-security</artifactId>
</dependency>
  2. 添加WebMvcConfig 
    registry.addViewController("/login").setViewName("/login");
registry.addViewController("/chat").setViewName("/chat");
  3. 添加WebSecurityConfig 
    @EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .antMatchers("/", "/login").permitAll()
                .and()
                .formLogin().loginPage("/login")
                .defaultSuccessUrl("/chat")
                .permitAll()
                .and()
                .logout()
                .permitAll();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {

        auth
                .inMemoryAuthentication()
                .withUser("hjx").password("hjx").roles("USER")
                .and()
                .withUser("zyt").password("zyt").roles("USER");
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/resources/static/**");
    }
}
  4. 添加俩个节点 
    @Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/topic", "/queue");
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/endpointWisely").withSockJS();
    registry.addEndpoint("/endpointChat").withSockJS();
}
  5. 添加访问路径 
    
@Autowired
private SimpMessagingTemplate messagingTemplate;

@MessageMapping("/chat")
public void handleChat(Principal principal, String msg) {
    if (principal.getName().equals("hjx")) {
        messagingTemplate
                .convertAndSendToUser("zyt", "/queue/notifications",
                        principal.getName() + "-send:" + msg);
    } else {
        messagingTemplate
                .convertAndSendToUser("hjx", "/queue/notifications",
                        principal.getName() + "-send:" + msg);

    }
}
  6. 界面 
    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>Spring Boot + WebSocket +广播</title>
  <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000;">貌似你的浏览器不支持websocket</h2></noscript>
<p>聊天室</p>

<form id="wiselyForm">

  <textarea rows="4" cols="60" name="text"></textarea>
  <input type="submit"/>

</form>

<script type="text/javascript">
  $("#wiselyForm").submit(function (e) {
    e.preventDefault();
    var text = $("#wiselyForm").find('textarea[name="text"]').val();
    sendSpittler(text);
  });

  var sock = new SockJS("/endpointChat");
  var stomp = Stomp.over(sock);
  stomp.connect({}, function (frame) {
    stomp.subscribe("/user/queue/notifications", handleNotification)
  })

  function handleNotification(message) {
    $('#output').append("<b>Received: " + message.body + "</b><br/>")
  }

function sendSpittler(text) {
    stomp.send("/chat", {}, text)
  }

  $("#stop").click(function () {
    sock.close();
  })


</script>

<div id="output">
</div>

</body>

</html>

到这里，简单的WebSocket就演示完成了，如果有不懂的地方可以看源码
Demo源码

参考资料

  • 《Java EE开发的颠覆者 Spring Boot实战》汪云飞编著

有想要电子书的小伙伴可以联系我

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容