1.项目创建

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

pom引入依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</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-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

配置模板引擎与端口

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<String, Session> 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 目录下

页面代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>websocket聊天室</title>
</head>
<body>
<div>
    <div><h1>[[${demo}]]</h1></div>
</div>
<br>
<div>
    <div>
        <label>请输入用户名</label><input id="username" value="">
    </div>
    <div>
        <label>请输入发送内容</label><input id="in_room_msg" value="">
    </div>
    <div>
        <button id="user_add">登录</button>
        <button id="user_send_all">发送消息</button>
        <button id="user_back">断开连接</button>
    </div>
    <div>
        <textarea id="message_content"></textarea>
    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var urlPrefix = 'ws://IP地址:8081/ws/';
        var ws = null;

        var joinfun = function () {
            var username = $("#username").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 连接...");
            }
        };
        joinfun();//自动连接

        // 重新连接
        $('#user_add').click(function () {
            joinfun();
        });

        //客户端发送消息到服务器
        $('#user_send_all').click(function () {
            var msg = $('#in_room_msg').val();
            if (ws) {
                ws.send(msg);
            }
        });
        // 断开连接
        $('#user_back').click(function () {
            if (ws) {
                ws.close();
            }
        });
    });
</script>
</html>