zoukankan html css js c++ java

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、效果图

查看全文

相关阅读:
231. Power of Two
204. Count Primes
205. Isomorphic Strings
203. Remove Linked List Elements
179. Largest Number
922. Sort Array By Parity II
350. Intersection of Two Arrays II
242. Valid Anagram
164. Maximum Gap
147. Insertion Sort List

原文地址：https://www.cnblogs.com/zouhong/p/11891198.html