基于stomp协议的websocket

三级码农666

已于 2022-05-06 17:43:50 修改

阅读量3.1k

点赞数

文章标签： websocket 网络协议网络

于 2022-02-28 14:19:37 首次发布

本文链接：https://blog.csdn.net/qq_42437194/article/details/123134043

版权

本文展示了如何在Spring Boot应用中配置WebSocket并实现字节消息传输和消息推送。通过添加依赖，配置WebSocket和消息代理，以及创建消息控制器，实现了客户端和服务器之间的双向通信。客户端通过HTML和JavaScript连接WebSocket，发送文件数据到服务器，服务器接收后进行处理并回推更新。

摘要由CSDN通过智能技术生成

1.依赖

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

2.配置文件

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

/***
 * 注册 Stomp的端点 addEndpoint：添加STOMP协议的端点。提供WebSocket或SockJS客户端访问的地址
 * 这里没有使用SockJS协议，因为该协议只支持文本消息，启用了WebSocket的访问地址
 * 
 * @param registry
 */
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
	registry.addEndpoint("/message").setAllowedOrigins("*");
}

@Override
public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
	// 设置最大消息发送长度为5m
	registry.setMessageSizeLimit(1024 * 1024 * 5);
	registry.setSendBufferSizeLimit(1024 * 1024 * 5);
	registry.setSendTimeLimit(2000);
}

/**
 * 配置消息代理 启动Broker，消息的发送的地址符合配置的前缀来的消息才发送到这个broker
 */
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
	registry.enableSimpleBroker("/topic");// 推送消息前缀
	registry.setApplicationDestinationPrefixes("/topic");// 应用请求前缀
	registry.setUserDestinationPrefix("/user");// 推送用户前缀
}
}

3.Controller 消息控制器

	@Api(tags = "消息控制器")
	@RestController
	public class MessageController {
	    @Autowired
	    private IMessageService service;
	
	    /**
	     * 字节传输  接受前端传输过来的数据
	     * 有效载荷
	     * 前端   传输路径topic/server/byte
	     * @throws Exception
	     */

		@MessageMapping("/server/byte")
		public JsonResult subscribeByte(@Headers Map<String, Object> headers, String payload) {
			System.out.println(payload);
			Map<String,String> nativeHeaders = JSONObject.parseObject(JSON.toJSONString(headers.get("nativeHeaders")), Map.class);
			service.subscribeByte(nativeHeaders, payload);
			return JsonResult.ok();
		}
	
	
	    @Autowired
	    private SimpMessagingTemplate messagingTemplate;
	
	    /**
	     * 主动通过socket发数据给前端,模拟由硬件或算法调用该接口
	     *
	     * @param headers
	     * @param s
	     */
	    @PostMapping("/server/aa")
	    public void subscribeByte1(@Headers Map<String, Object> headers, String s) {
	//
	        new Thread(new Msg(s, messagingTemplate)).start();
	//		service.subscribeByte(headers, s);
	    }
	
	    /**
	     * 定义传输类
	     */
	    public class Msg implements Runnable {
	
	        private String msg;
	        private SimpMessagingTemplate messagingTemplate;
	
	        public Msg(String msg, SimpMessagingTemplate messagingTemplate) {
	            this.msg = msg;
	            this.messagingTemplate = messagingTemplate;
	        }
	
	        @Override
	        public void run() {
	            this.messagingTemplate.convertAndSend("/topic/anquanmao", msg);
	        }
	    }
	}

4.html 连接socket

				<!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8">
		<title>demo</title>
		</head>
		<body>
		<h3>选择一张图片并通过websocket发送到后台</h3>
		<input accept="image/*" type="text" id="file">
		<br/>
		<h3>后台会实时通过websocket把图片回传（可以把本页面打开两个以测试效果）</h3>
		<div style="width: 800px; height: 600px;">
		<img alt="" id="img" width="800" height="600" src=""/>
		</div>
		</body>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/stomp.js"></script>
		<script type="text/javascript" src="js/websocket.js"></script>
		<script type="text/javascript">
		
			// ！！！！不是原生的WebSoceket，使用的spring-boot-starter-websocket包，基于STOMP协议的WebSocket
			
			//websocket链接成功后回调
			function init(websocket){
				$("#file").change(function(){
				    console.log($(this)[0].innerHtml)
					// var objectURL=URL.createObjectURL($(this)[0].files[0]);
					// console.log(objectURL);
					// var reader = new FileReader();
			        // reader.onloadend=function() {
			        // 	if(reader.result.byteLength>0){
				    //         //reader.result是一个含有视频数据流的Blob对象
				    //         var buf = new Uint8Array(reader.result);
		            //
				    //         //如果发送字节消息，第三个参数设置true
				    //         websocket.send("/topic/server/byte",buf,true);
				    //         console.log(">>> 已发送");
			        // 	}
			        // };
			        // reader.readAsArrayBuffer($(this)[0].files[0]);
		            var value = $("#file").val()
		            websocket.send("/topic/server/byte",value); //controller ->@MessageMapping("/server/byte")地址
		            console.log(">>> 已发送");
				});
				//订阅一个topic
				websocket.subscribe("/topic/node",function(msg){
					console.log(msg);
					//字节消息
					if(msg.isByte){
		 			  	// var blob = new Blob([msg.body], { type: "image/jpg" });
		 			  	// var objectURL = URL.createObjectURL(blob);
		 			  	// $("#img").prop("src",objectURL);
		 			  	// setTimeout(function(){
		 			  	// 	URL.revokeObjectURL(objectURL);
		 	 			//   	msg.body=null;
		 			  	// },1000);
					}
				});
			}
		
		</script>
		
		</html>