SpringBoot+WebSocket【sockjs】广播配置

最新推荐文章于 2025-08-28 17:55:36 发布

原创最新推荐文章于 2025-08-28 17:55:36 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#topic #websocket #sockjs

日常随记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用SpringBoot实现WebSocket广播功能，通过配置WebSocket环境，创建控制器处理消息，并利用前端JavaScript进行连接和发送消息，实现客户端与服务器的实时通信。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

package com.vking.power.web.common.config;

import org.springframework.context.annotation.Bean;
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;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 服务器 Tomcat 启动会加载 tomcatjdbc，而内置tomcat 不会，
 * 根据此特性来判断当前环境，如果是内置tomcat，则加载websocket 环境
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer
{

	@Bean
//	@ConditionalOnMissingClass(value = "org.apache.tomcat.jdbc.pool.DataSource")
    public ServerEndpointExporter serverEndpointExporter() 
	{
		return new ServerEndpointExporter();  
    }
	
	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry){
		registry.addEndpoint("/endpointWisely").setAllowedOrigins("*").withSockJS();
		System.out.println("112");
	}
	
	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry){
		registry.enableSimpleBroker("/topic");
	}
}

/**
 * 
 */
package com.vking.power.web.module.xuji.controller;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import com.vking.power.web.module.xuji.pojo.WiselyMessage;
import com.vking.power.web.module.xuji.pojo.WiselyResponse;

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

}

/**
 * 
 */
package com.vking.power.web.module.xuji.pojo;

public class WiselyMessage
{
	private String name;
	
	public String getName(){
		return name;
	}
}

/**
 * 
 */
package com.vking.power.web.module.xuji.pojo;

public class WiselyResponse
{
	private String responseMessage;
	
	public WiselyResponse(String responseMessage){
		this.responseMessage = responseMessage;
	}
	
	public String getResponseMessage(){
		return responseMessage;
	}
}

/**
 * 
 */
package com.vking.power.web.module.xuji.service;

import java.io.IOException;
import java.nio.charset.Charset;

import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Service;

@Service
public class TestJsonDataService
{

	@Value("classpath:/static/xujiTest/warnInfo.json")
	private Resource warnInfo;
	
	public String getWarmJson(){
		try
		{
			return IOUtils.toString(warnInfo.getInputStream(), Charset.forName("UTF-8"));
		} catch (IOException e)
		{
			e.printStackTrace();
		}
		return null;
	}
}

<!DOCTYPE html>
　　<html xmlns:th="http://www.michenggw.com/">
	　　<head>
		<meta charset="UTF-8" />
		　　<title>Spring Boot+WebSocket+广播式</title>
	</head>
	　　<body οnlοad="disconnect()">
		　　<noscript>
			<h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2>
		</noscript>
		　　<div>
			　　<div>
				　　<button id="connect">连接</button>
				　　<button id="disconnect" disabled="disabled">断开连接</button>
			</div>
			　　<div id="conversationDiv">
				　　<label>输入你的名字</label>www.furggw.com <input type="text" id="name" />
				　　<button id="sendName">发送</button>
				　　<p id="response"></p>
			</div>
		</div>
		<script src="../static/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/sockjs.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/stomp.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
		
			$(function(){
				console.log("测试一下")
				
			})
			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();
			}

			$("#connect").on("click", function(){
				connect();
			});
			
			$("#disconnect").on("click", function(){
				disconnect();
			});
			
			$("#sendName").on("click", function(){
				sendName();
			});
			
			
			
			function connect() {
				console.log("测试一下2222")
				var socket = new SockJS('http://localhost:10004/lead/endpointWisely'); //1
				stompClient = Stomp.over(socket);
				stompClient.connect({}, function(frame) {
					setConnected(true);
					console.log('Connected: ' + frame);
					stompClient.subscribe('/topic/getResponse', function(respnose) { //2
						showResponse(JSON.parse(respnose.body).responseMessage);
					});
				});
			}

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

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

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

sockjs、sotmp资源下载路径：

链接：https://pan.baidu.com/s/15Gn9uJ1W7i9WgPrgIB1z7Q
提取码：oy34