后台下完订单，前端自动收到订单信息。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
package com.imooc.config; import org.springframework.context.annotation.Bean; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Component public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
package com.imooc.service; 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(); } } } }
<html> <#include "../common/header.ftl"> <body> <div id="wrapper" class="toggled"> <#--边栏sidebar--> <#include "../common/nav.ftl"> <#--主要内容content--> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-condensed"> <thead> <tr> <th>订单id</th> <th>姓名</th> <th>手机号</th> <th>地址</th> <th>金额</th> <th>订单状态</th> <th>支付状态</th> <th>创建时间</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <#list orderDTOPage.content as orderDTO> <tr> <td>${orderDTO.orderId}</td> <td>${orderDTO.buyerName}</td> <td>${orderDTO.buyerPhone}</td> <td>${orderDTO.buyerAddress}</td> <td>${orderDTO.orderAmount}</td> <td>${orderDTO.getOrderStatusEnum().message}</td> <td>${orderDTO.getPayStatusEnum().message}</td> <td>${orderDTO.createTime}</td> <td><a href="/sell/seller/order/detail?orderId=${orderDTO.orderId}">详情</a></td> <td> <#if orderDTO.getOrderStatusEnum().message == "新订单"> <a href="/sell/seller/order/cancel?orderId=${orderDTO.orderId}">取消</a> </#if> </td> </tr> </#list> </tbody> </table> </div> <#--分页--> <div class="col-md-12 column"> <ul class="pagination pull-right"> <#if currentPage lte 1> <li class="disabled"><a href="#">上一页</a></li> <#else> <li><a href="/sell/seller/order/list?page=${currentPage - 1}&size=${size}">上一页</a></li> </#if> <#list 1..orderDTOPage.getTotalPages() as index> <#if currentPage == index> <li class="disabled"><a href="#">${index}</a></li> <#else> <li><a href="/sell/seller/order/list?page=${index}&size=${size}">${index}</a></li> </#if> </#list> <#if currentPage gte orderDTOPage.getTotalPages()> <li class="disabled"><a href="#">下一页</a></li> <#else> <li><a href="/sell/seller/order/list?page=${currentPage + 1}&size=${size}">下一页</a></li> </#if> </ul> </div> </div> </div> </div> </div> <#--弹窗--> <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://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> </body> </html>
