通过websocket实现顾客在小程序下单点餐，web前端自动提示“您有新的订单”

html5自带了websocket，实现第一步，在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');  //这里写你的接口，协议用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通信发生错误！');}window.onbeforeunload = function () {websocket.close();}</script>

第三步
在java后台进行websocket的bean配置

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

第四步
websocket方法执行的固定套路

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消息】收到客户端发来的消息:{}", 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>

按照上诉套路就能实现移动端发送下单，后台接收到订单请求后刷新前端页面的效果。

通过websocket实现顾客在小程序下单点餐，web前端自动提示“您有新的订单”相关推荐

点餐小程序源码_微信小程序餐饮点餐商城前端模版
微信小程序--餐饮点餐商城,是针对餐饮行业推出的一套完整的餐饮解决方案,实现了用户在线点餐下单.外卖.叫号排队.支付.配送等功能,完美的使餐饮行业更高效便捷! 运行小程序看效果双击运行第一步安装的小 ...
小程序开发实践总结 - WEB前端
从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹.我司也不例外,我们整个前端团队这半年来基本上都是在开发小程序.前前后后也开发了四五个小程序了.总觉得要留下点什么,既是记录那些年我 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...
android微信下拉出现小程序,仿新版微信的小程序下拉栏
原标题:仿新版微信的小程序下拉栏本项目会对金融交易软件中存在的各种View进行模仿绘制,提供详细的实现思路,收集整理相关算法.文档以及专业资料. https://github.com/scsfwgy ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
[Taro] 解决使用 Taro UI 小程序下 Iconfont 图标不显示问题
[Taro] 解决使用 Taro UI 小程序下 Iconfont 图标不显示问题参考文章: (1)[Taro] 解决使用 Taro UI 小程序下 Iconfont 图标不显示问题 (2) ...

通过websocket实现顾客在小程序下单点餐，web前端自动提示“您有新的订单”

通过websocket实现顾客在小程序下单点餐，web前端自动提示“您有新的订单”相关推荐

最新文章

热门文章