springBoot结合webSocket基本使用

悠悠 2022-04-14 20:13 312阅读 0赞

###                                                           服务端代码： ###

### **1.加入依赖** ###

<parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.0.4.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <dependencies>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>
        </dependencies>

### **2.创建服务器端点** ###

/**
     * 对于 WebSocket 的使用，可以先通过 Spring 创建 Java 配置文件。在这个文件 中， 先新建 Server
     * EndpointExporter 对象 ， 通过它可以定义 WebSocket 服务器的端点 ， 这样客户端就能请求服务器 的
     * 端点，其内容如代码清单,有了这个 Bean ，就可以使用＠ServerEndpoint 定义一个端点服务类。
     * 在这个站点服务类中，还可以定义 WebSocket 的打开 、关闭 、错误和发送消息的方法。
     */
    @Configuration
    public class WebSocketConfig {
    
        /**创建服务器端点*/
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    }

### **3.创建webSocket** ###

@ServerEndpoint("/ws")
    @Service
    public class WebSocket {
    
    /**
         *    这里稍微解释一下这些主要注解的作用 。
         *   • @ServerEndpoint("/ws") ：
         *     表示让 Spring 创建 WebSocket 的服务端点 ，其中请求地址是“／ws”。
         *   • @OnOpen：
         *     标注客户端打开 WebSocket 服务端点调用方法。
         *   • @OnClose ： 
         *     标注客户端关 闭 WebSocket 服务端点调用方法。
         *   • @OnMessage ： 
         *     标注客户端发送消息， WebSocket 服务端点调用方法。
         *   • @OnError：
         *     标注客户 端请求 WebSocket 服务端点发生异常调用 方法。
         * 因为每一个客户端打开时，都会为其创建一个 WebSocket 对象，所以这里的打开方
         * 法中都会去计数并且将这个对象保存到 CopyOnWriteArraySet 中，这样就可以知道拥有多少连接。对
         * 于关 闭方法则是清除这个对象，并且计数减一。对于消息发送方法 ，则是通过轮询对所有的客户端
         * 连接都给予发送消息，所以所有的连接都可以收到这个消息。但是有时候可能只 是需要发送给特定13.4 WebSocket 应用 309
         * 的用户，则需要得到用户的信息，然后再发送给特定的用户 。
         */
    
        /**静态变量，用来记录当前在线连接数 。 应该把它设计成线程安全的*/
        private static int onlineConunt = 0;
    
        /**oncurrent 包的线程安全 Set ，用来存放每个客户端对应的 WebSocketServiceimpl 对象*/
        private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
    
        /**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
        private Session session;
    
        /** 连接建立成功调用的方法 */
        @OnOpen
        public void onOpen(Session session){
            this.session = session;
            //加入 set 中
            webSocketSet.add(this);
            //在线数加1
            addOnlineCount();
            System.out.println("有新连接加入！当前在线人数为："+getOnlineConunt());
            try {
                sendMessage("有新的连接加入了！！");
            } catch (IOException e) {
                System.out.println("IO异常");
            }
    
        }
        //连接关闭调用的方法
        @OnClose
        public void onClose(){
            //从set中删除
            webSocketSet.remove(this);
            //在线数减1
            subOnlineCount();
            System.out.println("有一连接关闭！当前在线人数为："+getOnlineConunt());
        }
        /**
         * 收到客户端消息后调用的方法
         * @param message 客户端发送过来的消息
         * @param session
         */
        @OnMessage
        public void onMessage(String message,Session session){
            System.out.println("来自客户端的消息："+message);
            //群发消息
            for(WebSocket item : webSocketSet){
                //获取当前用户名称
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    System.out.println("发送消息异常");
                }
            }
        }
        //发送错误时调用
        @OnError
        public void onError(Session session,Throwable error){
            System.out.println("发送错误");
            error.printStackTrace();
        }
    
        /**
         * 发送消息
         * @param message 客户端消息
         * @throws IOException
         */
        private void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
        //返回在线数
        private static synchronized int getOnlineConunt() {
            return onlineConunt;
        }
        //当连接人数增加时
        private static synchronized void addOnlineCount() {
            WebSocket.onlineConunt ++;
        }
        //当连接人数减少时
        private static synchronized void subOnlineCount() {
            WebSocket.onlineConunt --;
        }
    }

### **                                                       ** ###

### **                                                            浏览器端：** ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    
    	var ws = null;
    	if('WebSocket' in window){
    		alert("你的浏览器支持 WebSocket");
    		ws = new WebSocket("ws://localhost:9999/ws");
    	} else {
    		alert('你的浏览器不支持webSocket');
    	}
    	//建立成功建立的回调方法
    	ws.onopen = function(event){
    		alert("消息已发送")
    		appendMessage("open");
    	}
    	//接收到消息的回调方法
    	ws.onmessage = function(event){
    		alert("接收到服务端发的消息")
    		appendMessage(event.data);
    	}
    	//连接关闭的回调方法
    	ws.onclose = function(){
    		alert("连接已关闭")
    		appendMessage("close");
    	}
    	//连接发送错误的回调方法
    	ws.onerror = function(){
    		alert("连接发送错误")
    		appendMessage("error");
    	}
    	
    	//监听窗口关闭事件，当窗口关闭时，主动关闭webSocket连接
    	//防止连接还没断开就关闭窗口，server端会抛异常
    	ws.onbeforeunload = function(){
    		alert("窗口关闭了，关闭socket连接")
    		ws.onclose();
    	}
    	
    	//将消息显示在网页上
    	function appendMessage(message){
    		var context = $("#context").html() +"<br/>" +message;
    		$("#context").html(context);
    	}
    	//关闭连接
    	function closeWebSocket(){
    		ws.close();
    	}
    	//发送消息
    	function sendMessage(){
    		var message = $("#message").val();
    		ws.send(message);
    	}
    	
    </script>
    </head>
    <body>
    	 
    	
    	<input id="message" type="text"/>
    	<button onclick="sendMessage()" >发送消息</button>
    	<button onclick="closeWebSocket()" >关闭连接</button>
    	<div id="context"></div>
    	
    </body>
    
    </html>

> 这样一个浏览器端和服务器端的webSocket的基本通信就完成了，以上代码近支持浏览器支持webSocket，对于有的浏览器不支持webSocket的还可以使用STOMP协议，不过需要配置，不过目前浏览器大多支持webSocket。