SpringBoot整合WebSocket详细教程

预期效果

共开启两个页面，实现一对一聊天。

服务端代码：https://gitee.com/lianaozhe/springboot-websocket.git

代码实现逻辑

服务端

导入相关依赖：

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

        <!-- hutool 工具包，各种封装功能 一应俱全-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.5</version>
        </dependency>

WebSocketConfig配置类：

package com.web.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @ClassName WebSocketConfig
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:18
 * @Version 1.0
 */
@Configuration
public class WebSocketConfig {

    /**
     * 	注入ServerEndpointExporter，
     * 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    
}

WebSocket操作类：

package com.web.websocket;

import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

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

import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

/**
 * @ClassName WebSocket
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:20
 * @Version 1.0
 */
@Component
@Slf4j
@ServerEndpoint("/websocket/{userId}")
public class WebSocket {

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    /**
     * 用户ID
     */
    private String userId;

    /**
     * 用来存放每个客户端对应的MyWebSocket对象。
     */
    private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
    // 用来存在线连接用户信息
    private static ConcurrentHashMap<String,Session> sessionPool = new ConcurrentHashMap<String,Session>();

    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value="userId")String userId) {
        try {
            this.session = session;
            this.userId = userId;
            webSockets.add(this);
            sessionPool.put(userId, session);
            log.info("【websocket消息】有新的连接，用户id是【{}】总数为【{}】",userId,webSockets.size());
        } catch (Exception e) {
        }
    }

    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        try {
            webSockets.remove(this);
            sessionPool.remove(this.userId);
            log.info("【websocket消息】连接断开，总数为:"+webSockets.size());
        } catch (Exception e) {
        }
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     * @param message
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端消息:"+message);
        JSONObject jsonObject = JSONUtil.parseObj(message);
        Object toUserId = jsonObject.get("toUserId");
        Session session = sessionPool.get(toUserId);

        session.getAsyncRemote().sendText(JSONUtil.toJsonStr(jsonObject.get("msg")));

    }

    /** 发送错误时的处理
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {

        log.error("用户错误,原因:"+error.getMessage());
        error.printStackTrace();
    }


    // 此为广播消息
    public void sendAllMessage(String message) {
        log.info("【websocket消息】广播消息:"+message);
        for(WebSocket webSocket : webSockets) {
            try {
                if(webSocket.session.isOpen()) {
                    webSocket.session.getAsyncRemote().sendText(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 此为单点消息
    public void sendOneMessage(String userId, String message) {
        Session session = sessionPool.get(userId);

        if (session != null&&session.isOpen()) {
            try {
                log.info("【websocket消息】 单点消息:"+message);
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 此为单点消息(多人)
    public void sendMoreMessage(String[] userIds, String message) {
        for(String userId:userIds) {
            Session session = sessionPool.get(userId);
            if (session != null&&session.isOpen()) {
                try {
                    log.info("【websocket消息】 单点消息:"+message);
                    session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

    }

}

TestController测试接口类：

package com.web.controller;

import com.web.websocket.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @ClassName TestController
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:23
 * @Version 1.0
 */
@RestController
@RequestMapping("web")
public class TestController {

    @Autowired
    private WebSocket webSocket;

    @RequestMapping("test")
    public String test(String userId,String msg){
        webSocket.sendOneMessage(userId,msg);
        return "成功";
    }
}

客户端

test.html文件：

<!doctype html>
<html lang="zh-CN">
	<head>
		<!-- 必须的 meta 标签 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap 的 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
			integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">



		<title>WebSocket1</title>

		<style>
			form {
				width: 820px;
				margin: auto;
			}

			.div1 {
				width: 820px;
				height: 500px;
				border: #000000;
				border-width: thin;
				border-style: solid;
			}

			.div2 {
				text-align: center;
				width: 800px;
				height: 50px;
			}
		</style>

		<script>
			function clearData() {
				$("#div1").html("");
			}


			var socket;

			function openSocket() {
				if (typeof(WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					console.log("您的浏览器支持WebSocket");

					//websocket地址
					var socketUrl = "ws://localhost:8088/websocket/20";
					console.log(socketUrl);
					if (socket != null) {
						socket.close();
						socket = null;
					}
					socket = new WebSocket(socketUrl);
					//打开事件
					socket.onopen = function() {
						console.log("websocket已打开");
						$("#div1").append("websocket已打开" + "<br \>");
					};
					//获得消息事件
					socket.onmessage = function(msg) {
						console.log(msg.data);
						$("#div1").append("接收到消息：" + msg.data + "<br \>");

					};
					//关闭事件
					socket.onclose = function() {
						console.log("websocket已关闭");
						$("#div1").append("websocket已关闭" + "<br \>");
					};
					//发生了错误事件
					socket.onerror = function() {
						console.log("websocket发生了错误");
						$("#div1").append("websocket发生了错误" + "<br \>");
					}
				}
			}

			function sendMsg() {
				if (typeof(WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					console.log("您的浏览器支持WebSocket");
					console.log('{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');
					socket.send('{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');

					var msg = document.getElementById("msg").value;
					$("#div1").append("发送消息：" + msg + "<br \>");
					document.getElementById("msg").value = "";
				}


			}
		</script>

	</head>
	<body>

		<h1 align="center">WebSocket测试Demo</h1><br />
		<form class="form-inline">

			<div class="form-group mx-sm-3 mb-2">
				<label for="toUserId" class="sr-only">toUserId</label>
				<input type="text" class="form-control" id="toUserId" placeholder="toUserId">
			</div>
			<div class="form-group mb-2">
				<label for="msg" class="sr-only">消息內容</label>
				<input type="text" class="form-control" id="msg" placeholder="消息內容">
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-primary" onclick="openSocket()">开启socket</button>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-danger" onclick="sendMsg()">发送消息</button>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-secondary" onclick="clearData()">清空内容</button>
			</div>
			<div class="div2"></div>
			<div class="div1" id="div1"></div>

		</form>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
		integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous">
	</script>

</html>

复制test.html文件为test2.html文件，将上面的userId由’20’改为’10’,后面测试使用。

测试

测试一

运行服务端项目，打开test.html,点击’开启socket’按钮(一定要先开启socket连接，否则无法接收到消息)。

可以看到，服务端与客户端已建立了连接。

然后调用我们的测试接口：

然后观察test.html页面：

可以看到，客户端的用户20成功接收到服务端发来的信息。

测试二

打开test2.html，同样点击’开启socket’,与服务端建立连接。

此时用test2.html给test.html发送一条消息。

可以看到，此时两个页面直接已经可以进行一对一的聊天了。

代码已上传到git：https://gitee.com/lianaozhe/springboot-websocket.git文章来源地址https://www.toymoban.com/news/detail-427703.html

到了这里，关于SpringBoot整合WebSocket详细教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！