GoEasy实现websocket 推送消息通知到客户端

最近在实现一个推送功能，用户扫描二维码签到，后台及时将签到成功信息推送到浏览器端。排除了前端ajax轮询的方式，决定采用websocket及时推送。 于是发现了第三方websocket推送库GoEasy,可以免费12个月10w条推送，支持RestApi推送，使用前需要注册一个账号。   测试功能如下，当用户扫描二维码，就弹出一条通知消息(带语音)提醒。 用到了iziToast.js这个jquery通知插件，很棒的。     <link rel="stylesheet" href="/module/plug/iziToast/iziToast.min.css"> <script src="/module/plug/iziToast/iziToast.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://xxx.goeasy.io/goeasy.js"></script> <div class="layui-card"> <div class="layui-card-header"> <h2 class="header-title">测试</h2> <span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a> <a><cite>测试</cite></a> </span> </div> <div class="layui-card-body"> <a href="#" class="trigger-success" data-iziToast>Success</a> <audio src="/module/plug/iziToast/34E888piCMHu.mp3" id="audioPlay" controls="controls"></audio> <img src="http://localhost:8086/api/sys/qrcode?str=111&pixel=9" /> </div> </div> <script type="text/javascript"> var goEasy = new GoEasy({ appkey: 'xxx', onConnected: function () { console.log("成功连接GoEasy。"); }, onDisconnected: function () { console.log("与GoEasy连接断开。"); }, onConnectFailed: function (error) { console.log("与GoEasy连接失败，错误编码：" + error.code + "错误信息：" + error.content); } }); $(function () { // // CONFIG IZIToast // iziToast.settings({ timeout: 5000, // position: 'center', // imageWidth: 50, pauseOnHover: true, // resetOnHover: true, close: true, progressBar: true, // layout: 1, // balloon: true, // target: '.target', // icon: 'material-icons', // iconText: 'face', // animateInside: false, // transitionIn: 'flipInX', // transitionOut: 'flipOutX', }); goEasy.subscribe({ channel: "office_11", onMessage: function (message) { console.log("Channel:" + message.channel + " content:" + message.content); iziToastSuccess(message.content); } }); function iziToastSuccess(msg) { iziToast.success({ title: 'OK', message: msg, position: 'bottomRight', transitionIn: 'bounceInLeft', // iconText: 'star', onOpen: function () { console.log('callback abriu! success'); autoPlay(); //playSound(); }, onClose: function () { console.log("callback fechou! success"); } }); } $(".trigger-success").on('click', function (event) { event.preventDefault(); iziToastSuccess('测试打卡成功'); }); function autoPlay() { $('#audioPlay').get(0).play() } }) </script>

转载于:https://www.cnblogs.com/langhaoabcd/p/10446371.html