Springboot2.X 整合WebSocket 与 thymeleaf 实现聊天室

1.项目创建

创建springboot项目这个就不多说了,相信大家都会

pom引入依赖

        
            org.springframework.boot
            spring-boot-starter-websocket
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.projectlombok
            lombok
            true
        

配置模板引擎与端口

server:
  port: 8081
spring:
  # 模板引擎
  thymeleaf:
    mode: HTML
    encoding: utf-8
    # 禁用缓存
    cache: false

2.编写后端

(1)编写页面路由

@Controller
@RequestMapping
public class IndexController {

    @RequestMapping("/index")
    public String index(ModelMap mmap){
        mmap.put("demo","测试websocket");
        return "index";
    }
}

(2)编写websocket相关功能

主程序

@EnableWebSocket // 开启websocket
@SpringBootApplication
public class DemoApplication {

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

    /**
     * 使用springboot内置容器  需要配置
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

工具类

import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

public class WebSocketUtils {
    public static final Map ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
    // 单用户推送
    public static void sendMessage(Session session, String message) {
        if (session == null) { return; }
        // 异步推送
        RemoteEndpoint.Async async = session.getAsyncRemote();
        if (async == null) { return; }
        async.sendText(message);
    }
    // 全用户推送
    public static void sendMessageAll(String message) {
        ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));
    }
}

websocket主体代码

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

@Slf4j
@Component // 注册到spring
@ServerEndpoint("/ws/{username}") // 创建websocket服务
public class IndexWebSocket {

    /**
     * 连接成功响应
     */
    @OnOpen
    public void openSession(@PathParam("username") String username, Session session) {
        WebSocketUtils.ONLINE_USER_SESSIONS.put(username, session);
        WebSocketUtils.sendMessageAll("服务器连接成功！");
        WebSocketUtils.sendMessage(session, "");
        log.info("连接成功" + "[" + username + "] 客户端信息！");
    }

    /**
     * 收到消息响应
     */
    @OnMessage
    public void onMessage(@PathParam("username") String username, String message) {
        log.info("服务器收到：" + "[" + username + "] : " + message);
        WebSocketUtils.sendMessageAll("[" + username + "] : " + message);
    }

    /**
     * 连接关闭响应
     */
    @OnClose
    public void onClose(@PathParam("username") String username, Session session) throws IOException {
        //当前的Session 移除
        WebSocketUtils.ONLINE_USER_SESSIONS.remove(username);
        //并且通知其他人当前用户已经断开连接了
        WebSocketUtils.sendMessageAll("[" + username + "] 断开连接！");
        log.info("[" + username + "] 断开连接！");
        session.close();
    }

    /**
     * 连接异常响应
     */
    @OnError
    public void onError(Session session, Throwable throwable) throws IOException {
        session.close();
    }
}

3.编写前端

前端页面需要放置在 resources/templates 目录下

页面代码

    
    



    
[[${demo}]]




    

        请输入用户名
    
    

        请输入发送内容
    
    

        登录
        发送消息
        断开连接
    
    

        
    

4.测试功能

开启两个页面

访问服务器页面 http://IP地址:8081/index

thymeleaf 标签显示正常

退出两个页面

连接  消息发送 退出  均可  测试成功

 

项目已上传到gitee

地址: springboot-websocket-chat

如果帮到您了,请帮忙点个star