H5 webSocket使用

前端代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script>     var websocket = null;     if('WebSocket' in window) {         websocket = new WebSocket('ws://sell.natapp4.cc/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>

　

后端代码:

1.引入pom文件

?

1 2 3 4

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

2.配置config

?

1 2 3 4 5 6 7 8 9 10 11 12

import org.springframework.context.annotation.Bean; import org.springframework.stereotype.Component; import org.springframework.web.socket.server.standard.ServerEndpointExporter;   @Component public class WebSocketConfig {       @Bean     public ServerEndpointExporter serverEndpointExporter() {         return new ServerEndpointExporter();     } }

3.配置controller

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component;   import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import java.util.concurrent.CopyOnWriteArraySet;     @Component @ServerEndpoint("/webSocket") @Slf4j public class WebSocket {       private Session session;       private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();       @OnOpen     public void onOpen(Session session) {         this.session = session;         webSocketSet.add(this);         log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());     }       @OnClose     public void onClose() {         webSocketSet.remove(this);         log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());     }       @OnMessage     public void onMessage(String message) {         log.info("【websocket消息】收到客户端发来的消息:{}", message);     }       public void sendMessage(String message) {         for (WebSocket webSocket: webSocketSet) {             log.info("【websocket消息】广播消息, message={}", message);             try {                 webSocket.session.getBasicRemote().sendText(message);             } catch (Exception e) {                 e.printStackTrace();             }         }     }   }