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

最新推荐文章于 2025-02-04 17:04:47 发布

习惯沉淀_

最新推荐文章于 2025-02-04 17:04:47 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： webSocket 提示音乐

本文链接：https://blog.youkuaiyun.com/Demo1109/article/details/90602826

博客介绍了WebSocket客户端使用原生HTML5的实现，先通过js判断浏览器是否支持WebSocket，写出客户端事件，还提及原生页面提示音。后端方面，引入依赖，配置类交由spring管理，编写WebSocket类，单独用webSocketServer包，可按业务逻辑调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
}

原生页面提示音：

<audio id="bgm"  loop="loop">
    <source src="/mp3/xx.mp3" type="audio/mpeg"/>
</audio>

在后端：

引入依赖

<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();
                }       
        }


     }
    
        


}

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