012webSocket消息推送

ゞ浴缸里的玫瑰 2022-03-07 14:48 304阅读 0赞

#### 1.前端 ####

//发送websocket消息
    <#--弹窗-->
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        提醒
                    </h4>
                </div>
                <div class="modal-body">
                    你有新的订单
                </div>
                <div class="modal-footer">
                    <button onclick="javascript:document.getElementById('notice').pause()" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button onclick="location.reload()" type="button" class="btn btn-primary">查看新的订单</button>
                </div>
            </div>
        </div>
    </div>
    
    <#--播放音乐-->
    <audio id="notice" loop="loop">
        <source src="/sell/mp3/song.mp3" type="audio/mpeg" />
    </audio>
    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        var websocket = null;
        if('WebSocket' in window) {
            websocket = new WebSocket('ws://127.0.0.1:8080/sell/webSocket');
        }else {
            alert('该浏览器不支持websocket!');
        }
    
        websocket.onopen = function (event) {
            console.log('建立连接');
        }
    
        websocket.onclose = function () {
            console.log('连接关闭');
        }
    
        websocket.onmessage = function (event) {
            console.log('收到消息：'+event.data);
            //弹窗提醒, 播放音乐
            $('#myModal').modal('show');
    
            document.getElementById('notice').play();
        }
    
        websocket.onerror = function () {
            alert('websocket通信发生错误！');
        }
    
        //关闭websocket
        window.onbeforeunload = function () {
            websocket.close();
        }
    </script>

#### 2. 引入依赖 ####

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

#### 3.后端 ####

引入配置

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

编写WebSocket类

@Component
    @ServerEndpoint("/webSocket")
    @Slf4j
    public class WebSocket {
    
        private Session session;
    
        private  static CopyOnWriteArrayList<WebSocket> weSocketSet = new CopyOnWriteArrayList<>();
    
        @OnOpen
        public void  onOpen(Session session) {
            this.session = session;
            weSocketSet.add(this);
            log.info("【websocket消息】有新的连接，总数：{}",weSocketSet.size());
        }
    
        @OnClose
        public void onClose(){
            weSocketSet.remove(this);
            log.info("【websocket消息】连接断开，总数：{}",weSocketSet.size());
        }
    
        @OnMessage
        public void onMessage(String message){
            log.info("【websocket消息】收到客户端发来的消息：{}",message);
        }
    
    
        public void sendMessage(String message) {
            for (WebSocket webSocket:weSocketSet) {
                log.info("【websocket消息】广播消息，message={}",message);
                try {
                    webSocket.session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

java service调用

@Autowired
    private WebSocket webSocket;
    
    //发送websocket消息
    webSocket.sendMessage("有新的订单");