webSocket前后端使用和页面提示音

╰半夏微凉° 2022-01-25 22:27 380阅读 0赞

**webSocket客户端使用原生的HTML5**

首先js判断该浏览器是否支持webSocket

var webSocket = null;
    if('webSocket' in window ){
    
        webSocket = new WebSocket("ws://192.168.1.1/webSocket");
    }else{
    
        alert("该浏览器不支持webSocket");
    }

写出客户端事件：

webSocket.onopen(even){
        console.log("连接成功");
    }
    webSocket.onclose(){
        console.log.("关闭连接")
    }
    webSocket.onmessage(even){
        console.log("服务器发送来的数据:"+even.data);
    
          //这里作出处理  页面的弹出 提示音出现
           document.getElementById("bgm").play();
               .....
        
    }
    
    webSocket.onerror=function(){
        console.log("webSocket出现错误");
    }
    window.onbeforeunload=function(){
        webSocket.close();
    }

原生页面提示音：

**在后端：**

引入依赖

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

首先需要配置一个class交个spring管理

@Component
    public class WebSocketConfig{
    
    
            @Bean
            public ServerEndpointExporter serverEndpointExporter(){
                
                   return new ServerEndpointExporter();
            
            }
    
    
    
    }

然后开始写webSocket类

这里我们单独用一个包 webSocketServer

@Component
    @ServerEndpoint("/webSocket")
    @Slf4j
    public class WebSocket{
    
        private Session session ;
        
        private CopyOnWriteArraysSet<WebSocket> webSockets =  new             
                                                             CopyOnWriteArraysSet<WebSocket>();
        //开始对接前端事件  用注解 
        @OnOpen
        public void onopen(Seesion session ){
            this.session = session ; 
            webSockets.add(this);
            log.info("已经连接 连接数:{}",webSockets.size());
        }
        
        @OnClose
        punlic void onClose(){
            webSockets.remove(this);
             log.info("已经连接 连接数:{}",webSockets.size());
        }
        
        public void sendMsg(String msg){
                for(WebSocket webSocket :webSocktes){
                      try{ //为什么不抛出呢？  因为不妨碍别的进行，这个地方死可以 但调用的地方捕获的捕获的话就会整体回滚 就不好了。
                    webocket.session.getBasicRemote.sendText(msg);
                    log.info("[发送数据为{}]",msg);
                    }catch(IOException e){
                           e.printStrackTrace();
                    }       
            }
    
    
         }
        
            
    
    
    }

那么根据业务逻辑调用这个方法就可以了