html5自帶了websocket，實現(xiàn)第一步，在pom.xml中引入websocket的依賴，我這里用的是springBoot。
第一步

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

第二步
使用html5自帶的websocket與后臺建立連接

<script>var websocket = null;if('WebSocket' in window) {websocket = new WebSocket('ws://localhost/webSocket'); //這里寫你的接口，協(xié)議用ws}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通信發(fā)生錯誤！');}window.onbeforeunload = function () {websocket.close();}</script>

第三步
在java后臺進行websocket的bean配置

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

第四步
websocket方法執(zhí)行的固定套路

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<>();@OnOpenpublic void onOpen(Session session) {this.session = session;webSocketSet.add(this);log.info("【websocket消息】有新的連接, 總數:{}", webSocketSet.size());}@OnClosepublic void onClose() {webSocketSet.remove(this);log.info("【websocket消息】連接斷開, 總數:{}", webSocketSet.size());}@OnMessagepublic void onMessage(String message) {log.info("【websocket消息】收到客戶端發(fā)來的消息:{}", 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();}}}}

這個時候前后端的websocket已經成功建立連接，web端可以寫一個彈窗做提示。

<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> <#--彈窗--> <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="你的提示音地址" type="audio/mpeg" /> </audio>

按照上訴套路就能實現(xiàn)移動端發(fā)送下單，后臺接收到訂單請求后刷新前端頁面的效果。

總結

以上是生活随笔為你收集整理的通过websocket实现顾客在小程序下单点餐，web前端自动提示“您有新的订单”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。