美文网首页
WebSocket SpringBoot使用步骤

WebSocket SpringBoot使用步骤

作者: guxiangfly | 来源:发表于2017-11-19 13:53 被阅读0次

    一: 加入依赖

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

    二: 配置 ServerEndpointExporter 暴露Endpoint

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

    三:编写 动作

    /**
     * WebSocketEndPoint
     *
     * @author guxiang
     * @date 2017/11/19
     */
    @Component
    @Slf4j
    @ServerEndpoint("/webSocket")
    public class WebSocketConnect {
    
        private Session session;
    
        private static CopyOnWriteArraySet<WebSocketConnect> webSocketSet = new CopyOnWriteArraySet<>();
    
    
        @OnOpen
        public void onOpen(Session session){
            this.session=session;
            webSocketSet.add(this);
        }
    
        @OnClose
        public void onClose(Session session){
            webSocketSet.remove(this);
        }
    
        @OnMessage
        public void onMessage(String message) {
            log.info("【websocket消息】收到客户端发来的消息:{}", message);
        }
    
        public void sendMessage(String message) {
            for (WebSocketConnect webSocketConnect: webSocketSet) {
                log.info("【websocket消息】广播消息, message={}", message);
                try {
                    webSocketConnect.session.getBasicRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
    
    

    四: 在前端界面编写连接

    <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(encodeURI('ws://localhost:8080/sell/webSocket'));
        }else {
            alert('该浏览器不支持websocket!');
        }
    
        websocket.onopen = function (event) {
            console.log('建立连接');
        };
    
        websocket.onclose = function (event) {
            console.log('连接关闭');
        };
    
        websocket.onmessage= function (event) {
            console.log('收到消息:' + event.data)
            $('#myModal').modal('show');
            document.getElementById('notice').play();
        };
        websocket.onerror = function () {
            alert('websocket通信发生错误!');
        };
        window.onbeforeunload = function () {
            websocket.close();
        };
    
    </script>
    

    五:发送消息的实例

    image.png

    相关文章

      网友评论

          本文标题:WebSocket SpringBoot使用步骤

          本文链接:https://www.haomeiwen.com/subject/kunuvxtx.html