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

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


     }
    
        


}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值