SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)

1.新建maven项目
SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第1张图片
2.导入pom依赖

<!-- SpringBoot核心jar包 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.4.RELEASE</version>
	</parent>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<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>

3.创建websocket配置文件

/**
 * @author TANGSHUAI
 * @date 2020年12月26日 下午2:48:34
 * 
 */
@Configuration
public class WebSocketConfig {
     
	@Bean
	public ServerEndpointExporter serverEndpointExporter() {
     
		return new ServerEndpointExporter();
	}
}

4.创建websocket服务类

@Component
@ServerEndpoint("/websocket")
public class WebSocketService {
     
	private Session session;
	
	//保存连接
	private static CopyOnWriteArraySet<WebSocketService> webSocketService = new CopyOnWriteArraySet<>();
	
	/**
	 * 建立连接
	 * @param session
	 */
	@OnOpen
	public void opOpen(Session session) {
     
		this.session = session;
		webSocketService.add(this);
		System.out.println("有新的连接=============》" + webSocketService.size());
	}
	
	/**
	 * 断开连接
	 */
	@OnClose
	public void onClose() {
     
		webSocketService.remove(this);
		System.out.println("断开连接=============》" + webSocketService.size());
	}

	/**
	 * 接收客户端消息
	 * @param message
	 */
	@OnMessage
	public void onMessage(String message) {
     
		System.out.println("收到客户端消息" + message);
	}

	/**
	 * 发送消息到客户端
	 * @param message
	 */
	public void sendMessage(String message) {
     
		try {
     
			for (WebSocketService webSocketService2 : webSocketService) {
     
				System.out.println("广播消息" + message);

				webSocketService2.session.getBasicRemote().sendText(message);
			}
		} catch (IOException e) {
     
			e.printStackTrace();
		}
	}

}

5.编写websocket控制器调用请求发送消息到客户端

/**
 * @author TANGSHUAI
 * @date 2020年12月26日 下午2:33:41
 * 
 */
@Controller
public class WebSocketController {
     

	@Autowired
	private WebSocketService webSocketService;

	/**
	 * 跳转thymeleaf模板路径
	 * 
	 * @return
	 */
	@RequestMapping("/hello")
	public String hello() {
     
		return "hello";
	}

	/**
	 * 模拟创建订单,发送消息到客户端
	 * 
	 * @return
	 */
	@RequestMapping("/createOrder")
	public @ResponseBody String createOrder() {
     
		webSocketService.sendMessage("你有新的订单,请及时处理========>" + UUID.randomUUID());
		return "新增订单成功!";
	}
}

6.创建thymeleaf模板hello.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	var websocket=null
	if('WebSocket' in window){
     
		//调用service请求,获取信息
		websocket=new WebSocket("ws://localhost:8080/websocket");
	}else{
     
		alert("该浏览器不支持WebSocket!")
	}
	
	websocket.onopen=function(event){
     
		console.log("建立连接!");
	}
	
	
	websocket.onclose=function(event){
     
		console.log("连接关闭!");
	}
	
	websocket.onmessage=function(event){
     
		console.log("收到消息!"+event.data);
		//弹窗提醒
	}
	
	websocket.onerror=function(){
     
		alert("websocket发生错误!");
	}
	
	websocket.onbeforeunload=function(){
     
		websocket.close();
	}
</script>
<h4>您好</h4>

</body>
</html>

7.启动springboot项目,打开两个窗口访问hello请求

①窗口1建立连接
SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第2张图片
②窗口2建立连接
省略,和上面一样

③查看后端控制台打印有两个连接
SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第3张图片
④访问后端createOrder接口

SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第4张图片
⑤查看后端控制台打印,有两个连接,打印了遍
SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第5张图片
⑥查看前面窗口1,窗口2的控制台打印信息,都收到了后端发送的订单新增成功信息

SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第6张图片
SpringBoot快速搭建简易WebSocket系统(springboot整合thymeleaf模板引擎)_第7张图片
大功告成,源码

你可能感兴趣的:(问题处理记录,websocket,java)