springboot-websocket使用

Spring Boot WebSocket 实战

最新推荐文章于 2025-06-02 12:46:44 发布

原创最新推荐文章于 2025-06-02 12:46:44 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springboot

springboot 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在Spring Boot项目中实现WebSocket功能，包括添加依赖、定义ServerEndPoint、配置@EnableWebSocket及前端JS交互代码，帮助读者快速上手WebSocket开发。

A. 在pom文件中添加依赖

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

B. 定义ServerEndPoint

@RestController
@ServerEndpoint("/chat-room/{username}")
public class ChatRoomServerEndpoint {
    @OnOpen
    public void openSession(@PathParam("username") String username, Session session) {
    }

    @OnMessage
    public void onMessage(@PathParam("username") String username, String message) {
    }

    @OnClose
    public void onClose(@PathParam("username") String username, Session session) {
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
    }
}

C.开启对websocket的支持

给应用添加注解@EnableWebSocket，同时往web容器里面注入一个bean，ServerEndpointExporter。

@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {

	public static void main(String[] args) {
		SpringApplication.run(WebSocketApplication.class, args);
	}

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

D.前端使用

        var urlPrefix ='ws://localhost:8080/chat-room/';
        var ws = null;
        $('#user_join').click(function(){
            var username = $('#in_user_name').val();
            if(username==''){
                alert("请输入用户名！");
                return;
            }
            var url = urlPrefix + username;
            ws = new WebSocket(url);
            ws.onopen = function () {
                console.log("建立 websocket 连接...");
            };
            ws.onmessage = function(event){
                //服务端发送的消息
                $('#message_content').append(event.data+'\n');
            };
            ws.onclose = function(){
                $('#message_content').append('用户['+username+'] 已经离开聊天室!');
                console.log("关闭 websocket 连接...");
            }
        });
        //客户端发送消息到服务器
        $('#user_send_all').click(function(){
            var msg = $('#in_room_msg').val();
            if(msg==''){
                alert("请填写消息！");
                return;
            }
            if(ws && msg!=''){
                ws.send(msg);
            }
        });
        // 退出聊天室
        $('#user_exit').click(function(){
            if(ws){
                ws.close();
            }
        });