springboot+jsp WebSocketServer 消息提示音-CSDN博客

本文链接：https://blog.csdn.net/weixin_43828003/article/details/130058403

webSocketServer:



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.ServerEndpoint;

import org.springframework.stereotype.Component;

/**
 * WebSocketServer服务器端
 *
 * @author han
 *
 */
@Component
@ServerEndpoint("/WebSocketServer")
public class WebSocketServer {
    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象，若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocketServer> webSockets = new CopyOnWriteArraySet<WebSocketServer>();
    private Session session;

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSockets.add(this);

    }

    @OnClose
    public void onClose() {
        webSockets.remove(this);

          }

    @OnMessage
    public void onMessage(String message) {
    }

    /**
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    /**
     * 服务器主动推送消息
     */
    public void sendMessage(String message) {
        try {
            for (WebSocketServer webSocket : webSockets) {
                webSocket.session.getBasicRemote().sendText(message);
            }

        } catch (IOException e) {
            e.printStackTrace();
        }
    }




}

WebSocketConfig



import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

    /**
     * 注册webSocket端点
     */
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 添加一个/WebSocketServer端点，客户端就可以通过这个端点来进行连接；withSockJS作用是添加SockJS支持
        registry.addEndpoint("/WebSocketServer").setAllowedOrigins("*").withSockJS();
    }

}

jsp

<html>
<body>
<audio src="${path}/webapp/music/msg.mp3" id="myaudio" controls="controls" loop="false" hidden="true"></audio>
<script>
      
  var websocket=null;
        if('WebSocket' in  window){
            websocket=new WebSocket('ws://localhost:8080/WebSocketServer');
        }else{
            layer.msg('该浏览器不支持websocket',{icon:2,time:1000});
        }
        websocket.onopen=function(event){
            console.info('建立连接');
        }
        websocket.onclose=function(event){
            console.info('关闭连接');
        }
        websocket.onmessage=function(event){
            if(event.data!=null){
                document.getElementById('myaudio').play();
                layer.confirm("您有新的消息请注意查收！", {
                    btn: ['确定','取消']
                }, function(){
                    closePlay();

                },function(){
                    closePlay();
                });
            }
            //弹框提醒，播放音乐
        }
        websocket.onerror=function(){
            console.info('websocket通讯发生错误！');
        }
        websocket.onbeforeunload=function(){
            websocket.close();
        }

        function autoPlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.play();
        }
        function closePlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.pause();
            myAuto.load();
        }
</script>
</body>
</html>