首先在GoEasy官网上注册一个账号(https://goeasy.io),注册完毕后添加application,GoEasy会自动生成两个key,一个是Super key, 另一个是Subscribe key。
Super key:用于推送或接收 Subscribe key:仅用于接收,不能用来推送信息
java项目导包:goeasy-sdk-0.3.1.jar
服务端代码:
package org.socket;
import io.goeasy.GoEasy;
public class Tuis {
public static void main(String[] args) {
try {
GoEasy goEasy = new GoEasy("your super key");
for(int i=0;i<5;i++){
goEasy.publish("指定","骨头"+i);
Thread.sleep(3000);
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
客户端代码:
引入goeasy.js
<script type="text/javascript" src="https://cdn.goeasy.io/goeasy.js"></script
<html>
<head>
<title>推送</title>
<script type="text/javascript" src="scripts/goeasy.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<style type="text/css">
body{
background:#CFCFCF;
font-family: 'microsoft yahei',Arial,sans-serif;
overflow-y: scroll;
}
#ads{
font-size:14px;
position: absolute;
right:0;
bottom: 0;
background: #222;
padding: 0px;
color: #FFF;
border-radius: 3px;
height: 0;
overflow: hidden;
width: 238px;
transition: height 1.5s;
-moz-transition: height 1.5s; /* Firefox 4 */
-webkit-transition: height 1.5s; /* Safari 和 Chrome */
-o-transition: height 1.5s; /* Opera */
}
#ads.show {
height: 113px;
}
#ads.close {
height: 0px;
/* animation:rotateClose 1s;
-webkit-animation:rotateClose 1s; /* Safari 和 Chrome */ */
}
@keyframes rotateClose {
from {
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
width: 238px;
height: 113px;
opacity: 1;
}
to {
transform:rotate(1080deg);
-webkit-transform:rotate(1080deg); /* Safari 和 Chrome */
width: 0;
height: 0;
opacity: 0;
}
}
@-webkit-keyframes rotateClose {
from {
transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
width: 238px;
height: 113px;
opacity: 1;
}
to {
transform:rotate(1080deg);
-webkit-transform:rotate(1080deg); /* Safari 和 Chrome */
width: 0;
height: 0;
opacity: 0;
}
}
#ads p{
opacity: .6;
margin: 25px 10px 10px;
padding: 10px;
background: #444;
border-radius: 3px;
}
.close{
float:right;
font-size:12px;
cursor:pointer;
}
</style>
<script type="text/javascript">
var goEasy = new GoEasy({
appkey: 'your key',
});
goEasy.subscribe({
channel: '指定',
onMessage: function(message){ //自动接收推送信息
if(message!=null){
$("#p").html("您好,"+message.content+"已上线");
$("#ads").removeClass("close");
$("#ads").addClass("show");
}
}
});
$(document).ready(function(){
$(".close").click(function(){
$("#ads").addClass("close");
});
});
</script>
</head>
<body>
<h3 align="center">消息推送</h3>
<div id="container">
<div id="ads">
<span class="close">关闭</span>
<p id="p"></p>
</div>
</div>
</body>
</html>
效果演示:动态右下角滑出效果,可点击关闭。