Websocket是客户端与服务端的通信。本系统应用html5原生的Websocket,分为客户端和服务端。
客户端写在页面js中,客户端进行监听,一旦后端有了新订单,监听到消息,进行相应的操作。弹出框,音乐等
客户端js代码:
<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通信发生错误!'); } //窗口关闭时,Websocket关闭 window.onbeforeunload = function () { websocket.close(); } </script>
后端代码:
1.引入Websocket依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
2.添加Websocket配置:
@Component public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }
3.编写Websocket类:
@Component @ServerEndpoint("/webSocket") @Slf4j public class WebSocket { private Session session; //定义Websocket容器,储存session private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); //对应前端的一些事件 //建立连接 @OnOpen public void opOpen(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) { //遍历储存的Websocket for (WebSocket webSocket : webSocketSet) { log.info("【websocket消息】广播消息,message={}", message); //发送 try { webSocket.session.getBasicRemote().sendText(message); }catch (Exception e){ e.printStackTrace(); } } } }
4.用户端下单,创建了新的订单就触发发送消息的代码
@Autowired private WebSocket webSocket; @Override @Transactional public OrderDTO create(OrderDTO orderDTO) { //1-4 创建订单的逻辑 //... //... //5.发送Websocket消息 webSocket.sendMessage("有新的订单") ; return orderDTO; }
发送请求,创建订单成功
前端接收到后端出来的信息
此时,前端根据后端返回的消息内容,进行相应的判断和显示。(HTML中提示有新订单效果的代码略)