websocket广播式实例

1、引入相关依赖

<parent>
<groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
  </parent>
 <dependencies>
  <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>
 </dependencies>

2、写配置类

package springboot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/endpointZouHong").withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}

3、实体类

服务端接收类：

package springboot.bean;
public class ZouhongServerMessage {
    private String name;
        public String getName() {
        return name;
    }
        public void setName(String name) {
        this.name = name;
    }
}

浏览器接收类：

package springboot.bean;
public class ZouhongBrowResponse {
   private String responseMessage;
   public ZouhongBrowResponse(String responseMessage) {
       this.responseMessage = responseMessage;
   }
    public String getResponseMessage() {
    return responseMessage;
     }
   public void setResponseMessage(String responseMessage) {
    this.responseMessage = responseMessage;
    }
   
}

4、处理器

package springboot.controller;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import springboot.bean.ZouhongBrowResponse;
import springboot.bean.ZouhongServerMessage;

@Controller
public class ZHController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getResponse")
    public ZouhongBrowResponse say(ZouhongServerMessage message) throws Exception{
        Thread.sleep(3000);
        return new ZouhongBrowResponse("welcome,"+message.getName()+"!");
   }
}

5、前端

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SpringBoot+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 th:src="@{js/jquery.js}"></script>
<script th:src="@{js/stomp.min.js}"></script>
<script th:src="@{js/sockjs.min.js}"></script>
<script th:inline="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('/endpointZouHong');
    stompClient=Stomp.over(socket);
    stompClient.connect({},function(frame){
        setConnected(true);
        console.log("Connected:   "+frame);
        stompClient.subscribe('/topic/getResponse',function(response){
            showResponse(JSON.parse(response.body).responseMessage);
        });
    }); 
}

function disconnect(){
    if(stompClient!=null){
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

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

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

6、效果图

posted on 2019-11-19 18:07 小破孩楼主阅读(968) 评论(0) 编辑收藏举报