通过webSocket实现服务端推送消息到前端页面

最新推荐文章于 2025-10-27 11:54:04 发布

原创最新推荐文章于 2025-10-27 11:54:04 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #java #js

java 同时被 2 个专栏收录

12 篇文章

订阅专栏

webSocket

1 篇文章

订阅专栏

本文详细介绍如何在Spring Boot项目中启用WebSocket支持，包括pom文件的依赖配置，服务器端WebSocketConfig类的设置，以及前端页面的连接和消息交互。通过实例演示了Controller和Service层的处理，适合Websocket初学者参考。

pom文件中引入依赖

<!-- 开启websocket支持-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置类

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

controller层代码

@RestController
@RequestMapping("/test")
@Slf4j
public class WebsocketTest {
    @Autowired
    private Websocket websocket;

    @RequestMapping(value = "/a",method = RequestMethod.GET)
    public String  test(String a){
        if (a!=null){
            websocket.sendMessage("heheh");
        }        return a;
    }
}

service层代码

@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class Websocket {

    private Session session;

    private static CopyOnWriteArraySet<Websocket> websocket = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session =session;
        websocket.add(this);
        log.info("【websocket消息】有新的连接，总数：{}",websocket.size());
    }
    @OnClose
    public void onClose(){
        websocket.remove(this);
        log.info("【websocket消息】连接断开，总数：{}",websocket.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("【websocket消息】，收到客户端发来的消息:{}",message);
    }
    public void sendMessage(String message){
        for (Websocket websocket : websocket) {
            log.info("【websocket消息】广播消息:{}",message);
            try {
                websocket.session.getBasicRemote().sendText(message);
            }
            catch (Exception e){
                e.printStackTrace();

            }        }
    }
}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
</head>
<body>

websocket测试

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    var websocket = null;
    if ('WebSocket' in window) {
        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)
        alert("收到服务端消息");
    }

    websocket.onerror = function () {
        alert('websocket通信发生错误！');
    }

    window.onbeforeunload = function () {
        websocket.close();
    }

</script>
</body>
</html>