SpringBoot WebSocket服务端创建

男娘i 2023-10-09 17:30 49阅读 0赞

> 引入maven

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

> 新建WebSocket配置文件

import org.springframework.context.annotation.Bean;
    import org.springframework.stereotype.Component;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    @Component
    public class WebSocketConfig {
        
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
        
    
            return new ServerEndpointExporter();
        }
    }

> 新建WebSocket服务

import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.EnvironmentAware;
    import org.springframework.core.env.Environment;
    import org.springframework.stereotype.Component;
    
    @Component
    @ServerEndpoint("/webSocket/{sid}")
    public class WebSocketServer implements EnvironmentAware {
        
        //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
        private static int onlineCount = 0;
    
        //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
        private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    
        private static Environment globalEnvironment;
    
        //接收sid
        private String sid="";
    
        //与某个客户端的连接会话，需要通过它来给客户端发送数据
        private Session session;
    
        @Autowired
        private Environment environment;
    
        /**
         * 连接建立成功调用的方法
         *
         * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
         */
        @OnOpen
        public void onOpen(Session session,@PathParam("sid") String sid) {
        
            //防止重复连接
            for (WebSocketServer item : webSocketSet) {
        
                if (item.sid.equals(sid)) {
        
                    webSocketSet.remove(item);
                    subOnlineCount();           //在线数减1
                    break;
                }
            }
    
            this.session = session;
            this.environment = globalEnvironment;
            webSocketSet.add(this);     //加入set中
            addOnlineCount();           //在线数加1
            System.out.println("有新用户连接，连接名:"+sid+",当前在线人数为" + getOnlineCount());
            this.sid=sid;
    
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
        
            webSocketSet.remove(this);  //从set中删除
            subOnlineCount();           //在线数减1
            System.out.println("连接关闭："+sid+"当前在线人数为" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         * @param session 可选的参数
         */
        @OnMessage
        public void onMessage(String message, Session session) {
        
            System.out.println("收到来自:"+sid+"的信息:"+message);
    //        //群发消息
            for (WebSocketServer item : webSocketSet) {
        
                try {
        
                    System.out.println("推送消息到:"+sid+"，推送内容:"+message);
                    item.sendMessage("服务器返回："+message);
                } catch (IOException e) {
        
                    e.printStackTrace();
                    continue;
                }
            }
    
        }
    
        /**
         * 发生错误时调用
         */
        @OnError
        public void onError(Session session, Throwable error) {
        
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
        /**
         * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
         */
        public void sendMessage(String message) throws IOException {
        
            this.session.getBasicRemote().sendText(message);
            //this.session.getAsyncRemote().sendText(message);
        }
    
        /**
         * 群发自定义消息
         * */
        public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
        
            //log.info("推送消息到窗口"+sid+"，推送内容:"+message);
            System.out.println("推送消息到:"+sid+"，推送内容:"+message);
            for (WebSocketServer item : webSocketSet) {
        
                try {
        
                    //这里可以设定只推送给这个sid的，为null则全部推送
                    if(sid==null||sid.length()==0) {
        
                        item.sendMessage(message);
                    }else if(item.sid.equals(sid)){
        
                        item.sendMessage(message);
                    }
                } catch (IOException e) {
        
                    continue;
                }
            }
        }
    
        //推送给指定sid
        public static boolean sendInfoBySid(@PathParam("sid") String sid,String message) throws IOException {
        
            //log.info("推送消息到窗口"+sid+"，推送内容:"+message);
            boolean result=false;
            if(webSocketSet.size()==0){
        
                result=false;
            }
            for (WebSocketServer item : webSocketSet) {
        
                try {
        
                  if(item.sid.equals(sid)){
        
                      item.sendMessage(message);
                      System.out.println("推送消息到:"+sid+"，推送内容:"+message);
                      result=true;
                  }
                } catch (IOException e) {
        
                    continue;
                }
            }
            return result;
        }
    
    
        public static synchronized int getOnlineCount() {
        
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
        
            WebSocketServer.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
        
            WebSocketServer.onlineCount--;
        }
    
        @Override
        public void setEnvironment(final Environment environment) {
        
            this.environment = environment;
            if (globalEnvironment == null && environment != null) {
        
                globalEnvironment = environment;
            }
        }
    }

> 前端连接示例代码

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>本地websocket测试</title>
            <meta name="robots" content="all" />
            <meta name="keywords" content="本地,websocket,测试工具" />
            <meta name="description" content="本地,websocket,测试工具" />
            <style>
                .btn-group{
          
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <input type='text' value='ws://127.0.0.1:6767/webSocket/10' class="form-control" style='width:390px;display:inline'
             id='wsaddr' />
            <div class="btn-group" >
                <button type="button" class="btn btn-default" onclick='addsocket();'>连接</button>
                <button type="button" class="btn btn-default" onclick='closesocket();'>断开</button>
                <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button>
            </div>
            <div class="row">
                <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
                <input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="doSend();">发送</button>
                </span>
                </div>
            </div>
            
            
        </body>     
            
            <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
            
            
            
            
            <script language="javascript" type="text/javascript">
                function formatDate(now) {
          
                    var year = now.getFullYear();
                    var month = now.getMonth() + 1;
                    var date = now.getDate();
                    var hour = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
                    return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
                        " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                            second = second < 10 ? ("0" + second) : second);
                }
                var output;
                var websocket;
     
                function init() {
          
                    output = document.getElementById("output");
                    testWebSocket();
                }
     
                function addsocket() {
          
                    var wsaddr = $("#wsaddr").val();
                    if (wsaddr == '') {
          
                        alert("请填写websocket的地址");
                        return false;
                    }
                    StartWebSocket(wsaddr);
                }
     
                function closesocket() {
          
                    websocket.close();
                }
     
                function StartWebSocket(wsUri) {
          
                    websocket = new WebSocket(wsUri);
                    websocket.onopen = function(evt) {
          
                        onOpen(evt)
                    };
                    websocket.onclose = function(evt) {
          
                        onClose(evt)
                    };
                    websocket.onmessage = function(evt) {
          
                        onMessage(evt)
                    };
                    websocket.onerror = function(evt) {
          
                        onError(evt)
                    };
                }
     
                function onOpen(evt) {
          
                    writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");
                }
     
                function onClose(evt) {
          
                	 console.log('websocket 断开: ' + evt.code + ' ' + evt.reason + ' ' + evt.wasClean)
      					console.log(evt)
                    writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
                    websocket.close();
                }
     
                function onMessage(evt) {
          
                    writeToScreen('<span style="color:blue">服务端回应 ' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
                        evt.data + '</span>');
                }
     
                function onError(evt) {
          
                    writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
                }
     
                function doSend() {
          
                    var message = $("#message").val();
                    if (message == '') {
          
                        alert("请先填写发送信息");
                        $("#message").focus();
                        return false;
                    }
                    if (typeof websocket === "undefined") {
          
                        alert("websocket还没有连接，或者连接失败，请检测");
                        return false;
                    }
                    if (websocket.readyState == 3) {
          
                        alert("websocket已经关闭，请重新连接");
                        return false;
                    }
                    console.log(websocket);
                    $("#message").val('');
                    writeToScreen('<span style="color:green">你发送的信息 ' + formatDate(new Date()) + '</span><br/>' + message);
                    websocket.send(message);
                }
     
                function writeToScreen(message) {
          
                    var div = "<div class='newmessage'>" + message + "</div>";
                    var d = $("#output");
                    var d = d[0];
                    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
                    $("#output").append(div);
                    if (doScroll) {
          
                        d.scrollTop = d.scrollHeight - d.clientHeight;
                    }
                }
     
     
                function en(event) {
          
                    var evt = evt ? evt : (window.event ? window.event : null);
                    if (evt.keyCode == 13) {
          
                        doSend()
                    }
                }
            </script>
     
    </html>

![在这里插入图片描述][6f3dd3085a7b4a968af7db31c7ad010d.png]

[6f3dd3085a7b4a968af7db31c7ad010d.png]: https://img-blog.csdnimg.cn/6f3dd3085a7b4a968af7db31c7ad010d.png