SpringBoot + WebSocket 超简单案例实现，后台发送前台接收 -- 柚子真好吃

最新推荐文章于 2023-06-03 12:53:05 发布

我是小金毛

最新推荐文章于 2023-06-03 12:53:05 发布

阅读量386

点赞数

分类专栏： Web WebSocket 文章标签： websocket

本文链接：https://blog.csdn.net/baidu_39265156/article/details/106880888

版权

Web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

WebSocket

1 篇文章 0 订阅

订阅专栏

SpringBoot + WebSocket 超简单案例实现，后台发送前台接收 -- 柚子真好吃

一、导入依赖

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

二、springboot后端代码

首先编写配置WebSocketConfig来配置ServerEndpointExporter Bean，代码如下。

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

编写WebSocket服务端，代码如下。

@ServerEndpoint("/websocket/{id}")
@Component
public class WebSocketServer {
 
    private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();

    private Session session;

    @OnOpen
    public void onOpen(Session session,@PathParam("id") String id) {
        this.session = session;
       
        webSocketMap.put(id,this);
       
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
        }
    }

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


    public static void sendInfo(String message) throws IOException {
        webSocketMap.get("xx").sendMessage(message);
    }

}

最后完善请求调用发送即可，代码如下。

@RestController
public class WebSocketController {

    @RequestMapping("/send")
    public void send(){
        try {
            WebSocketServer.sendInfo("人生难得一只鸡","xx");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

三、Html前端接收代码

简易代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<div id="message"></div>
	</body>
	<script>
		
		let webSocket = null;
		
		if('WebSocket' in window){
			webSocket = new WebSocket("ws://localhost:59438/dxg/websocket/xx")
		}
		
		webSocket.onopen = function(){
			$("#message").html('连接成功！');
		}
		
		webSocket.onmessage = function(event){
			$("#message").html(event.data);
		}
		
	</script>
</html>

地址为后端配置的路径

 server.port=59438
 server.servlet.context-path=/dxg

四、实现效果

当页面刷新时，效果如下。
访问controller地址，效果如下。

地址：http://localhost:59438/dxg/send

在这里插入图片描述

参考：https://zhengkai.blog.csdn.net/article/details/80275084

我是小金毛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot + WebSocket 超简单案例实现，后台发送前台接收 -- 柚子真好吃

SpringBoot + WebSocket 超简单案例实现，后台发送前台接收 -- 柚子真好吃一、导入依赖二、springboot后端代码三、Html前端接收代码四、实现效果一、导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifac
复制链接

扫一扫